Layout 2016

Das Layout der MSXFAQ hatte viele Jahre Bestand, aber die Besucher verändern sich und es gibt z.B. mehr Tablets und Mobilgeräte. Auf dieser Seite beschreibe ich die wesentlichen Änderungen. Diese Dokumentation ist primär für mich aber vielleicht ist dies für den ein oder anderen Besucher auch interessant.

Letzte Änderung (2022.01.15): "max-height: 100vh;" in Images addiert.

Warum ein bewährtes Bild ändern ?

Wen mir schon Bewerber spiegeln, dass die Webseite etwas "altbacken" wirke und letztlich mir auch Google meldet, dass die Seite nicht mehr "mobiltauglich" ist und daher in den Suchergebnissen schlechter bewertet wird, wir es Zeit etwas zu ändern. Den folgenden Hinweise habe ich gesehen, wenn ich bei Google als "Inhaber" angemeldet bin:

Es gab noch einige andere Gründe etwas am Layout zu ändern und meine eigenen Versuche mit CSS in den vergangen Jahren habe ich letztlich nicht "fertig" bekommen. Vielleicht fehlt mir als "Techniker" dann auch das Händchen für ein gefälliges Layout. Einfach woanders abgucken und einzelne Elemente zusammenkopieren sieht halt doch nicht gut aus. Daher habe ich mir Hilfe bei der Firma LEO Systems (heute Webcellent GmbH (https://www.webcellent.com/) aus Paderborn geholt um die MSXFAQ "lesbarer" und frischer zu machen.

Alt und Neu

Mit etwas externer Hilfe habe ich zuerst einmal das Layout anpassen lassen, damit es etwas "flacher" und weniger verschnörkelt ist, die Schriften etwas größer sind und das ganze Layout nun "responsive" ist, d.h. auch auf Smartphone und Tablet besser nutzbar ist.

  • Design bis 2016
  • Design ab 2016 für Auflösungen mit mehr als 920 Pixel Breite. Unter 1020 Pixel verschwindet schon das Seitenmenü Rechts üben
  • Design für mobile Geräte und weniger als 925 Pixel

Umsetzung

Nachdem mir dann alles gefallen hat, habe ich die neue Vorlage einfach mit dem Sharepoint Designer. Die technische Umsetzung war relativ einfach, da die interne Struktur der Seiten schon mit DIV-Blöcken vorgegeben war und ich einfach die DWT-Vorlage kopiert und geändert habe. Dann musste ich nur noch die CSS-Formate entsprechend anpassen. Hier die Änderungen im Detail:

  • Logo
    Das Logo wurde minimal überarbeiten. Es ist weiterhin die Standard Arial-Schriftart, aber das "X" ist nun mit einer weißen Scheibe unterlegt.
    oder
    Die Hintergrundfarbe ist RGB: 91 B2 4A  (145/178/749). Als schrift kommt durchweg Arial zum Einsatz. Das schwarze X ist einfach der Großbuchstabe und Fett
  • Font für Icons
    Bislang habe ich meist GIF/JPG-Ions für verschiedene Symbole genutzt, die aber gerade auf "skalierenden" Clients dann sehr schnell pixelig aussehen. Schöner und wohl auch schneller ist die Verwendung eines Font, der die ganzen Icons als vektorisierte Version enthält und auch im lokalen Cache vorgehalten wird. Daher habe ich die Dateien von der Quelle herunter geladen und auf der MSXFAQ eingebunden. Ein Verlinken auf eine externe Quelle mag ich nicht, da es eine Abhängigkeit von dessen Erreichbarkeit darstellt, dort ihre Zugriff auf die MSXFAQ gesehen werden können (Datenschutz) und ich Offline nichts testen kann. Ich habe den lizenzfreien Font daher von http://fontawesome.io/ heruntergeladen und halte ihn lokal auf der MSXFAQ vor. Der Link in der DWT-Vorlage wurde wie folgt im Bereich "<head>" addiert:
<link rel="stylesheet" type="text/css" href="images/font-awesome/css/font-awesome.css" title="Default">
  • "Responsive Layout"
    Das neue MSXFAQ-Layout ist "responsive", d.h. passt sich auf die Auflösung an. Auf kleinen Displays macht das Menü am linken Rand keinen Sinn und verschwindet. Dazu erscheint oben Rechts dann ein Menü-Icon.

    Dazu wurde folgender Code in der Vorlage direkt nach <div id="logo"></div> eingebunden:
<a id="mobile-menu" href="#nav"><i class="fa fa-bars"></i></a>
  • "totop"-Pfeil
    Gerade auf Mobilgeräten ist man schnell weiter nach unter gelaufen und durch das "Mobile Menü" springen sie quasi an das Menü am Seitensende. Da war es nur logisch auch wieder einen Rücksprung-Pfeil zu addieren. Sie finden ihn in der unteren rechten Ecke der Seite, wenn das linke Menü unter 925px Breite nach unten verschoben wird.

    Damit ist der schnelle Weg an den Start ohne viel "Wischen" möglich. Der folgende Code wurde dazu bei der Navigation addiert. Mittlerweile ist die Sprungfläche aber auch bei dem breiten Layout integriert, damit z.B. Tablets mit höherer Auflösung im breiten Layout auch ohne Wischen an den Anfang zum Seiteninhalt und Menü kommen.
<a href="#" id="totop"><i class="fa fa-arrow-up"></i></i></a>
  • Tabellen
    Da Tabellen je nach Größe ein Responsive Design sprengen, sollten diese nach Möglichkeit in einen <div> Container mit der Klasse „table-responsive“ eingebettet sein. ich habe dann einfach per "Suchen und Ersetzen alle Tabellen entsprechend erweitert. Wenn es zu klein wird, bekommen Sie dann einen Rollbalken. Das ist immer noch besser als das Layout der gesamten Seite zu zerstören.
Search/replace "<table" mit "<div class="table-responsive"><table"
Search/replace "</table>" mit "</table></div>"
Kopfzeile 1 Kopfzeile 2

Einfacher Text

Noch ein Text

Damit werden dann auch ganz große Tabellen auf kleineren Bildschirmen besser und zerstören nicht das Layout.

  • Icons und Logos
    Das ein oder andere Icon und Logo musste natürlich noch etwas angepasst werden, da sie nun durch das Responsive Design auch mal "nebeneinander" erscheinen können.
    gegenüber
  • SEO-Optimierung zu http://www.msxfaq.de und http://msxfaq.de
    Die meisten Suchmaschinen bewerten es negativ, wenn unter zwei URLs der gleiche Inhalt vorhanden ist. Über eine kleine Rewrite-Rule in der htaccess habe ich eine Umleitung auf www.msxfaq.de gebaut.
RewriteEngine On
#Redirect msxfaq.de to www.msxfaq.de
RewriteCond %{HTTP_HOST} !^www\.msxfaq\.de$ [NC]
RewriteRule ^(.*)$ http://www.msxfaq.de/$1 [L,R=301]
  • GZIP/DEFLATE
    Angeblich konnte man bei 1und1 schon früher GZIP/DEFLATE aktivieren aber Foren-Einträge sagten auch, dass es nicht gehen würde. Vielleicht lang es nur an einem Provisoining aber nach dem Vertragswechsel auf einen aktuellen Vertrag haben plötzlich auch die folgenden Zeilen ihre Wirkung entfaltet. Die Seiten sollten dank Kompression nun schneller ausgeleifert werden.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>
  • Bilder für Apple-Nutzer
    Damit auch die Apple-Nutzer ein nettes Logo haben, habe ich mich folgenden Code und die Images angelegt
<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-touch-icon-120x120-precomposed.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-touch-icon-152x152-precomposed.png" />
  • Images
    Anfang 2022 habe ich durch eine kleine CSS-Erweiterung dafür gesorgt, dass nun auch Bilder "responsible" sind, sich an der Fensterbreite ausrichten wenn diese ein einem Absatz mit <p class="image"><img ...." eingebunden sind. Auf Windows Browsern klappt es. IOS noch nicht.
p.image > img {
              max-width: 100%;
              max-height: 100vh;
}
  • H2-Überschriften mit Hyperlinks
    Bei Microsoft habe ich gesehen, dass die H2-Überschriften mit einem "Link"-Symbol versehen waren und die Überschriften selbst einen Link auf sich selbst haben. So kann der Leser einfach per "Rechte Maustaste" direkt den Link auf diese H2-Überschrift kopieren und weitergeben. In meinem VBA-Skript habe ich das dann auch schnell umgesetzt und im HTLM Code ist die Änderung einfach zu sehen und per CSS habe ich das Logo dann noch davor geklemmt.
--- HTML-Überschrift
Alt: <h2><a name="ablauf" id="ablauf" class="linkh2">Ablauf</a></h2>
Neu:<h2><a name="ablauf" id="ablauf" class="linkh2" href="#ablauf">Ablauf</a></h2>
----- CSS-Code
#content h2 .linkh2 {
    color: #333!important;
    font-weight: bold!important;
    margin: 30px 0px 10px 0px;
    padding-left:28px;
    background-image: url("images/css/h2anchor.gif");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: left center;
}

Sollten noch weitere Änderungen erforderlich sein, dann dokumentiere ich hier die Schritte.

Navigation/Menü

Eine große Baustelle ist das Menü auf der linken Seite gewesen. Ich habe die MSXFAQ bislang wie ein "Buch" aufgebaut und ein riesiges Inhaltsverzeichnis (Siehe Sitemap gibt die komplette Struktur wieder. Bislang war es so, dass das Menü alle Seiten eingeblendet hat, die über der aktuellen Seite, neben der aktuellen Seite und eventuell vorhandene Unterseiten angezeigt hat. Damit war das Menü "sehr lang". Frühere Versuche mit "Auf/Zuklappen" sind daran gescheitert, dass ich >3000 Seiten dann so verwalten musste und der Download der Menüdatenbank einfach lange gedauert und einige Tablets und PCs damals überfordert hat.

Mit einigen Analysen ist und aber aufgefallen, dass die meisten Anwender das Menü gar nicht genutzt haben, sondern direkt die Zielseite über ihre Favoriten oder Google-Suche angesprungen haben und vielleicht noch ganz wenige weitere Seiten verfolgt haben. Wenn das Menü aufgrund der Unübersichtlichkeit aber keiner nutzt, dann kann ich es auch straffen. Und genau das ist passiert.

Nun zeigt das Menü die Top-Bereiche an, den Pfad zur aktuellen Seite und die direkten Nachbarn. Es ist damit deutlich kürzer und mit mehr Zeilenabständen kann es auch einfach per Touch oder auf Smartphone bedient werden. Die Unterseiten finden Sie als Kacheln auf der entsprechenden Index-Seite.

Die Unterseiten sind aber auch im aktuellen Menü noch erreichbar. Wer hier auf die aktuelle Seite klickt, blendet die Unterseiten ein und aus. Das habe ich per JavaScript realisiert, welches im Header eingebunden ist.

<script type="text/javascript">
<!--
    function menuonoff(id) {
       var ul = document.getElementById(id);
       if(ul.style.display == 'none')
          ul.style.display = 'block';
       else
          ul.style.display = 'none';
    }
//-->
</script>

Der Code wird im Menü dann entsprechend als Click-Event auf den Eintrag der aktuellen Seite gebunden.

<a href="#" onclick="menuonoff('menusub');">Text des Menüeintrag<img src="../../images/submenu.gif" alt="+"></a>

Zudem wird die aktuelle Seite über ein eigenes Style farblich markiert. Wer also nun im Menü auf die gerade angezeigte Seite klickt, öffnet dann die Unterseiten, so es welche gibt.

Offen

Laut einen Sprichwort wurde Rom (Ital. Stadt, nicht ReadOnlyMemory) auch nicht an einem Tag gebaut und selbst für die Welt waren laut Überlieferung 6+1 Tage erforderlich. Ich habe auch nicht alle 3500 HTML-Seiten überprüft, ob nun wirklich alle Aufzählungen und Tabellen 100% passen.

Wenn Sie Fehler oder Unstimmigkeiten finden, dann senden Sie mir bitte per Mail einfach die URL und vielleicht ein Screencapture und auf welchem Client (PC, Smartphone, Table) und welchen Browser (Edge, IE11, Chrome, Firefox etc.) sie verwendet haben.

  • Kachelmenü
    An einigen Stellen nutze ich noch "Tabellen" zur Layout-Gestaltung. Das ist natürlich "Old Style" und möchte ich noch ändern.
  • Box mit Umbruch
    An verschiedenen Stellen verwende ich eine "Info-Box" mit unterschiedlichen Symbolen. Aktuell ist der Text komplett eingerückt. Ich überlege noch, ob die Bereiche mit Fließtext um das Bild herum fließen sollen. Das gilt natürlich nicht für die Klassen "boxps1", "boxcode" etc.
     
  • MSXFAQ Logo
    Auch das Logo oben Links wurde in die Mitte geschoben. Eventuell wird es noch etwas überarbeitet
  • Zeilenabstände
    Vielleicht sind hier auch noch die ein oder anderen Anpassungen erforderlich.

Wie geht es weiter ?

Die MSXFAQ wird auch zukünftig einer stetigen Weiterentwicklung unterworfen sein. Bezüglich des Layouts wird es erst mal nur leichte Anpassungen geben. Aber im Unterbau stehen einige Renovierungen an. Das aktuelle System aus Sharepoint Designer, Verzeichnisstrukturen und einem FTP-Upload kommt an seine Grenzen. Gerade der Sharepoint Designer war wohl nie für solche Datenmengen ausgelegt. Ich denke es wird in Richtung eines CMS (Wordpress?) gehen. Dann könnte ich auch endlich etwas "Dynamik" mit in das System bringen, z.B.: durch die Option Artikel mit "Sternchen" zu bewerten oder Kommentare zuzulassen. Dass dann auch mehrere Personen die Seiten bearbeiten könnten, ermöglicht es, dass vor allem Tippfehler und andere Bugs auch von anderen Personen korrigiert werden können. Über Tags und Kategorien lassen sich auch wunderbar neue Formen der Navigation ermöglichen und die Links bleiben auch gültig, wenn Seiten in andere Bereiche zugeordnet werden. Lassen Sie sich überraschen.

Weitere Links