Layout 2013

Natürlich kann sich zwar nach vielen Jahren an einem Layout auch "satt sehen" aber bislang habe ich keine einzige kritische Stimmen vernommen. Und nur weil Microsoft nun Windows 8 und Blockflächen verwendet, muss ich nicht die MSXFAQ komplett einem neuen Design unterwerfen. Ich habe 2013 nicht nur vor die Struktur und Navigation der MSXFAQ (Siehe Struktur 2013) etwas zu modernisieren, sondern vor allem auch das Layout auf neue Geräte und Anforderungen zu optimieren.

Anlass zur Änderung

Wenn ich mir die MSXFAQ von 2005 bis 2013 anschaue, speziell wenn der Monitor mehr als die damals üblichen 1024 Pixel hat, dann bin ich ziemlich "verschwenderisch" mit ihrem Platz umgegangen

Der eigentliche Content beschränkt sich auf einen mittleren Block, der statisch mit "max-width :830px" festgezurrt war. Mittlerweile zeigen auch die Statistiken, dass die meisten Administratoren mit 1920px Breite arbeitet. Auf der anderen Seite gibt es auch immer mehr Tablets und andere Geräte mit unterschiedlichsten Auflösungen. Insofern war es an der Zeit auch der MSXFAQ bezüglich der Platznutzung nicht mehr fix vorzusehen.

Blockdesign 2013

Ich wollte natürlich erst mal weg von der fixen Spaltenbreite. Wenn ich aber den Hauptblock "aufziehe", dann muss ich mir Gedanken um den "Skyscraper" an der Seite machen, da dieser auch mit absoluten Positionsangaben gesetzt wurde. Ohne Anpassungen würde der Block über dem Text liegen und den Text darunter abdecken. Es funktioniert also nur, wenn der Skyscraper nun in den normalen Ablauf der Blöcke eingebunden wird. Aus Rücksicht auf Browser, die nicht mit CSS umgehen konnten, hatte ich 2005 die logische Abfolge des Kontent in der Seite so umgestellt, dass z.B. das Menü und der Skyscraper hinter dem Content lagen. So wurde beim Druck eines Server dieser "Ballast" am Ende angehängt. Mit absoluten Positionierungen war das auch kein Problem. Mittlerweile gehe ich aber davon aus, dass alle Browser halbwegs sauber mit der CSS-Angabe "@Media Print" umgehen können. Insofern gibt es nun folgende logische Abfolge der DIV-Blöcke (Links), die dann mit "FLOAT" umeinander gruppiert werden, so dass das Layout rechts zustande kommt.

Der Content im MAIN-Block kann dann die komplette Breite des Browsers (abzüglich der Navigation) nutzen. Ich hätte sogar noch unten die Option den Content nach Links auszudehnen und damit noch mehr Platz für den Content zu schaffen.

Responsive Webdesign

Platz ist auf dem kleinsten Device, aber nicht immer für alle Informationen. Über "Responsive bzw. adaptives Webdesign" kann eine Webseite "dynamisch" auf die Auflösungen der Browser reagieren. Ich werde in der ersten Version z.B. den "Skyscraper" auf der rechten Seite Ausblenden. Damit gibt es mehr Platz für den Inhalt auf kleineren Geräten wie Tablets oder wenn Sie als Admin eine Seite der MSXFAQ reduziert darstellen, um Platz für ihre MMC., PowerShell oder Fernsteuerung zum Server zu schaffen. Der entsprechende Code im Stylesheet ist:

@media screen and (max-width: 799px) {
	#skyscraper {
		display: none;
	}
}

Wenn der Browser auf weniger als 800px Breite reduziert wird, dann verschwindet der Skyscraper. Mittelfristig denke ich auch an weitere Platzoptionen, z.B. die Reduzierung des Menüs an der Seite. Allerdings muss der Browser natürlich "Media Queries" unterstützen, um davon zu profitieren.

Werbung

Die MSXFAQ ist "weitestgehend" werbefrei. Ich habe auch zukünftig nicht vor, Google AdWords oder andere Anbieter an den Rand oder sogar zwischen den Inhalt zu schmuggeln oder nervige Popups, PopUnder oder "Download Here" Buttons zu verstecken. Allerdings werden Sie auch 2013 dezente Hinweise auf die Firma Net at Work, das Logo und Hinweise auf die Produkte finden.

  • Links unter dem Menü (120x90px)
    Ein statisches Logo auf Net at Work. Es ist erstaunlich wie viele Leser die Verbindung von mir als Person und der Firma Net at Work als Dienstleister nicht können
  • Ganz rechts
    Der oft auch "Skyscraper" genannte Block mit wechselnden Informationen. Hinweis: Die Werbung wird vom Content der Webseite umflossen, verschwindet wenn das Fenster schmaler als 801 Pixel ist
  • Im Text
    Dort, wo ich es für angebracht halte, finden Sie einen Hinweis, das Net at Work sie bei der Umsetzung unterstützen kann. Die Hinweise haben weiterhin folgendes Format und verweisen auf die Net at Work-Seite der MSXFAQ. Erst wenn Sie von dort weiter klicken, landen sie auch bei Net at Work.

So sieht der Hinweis auf das Angebot von Net at Work aus.

Abgesehen von den zielgerichteten Hinweisen im Content zu Net at Work Dienstleistungen wird die Werbung nicht ausgedruckt.

Andere Überlegungen

Ich bin noch nicht fertig aber die folgenden Dinge sind noch nicht umgesetzt und ich muss selbst erst einmal prüfen, welche der Überlegungen überhaupt sinnvoll sind.

  • Seitenpfad am Kopf
    Die Zunahme der "Touch"-Geräte zeigt auf, wie schwer die Navigation am Kopf zu nutzen ist. Der Pfad zur aktuellen Seite könnte "flächig" werden, wie es an vielen Stellen schon zu sehen ist.

    So werden diese Links vielleicht auch etwas besser wahrgenommen
  • Menü umgestalten
    Unter "Struktur 2013" habe ich schon vorgestellt, wie das Menü verschlankt werden könnte. Wenn dies umgesetzt ist und weniger Einträge vorhanden sind, dann könnte auch das Menü entweder eine größere Schrift bekommen oder auch "flächig" gestaltet werden.
  • Menü "wegklappen"
    Mit Interesse habe ich die Seiten über "Responsive Design" gelesen, bei dem Abhängig von der Fensterbreite des Clients bestimmte Stiele angepasst werden. So könnte das Menü auf Icons zusammenschrumpfen, wenn das Display sehr klein ist oder Sie den Browser eben klein machen, um auf dem Monitor noch andere Inhalte anzuzeigen. Über den gleichen Weg hat z.B. die Seite www.gh.de das Menü links sogar komplett weg geklappt. Allerdings muss man natürlich andere Wege zur Navigation dann einrichten.
  • Kein JavaScript Menü
    Ich habe schon früher mit JavaScript und Menüs experimentiert aber da die MSXFAQ ca. 2000 HTML-Seiten hat und ein Menüeintrag vielleicht 100 Bytes belegt, kommen da schon 200KB "Datenstrukturen" zusammen, die der Client erst mal "rendern" muss. Das ist aus meiner Sicht nicht sinnvoll.

Das Layout mit Blöcken und CSS behalte ich bei. Dokumentiert wird nun aber auch der Skyscraper, der wechselnde Inhalte von Net at Work einblendet.

Weitere Links