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.
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.
Donnerstag, 31.07.08 (08:00 Uhr)
Bin schwer begeistert vom Layout. Viele tolle Ideen. Und vor allem stringent umgesetzt. Da würde ich mir das eine oder andere mal abschauen wollen - wenn ich darf.
Ich glaub, da hol ich gleich mal Dein Buch aus dem Regal und nehm es mit in den Bus. Bücher, die nur rumstehen, sind nichts anderes als Staubfänger. Man sollte sich vergegenwärtigen, daß da was drin steht, was sich lesen und verstehen lässt… ;-)
Donnerstag, 31.07.08 (08:01 Uhr)
Und die Lösung für die Kommentare: sehr schön!
Donnerstag, 31.07.08 (11:03 Uhr)
Hmmm… Ich klicke auf “Small Screen” und er speichert diese Einstellung in ein Cookie. Gut. Schlecht nur, dass ich nach nicht mehr umschalten kann. (Safari, Mac).
Donnerstag, 31.07.08 (12:05 Uhr)
Ach ja, Mr. Safari (Win/Mac) gibt sich wohl nicht damit zufrieden, dass das Link-Element des Stylesheets aus dem DOM entfernt wird. Jetzt deaktiviere ich es zuvor auch noch (quasi Gürtel+Hosenträger) und jetzt kapiert er’s auch.
Danke für den Hinweis.
Sonntag, 03.08.08 (04:28 Uhr)
Ich bin auch sehr beeindruckt vom neuen Layout und mir fällt spontan - und auch nach längerem Nachdenken - keine so schöne, leichte und gut lesbare andere Seite ein. Auch die Schrift sieht gut aus.
Unter Windows XP und Firefox 3 wird bei mir sehr wohl die Calibri benutzt. Ich weiß nicht, mit welcher Art Kantenglättung du das unter XP getestet hast. Hat man die Kantenglättung aktiviert, muss man diese noch explizieht auf ClearType umstellen (Desktop -> Rechtsklick -> Eigenschaften -> Darstellung -> Effekte) und damit siehts dann wirklich gut aus. Oder nicht?
Montag, 04.08.08 (13:29 Uhr)
Hallo Simon,
Vermutlich musst Du nur mal den Browsercache löschen, dann sollte Arial zum Vorschein kommen. Der Umstand, dass die standardmäßige Kantenglättung so miserabel ist, reicht mir. Ich erwarte ja nicht, dass Du oder ein anderer Leser erst explizit die Kantenglättung konfigurieren muss, nur um meine Seite in einer anständigen Schriftdarstellung lesen zu können. Daher komme ich dem Drama lieber zuvor und biete eine alltagstaugliche Alternative.
Freitag, 08.08.08 (11:53 Uhr)
Zuerst zum Nachtrag.
Die Windows-XP-Nutzer kommen nicht mehr in den Genuss der traumhaft schönen Schrift Calibri. Ob Big Screen oder Small Screen - sie müssen sich jetzt mit Arial begnügen.
Arial: Der Urvater aller Schriften im Web, das missglückte Helvetica-Plagiat, hässlich wie die Nacht, durchaus für Fließtext geeignet, allerdings kaum noch genutzt, so dass ihr Einsatz schon wieder trendy ist. Ja, ich habe Gerrit van Aaken’s Essay - HTML-Schriften unter der Lupe - gelesen.
Sein Urteil über die Calibri: Serifenlose Schrift für Fließtext, rundlich-weiblicher, besitzt ein „klassisches“ kleines g. (Merkhilfe: Calibri und Corbel vom 08.07.2008).
Und ganz aktuell:
„Ich habe neulich mit Calibri gespielt und finde, dass sie bei 14 Pixel sowohl unter ClearType als auch unter Quartz sehr gut aussieht.“ (Weblog vom 03.08.2008)
Ich habe beide Schriften in einem Test selbst noch einmal verglichen:
Die Calibri ist graziler, sanft gerundet, von der Farbe etwas blasser (color: #333 würde ihr meines Erachtens besser zu Gesichte stehen als color: #555), sie ist wirklich traumhaft schön.
Unter Windows XP sieht sie auch mit ClearType gut aus (sehr gut ist wohl etwas übertrieben), wenn auch die Kantenglättung unter VISTA besser ist.
Die Arial ist farblich etwas kräftiger, die Buchstaben drängen sich dichter aneinander, sie wirkt etwas sperrig, steif, hölzern - hässlich wie die Nacht würde ich sie allerdings nicht bezeichnen.
Auch wenn mir anfangs die Schrift mit Calibri zu klein erschien, so habe ich mich inzwischen mit ihr angefreundet. Wenn ich längeren Fließtext lese und meine Augen nicht überanstrengen will, muss ich die Calibri mit 14px allerdings auf 120% vergrößern, dass muss ich bei der Arial mit 12px aber auch. Eigentlich gibt es kaum eine Webseite, wo ich nicht die Schrift vergrößere, zum Glück ist das (meist) problemlos möglich.
Die generelle Umstellung auf Arial als alltagstaugliche Variante für Windows XP ist gut gemeint und ich möchte auch keinesfalls dagegen protestieren. Da ich aber die Calibri-Vaiante auch sehen möchte, habe ich ein Benutzer-Stylesheet geschrieben und kann nun nach Belieben zwischen Arial und Calibri wechseln.
Zum eigentlichen Thema:
Das Layout mit flexiblen Grids hat mir auf den ersten Blick gefallen.
Die Erläuterungen geben einen guten Einblick in den Entstehungsprozess des Layouts und zusammen mit der Grafik schärfen sie den Blick für die Einzelheiten und Feinheiten.
Mittwoch, 27.08.08 (14:07 Uhr)
Hallo Dirk!
Wie Du bereits weißt hat mir dein Layout wirklich ausnehmend gut gefallen.
Nochmals Kompliment!
Die Grid-Struktur wirft bei mir nur folgende Frage auf: Wenn man nun von Deinem Beispiel bei #main ausgeht, da hast Du 25% 66,667% und 33,33% angenommen. Gibt es eine Möglichkeit, daß im Quelltext das Grid mit 66,667% zuerst angezeigt wird? Also entsprechend cols mit 2-1-3?
Über eine kurze Antwort würde ich mich freuen!
Viele Grüße
Michael
Mittwoch, 27.08.08 (14:10 Uhr)
Sorry, das war zu schnell getippt, die Prozentangaben stimmen natürlich nicht. Natürlich meine ich das das 75% grid deines Layouts, welches zuerst im Quelltext erscheinen soll.
Entschuldige das Kuddelmuddel!
Viele Grüße
Michael
Mittwoch, 27.08.08 (16:03 Uhr)
Hallo Michael,
Das tut es von ganz allein (siehe Quellcode). Es gibt keine spezielle 25% Spalte, die vor allen anderen Elementen erscheint. Die Inhalte werden lediglich über horizontale Margins und Paddings an der jeweils richtigen Stelle platziert.
Gruß
Dirk
Mittwoch, 27.08.08 (22:25 Uhr)
Hallo Dirk!
Danke für deine schnelle Antwort, leider scheine ich mich etwas ungeschickt ausgedrückt zu haben.
Auch in deinem Fall wird das Grid 25% (mit dem Datum) im Quelltext vor dem Titel des Artikels ausgegeben, der ja im nächsten Grid steht, ausgegeben.
Da bei mir der Artikeltitel einen h1-Tag hat und in der linken Spalten mit niedrigeren h2-Tags etwas anders steht, hätte ich gerne im screen zwar die Anordnung von links nach rechts, im Quelltext jedoch das mittlere grid, wegen des h1-tags (und einiger suchmaschinen-bots) zuerst.
Etwa so wie es in deiner Beispiel -Datei: 2-1-3-seo.html mit cols realisiert ist, meine Frage war ob dies mit grids überhaupt möglich ist, oder ob ich dann in meinem #main-Abschnitt auf cols zurückgreifen muß.
Mittwoch, 27.08.08 (23:36 Uhr)
Hallo,
Das ist ein Irrtum Deinerseits. Es gibt hier keine 25% Grid-Spalte. Schau Dir die Startseite des Weblogs an (im Quelltext oder in der Druckvorschau). Gäbe es eine solche 25%-Spalte, müssten alle Datumsangaben vor dem ersten Beitrag im Quelltext stehen, was jedoch nicht der Fall ist. Das Datum ist lediglich das erste Element eines jeden Beitrags und wird entsprechend am Bildschirm seitlich positioniert. Eine extra Grid-Spalte benötigt man dafür also nicht.
Was Dein Layout anbetrifft, ist eine Empfehlung per Kommentar schwer. Selbstverständlich lassen sich die Subtemplates in Handarbeit ganz genauso in ihrer Reihenfolge manipulieren wie die normalen Content-Spalten, es sind schließlich auch nur floatende Container. Du solltest Dir aber überlegen, ob das wirklich notwendig ist.
Wenn deine Inhalte semantisch korrekt ausgezeichnet sind, dann ist deren Position im Quelltext eigentlich annähernd unwichtig. Die Suchmaschinenbots werden auch so anhand der Überschriftenhierarchie Wichtiges von Unwichtigem unterscheiden können. Mit CSS lässt sich nicht reparieren, was man mit sich schlecht gewähltem HTML zuvor verbaut hat. Wenn Deine Randinhalte unbedeutend sind, zeichne sie mit H5 oder H6 aus und nicht mit H2.
Mehr lässt sich ohne einen Blick auf den Layoutentwurf nicht sagen. Technische Wege zur Umsetzung gibt es immer mehrere.
Donnerstag, 28.08.08 (13:30 Uhr)
Hallo Dirk!
Danke für deine unendliche Geduld, jetzt habe sogar ich es begriffen! ;-)
Donnerstag, 04.12.08 (02:11 Uhr)
Hallo Dirk,
YAML an sich ist ja schon spitze, aber das Design für Deine neue(n) Seite(n) ist überirdisch.
Ich spiele ein wenig mit YAML, um für Typo (nicht Typo3, sondern Typo, das Ruby on Rails Blog) ein Template zu schreiben.
Wenn Du Dich nicht daran störst, hätte ich da eine Sache, die ich an Deiner Seite gerne verstehen würde, um das so ähnlich für mein Template zu realisieren:
Der Header und Footer schließen nahtlos links und rechts am Rand an, während der Teil in der Mitte nach links und rechts noch etwas Platz hat. Ich komme nicht drauf, wie Du das gemacht hast.
liebe Grüße aus Hamburg,
Tobias
Donnerstag, 04.12.08 (21:26 Uhr)
@Tobias
Schau Dir mal den Quelltext und das CSS des Headers und Footers an. Die Verschachtelung von
.page_margins,.pageund#headerist einfach vertauscht. Und wie Du siehst, sind.page_marginsund.pagein diesem Fall Klassen statt IDs damit die Mehrfachnutzung möglich ist.Mit YAML 3.1 wird das alles ganz einfach gehen, Beispiele gibt es auch. Aber auch jetzt schon solltest Du das leicht selbst umsetzen können. So schwierig ist es nicht.
Gruß
Dirk
Freitag, 05.12.08 (00:04 Uhr)
Vielen Dank Dirk!!
Wann darf man YAML 3.1 erwarten? :-)
Vorweihnachtliche Grüße,
Tobias
Freitag, 05.12.08 (00:45 Uhr)
@Tobias
Zum Nikolaus wird es nichts mehr aber ich denke, noch vor Weihnachten. Das Download-Paket samt Beispielen ist bereits seit einigen Tagen fertig, momentan sitze ich noch an der Dokumentation + Übersetzung.
Sonntag, 11.01.09 (12:50 Uhr)
Hallo Dirk,
bin schon sehr gespannt auf yaml 3.1 !!!
Gibt es schon etwas Neues, Du wolltest ja vor Weihnachten fertig sein?
LIebe Grüße
Stefan
Sonntag, 11.01.09 (13:48 Uhr)
Hallo Stefan,
in den letzten Wochen ist viel passiert in Sachen Feinschliff von YAML 3.1. Es dauert wirklich nicht mehr lange. Es ist nur noch eine Frage von Tagen ...
Gruß
Dirk
Sonntag, 11.01.09 (15:03 Uhr)
Hallo Dirk,
danke für die schnelle Antwort.
Du bist auch immer am arbeiten - oder?
Hast Du auch mal Freizeit?
Liebe Grüße
Stefan