Donnerstag,
31. Juli 2008

Es wird Zeit für den zweiten angekündigten Einführungsbeitrag zum Relaunch und heute soll es um das neue flexible Layout gehen.  Seit 2005 hatte ich sowohl in meinem Weblog als auch auf der Firmenpräsenz jeweils schmale, auf Bildschirmauflösungen mit 800px Breite optimierte Layouts. Für die Firmenpräsenz war das nicht sonderlich kritisch, hier gab es nur sehr wenige Inhalte, die in Verbindung mit großformatigen Grafiken in festen Proportionen recht gut harmonierten. Im Weblog richtete ich mich damals ganz einfach nach der Masse und hatte zudem durch die schönen Titelfotos auch eine hinreichend gute Ausrede für ein fixes Layout (ebenfalls für 800px optimiert).  Zwar war es letztlich elastisch, d.h. es skalierte in der Breite mit der Schriftgröße, jedoch werden wohl nur die wenigsten meiner Leser davon Notiz genommen haben.

Gerade infolge der Breitenbeschränkung habe ich festgestellt, dass man/ich schnell dazu neige, jeden verfügbaren Platz möglichst effektiv zu nutzen. Man reduziert bewusst Schriftgrößen, um in der Sidebar trotz 180-200px Breite Inhalte noch halbwegs anständig präsentieren zu können und reduziert Abstände, damit überhaupt alle halbwegs interessanten Inhalte einigermaßen im Blickfeld des Nutzers bleiben. Für Weißraum – die sprichwörtliche Luft zwischen den verschiedenen Inhalten – war eigentlich kein Platz.

Flexibles Grid — Orientierung und Ausbruch

Ich mag den aktuellen Trend zu Grid-Layouts, denn sie erlauben eine sehr freie Anpassung an die Bedürfnisse des jeweiligen Inhaltsbereiches und fordern bei der Layoutentwicklung das Spiel mit den Elementen geradezu heraus. Ein Grid steht und fällt dabei mit den gewählten Proportionen, der Ausrichtung der Elemente an sichtbaren oder unsichtbaren Achsen und gleichmäßigen Abständen untereinander. Für die nachfolgenden Erläuterungen sollte die folgende Grafik hilfreich sein, die das grundlegende Raster verdeutlicht.

Screenshot mit Grid-Markierung

Technisch basiert das Layout auf YAML, wobei ich hier ausschließlich die Subtemplates verwende. Maßgebend für die Raumaufteilung des Grids war die Festlegung der sechs Hauptmenüpunkte, jeweils mit 16.7% Breite. Aus dieser Breite ergibt sich das übergeordnete Raster. Unterhalb des Hauptmenüs erfolgt die Raumaufteilung im Verhältnis 2 zu 1 (66% | 33%) für Inhaltsbereich und Sidebar. Diese Achse wird auch bewusst durch die vertikale Trennlinie hervorgehoben. Im Inhaltsbereich (links) wird die Elementbreite der Navigation mit dem Datumsfähnchen erneut aufgegriffen und die eigentlichen Inhalte bündig zum Menütext des zweiten Menüpunktes horizontal linksbündig ausgerichtet. Die Einrückung und Ausrichtung wird durch eine Kombination aus Padding und Margin erreicht, um sowohl die 16,667% Breite des Menüpunktes als auch die 12px Einrückung des Menütextes korrekt abbilden zu können. Generell werden Layout-kritische (horizontale) Abstände in Pixeln definiert (6/12/18px), die meisten vertikalen Abstände sind hingegen in EM ausgezeichnet und richten sich so nach der von Nutzer eingestellten Schriftgröße. Auf diese Weise bleibt das Raster auch dann weitgehend intakt, wenn nur die Schriftgröße verändert wird. Nicht alle Browser bieten schließlich den Seitenzoom.

Um dem Grid-Layout zusätzliche Spannung zu verleihen, brechen einzelne Elemente bewusst aus diesem Raster aus. Das Zitat auf der Startseite durchbricht diese vertikale Achse, welche darunter in den neuesten Kommentaren wieder aufgenommen wird. Auf den Content-Seiten sind es die Bilder, die jeweils links in den Weißraum stoßen und das Raster auflockern, wobei dieser Versatz nicht nur optische Gründe hat. Denn dadurch kann ich auch bei geringen Bildschirmauflösungen immer noch relativ breite Grafiken in meinen Beiträgen verwenden, auch wenn die Inhaltsspalte selbst bereits nur noch knapp 400px breit ist.

Schriftgrößen und -gestaltung

Das Layout soll vorrangig bei größeren Bildschirmauflösungen gut aussehen, bei 800x600 aber natürlich immer noch gut benutzbar sein. Um beide Extrema möglichst gut kontrollieren zu können, habe ich mich dafür entschieden, zwei Schriftgrößenvarianten (SMALL SCREEN, BIG SCREEN) bereit zu stellen, die sich per Styleswitcher umschalten lassen. Die jeweilige Einstellung des Nutzers speichert ein Cookie dauerhaft.

Als Standardschrift habe ich mich mit Calibri für eine der zahlreichen neuen Vista-Schriften entschieden. Mit der unter Vista standardmäßig aktivierten Kantenglättung liefert diese relativ schmale, serifenlose Schrift bei 14 Pixel Höhe ein hervorragendes Schriftbild. Leider bietet Microsoft die Schriften für XP-Nutzer nicht einfach zum Download an. Allerdings werden Sie beispielsweise bei Office 2007 (Win/Mac) oder auch dem PowerPoint 2007 Viewer mitgeliefert. Dennoch – und darauf muss ich leider hinweisen – ist das Schriftbild der Calibri unter Windows XP deutlich schlechter, da dessen Kantenglättung offensichtlich weniger ausgereift ist (sie wirkt leicht fett). Daher wurde für XP als alternative Schrift Arial gewählt. Diese ist naturgemäß auf Windows-Rechnern auch ohne Kantenglättung sehr gut lesbar. Die Optimierung von Schriftart, Schriftgröße sowie die Wahl von Alternativschriften ist dabei alles andere als einfach, denn Schriftarten wie Verdana, Trebuchet MS und Arial unterscheiden sich trotz identischer Werte für font-size signifikant in ihrer Größe am Bildschirm und in der Lesbarkeit. Speziell die Lesbarkeit variiert sehr stark bei kleinen Schriftgrößen, sodass die Auswahl von Alternativen nicht immer einfach ist. Ich habe mich daher letztlich dafür entschieden, im SMALL SCREEN Modus generell von Calibiri, 14px auf Arial, 12px als Standardschrift zu wechseln, weil die Calibri hier einfach zu klein wurde. Die Lesbarkeit sollte in dieser Kombination mit/ohne Kantenglättung gleichmäßig gut sein.

Damit ist auch der zweite Teil beendet. Im dritten Beitrag der Relaunch-Serie werde ich dann etwas zur Umsetzung des Layouts und der Organisation der Webseite mit der ExpressionEngine berichten.

Nachtrag: Mit Rücksicht auf die eher bescheidenen Fähigkeiten der Cleartype-Kantenglättung unter Windows XP in Verbindung mit den Vista-Schriften habe ich mich dazu entschlossen, per JavaScript unter Windows XP generell auf Arial umzustellen. Calibri ist mit 14px Größe und aktivierter Kantenglättung einfach zu schwer lesbar — unter Windows Vista hingegen ein Traum.


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.