Tutorial: Gestaltungsraster im Webdesign II.
“…and second, grids matter a lot in information design. Now you know why I’m so crazy for them.”
Nachdem ich im ersten Teil versucht habe zu erklären, wie Rastergrößen entstehen, soll es in diesem Teil nun um die Anwendung des Gestaltungsrasters gehen. Ich bin mir unsicher, wie weit ich hier nun ins Detail gehen soll. Dieses Tutorial setzt ein solides Grundwissen über CSS vorraus. Ich kann und möchte hier keine Grundlagen zur Positionierung von HTML Elementen klären, ich möchte nur zeigen, wie man ein Raster bei der Positionierung von Elementen, einhalten kann.
Damit kommen wir auch gleich zur Methodik dieses Teils. Für die ganz Ungeduldigen gibt es am Ende des Artikels, zwei Beispiel-Seiten. Für alle anderen werde ich nun Schritt für Schritt vorgehen. Ich werde das Prinzip, an Beispiel eines p-Blocks erläutern. Ich muss nicht jeden kleinen Abschnitt meiner Seite erläutern, um das System zu erklären. Wer dieses Tutorial gelesen hat, wird fast alles was es hier zu sehen gibt, ebenfalls realisieren können.
Grundsätzliches
An dieser Stelle sei eine kleine Korrektur zum ersten Teil angebracht. Um die Sache hier nun leichter erläutern zu können, werde ich das Raster für diesen Teil etwas ändern. Mein Beispiel-Raster besitzt von nun an absolute gleichmäßige Abstände. Damit reduzieren sich die äußeren 30 Pixel, zu 20 Pixeln. Wieso, warum und weshalb, wird sich um Laufe dieses Textes selbst erklären. Damit sieht mein Beispiel-Raster nun folgendermaßen aus:
Alle 3 Spalten sind 224 Pixel breit, und besitzen 20 Pixel breite Abstände zu beiden Seiten. Daraus ergibt sich eine Gesamtbreite von 752 Pixeln. Diese 752 Pixel sind als Breite des DIVs zu definieren, welches später die Inhalte enthalten soll.
Zwei Werte machen die Positionierung auf dem Raster aus: Breite der Elemente, sowie Abstand der Elemente, zu einer der äußeren Kanten. Mit diesen beiden Größen, kann ich somit jedes HTML Element, auf das Raster legen. Der elegantere Ansatz, ist nur mit dem äußeren Abstand (Margin) zu arbeiten. Im Idealfall, definiert sich somit die Breite des Elements von selbst. Leider ist dies nur die Theorie. In vielen praktischen Fällen, wird man nicht drum rum kommen, die Breite zusätzlich fix zu definieren. Besonders der gute alte Internet Explorer, möchte immer noch einen Wert für die Breite (width) viele seiner HTML-Elemente haben.
p-Block über Spalte 1 und 2
Ein kurzer Blick auf die ersten Styles für das p-Tag dieses Stylesheets:
p {
font: normal .8em Arial, Verdana, Helvetica, sans-serif;
line-height: 140%;
width: 468px;
margin: 0 0 0 244px;
padding: 3px 0 12px 0;
}
Wie man sieht, bin ich mit dieser CSS Formatierung, auf Nummer sicher gegangen. Wichtig sind wie eben schon geschrieben nur die Angaben margin und width. Die folgende Grafik soll zeigen, wie ich den p-Block definieren möchte.
Wie definiert sich der hier dargestellte p-Block nun genau? Auch hier gibt es wieder verschiedene Möglichkeiten. Fest steht, dieser Block soll eine Breite von exakt 468 Pixeln besitzen. Diese 468 Pixel entstehen aus der Breite von 2 Spalten inklusive einem Zwischenraum: 224 * 2 + 20 = 468. Diese Breite kann man nun im CSS definieren: width: 468px;. Nichts anderes habe ich getan.
Skizzen zur Version 5
Was nun noch fehlt, ist die genaue Position. Für mich ist es logischer, zur Positionierung von Elementen, immer von Links aus zu zählen, soll heißen der Null-Punkt des Rasters ist immer die linke obere Ecke. Dies ist kein Zwang, denn CSS erlaubt dank Floats und Margins, ebenfalls eine Positionierung relativ zur rechten Seite.
Der p-Block der oberen Grafik besitzt nun einen linken Abstand von 20 Pixeln und einen rechten Abstand von 244 Pixeln. Diese Zahlen sind nun mit Margin-Werten im CSS zu definieren.
p {
width: 468px;
margin:0 264px 0 0;
}
/* oder auch */
p {
width: 468px;
margin:0 0 0 20px;
}
Beide oberen CSS Angaben führen theoretisch zum exakt gleichen Ergebnis. In beiden Fällen ist die Breite und die Position fest definiert. Spannend wird es, wenn man beide Optionen kombiniert und sich somit die Angabe der Breite sparen kann.
p {
margin:0 264px 0 20px;
}
Durch beide Marginwerte definiert sich die Breite des Elements automatisch. Dieses kleine Detail ist essenziell, möchte man später sein Raster um eine Spalte verändern. Somit reicht eine Änderung dieser Margin-Werte aus, um statt 3 dann 4 Spalten zu verwenden. Für den Fall, dass eine weitere Spalte dazukommt, muss man nur 244 Pixel (eine zusätzliche Spalte samt Zwischenraum) zum rechten Margin-Wert addieren. Fertig.
p-Block über Spalte 2 und 3
Mein p-Block soll wieder 468 Pixel breit sein, also wieder über 2 Spalten laufen. Diesmal allerdings möchte ich den Block über Spalte 2 und 3 laufen lassen, Spalte 1 soll übersprungen werden. Wie definiert sich nun Spalte 2 und 3? Das Element muss einen linken Abstand von 264 (20+224+20) Pixeln besitzen und 468 (224*2+20) Pixel breit sein:
p {
width: 468px;
margin: 0 0 0 264px;
}
Spart man sich die Angabe der Breite, so kommt ein zusätzlicher Margin-Wert hinzu, in diesem Fall wieder 20 Pixel (also ein Spaltenabstand), auf der äußeren rechten Seite.
p {
margin: 0 20px 0 264px;
}
1 Spalte floaten
Jetzt sollten die einfachen Möglichkeiten, Elemente anzuordnen erklärt sein. Die Frage die noch offen ist, wie man die Elemente, 1-Spalte breit, nebeneinander stellt. Mein Anwendungsbeispiel dafür ist zum Beispiel die Suche, oder das Archiv auf dieser Seite.
Zwei kleine Probleme ergeben sich nun. Zum einen habe ich bis jetzt nur Elemente untereinander positioniert, nun soll es aber nebeneinander statt finden und dadurch kommt man um Floats nicht mehr herum. Dies erzwingt weiterhin die Angabe von festen Breite, allein mit Margins kommt man hier nicht weiter. Welche Werte brauche ich also? Mein Block wird 224 Pixel breit und muss einen Margin Wert von 20 Pixeln besitzen. Da dies normale p-Elemente werden, die dennoch anders positioniert werden sollen, verwende ich eine CSS-Klasse, statt des normalen p-Tags, wie oben.
p.floats {
width: 224px;
float: left;
margin: 0 0 0 20px;
}
Das Ganze lässt sich logischerweise auch problemlos zur rechten Seite floaten, dann wandert der Margin-Wert natürlich zur anderen (rechten) Seite.
p.floats {
width: 224px;
float: right;
margin: 0 20px 0 0;
}
Nun verweise nochmal auf die kleine Korrektur am Anfang dieses Tutorials.
Um die Sache hier nun leichter erläutern zu können, werde ich das Raster für diesen Teil etwas ändern. Mein Beispiel-Raster besitzt von nun an absolute gleichmäßige Abstände. Damit reduzieren sich die äußeren 30 Pixel, zu 20 Pixeln. Wieso, warum und weshalb, wird sich um Laufe dieses Textes selbst erklären.
Wieso hab ich das Raster verändert? Um eben die gefloateten p-Blöcke zu ermöglichen. Mit dem alten Raster wär dies nicht nur mit einer CSS Klasse möglich, denn da hätte der Margin Wert des ersten Float-Elements 30 Pixel sein müssen, der der folgenden Elemente aber 20. Um exakt diese Situation zu vermeiden, braucht es absolut gleiche Spaltenabstände, auch bei den äußersten Spalten.
Beispiel Seiten
Zum Abschluss dieses Teils, gibt es zwei einfache Test-Seiten, eine für 800, eine für 1024 Pixel. Das Grundraster ist bei beiden gleich, beim 1024er, kommt nur eine weitere Spalte hinzu. Ich möchte damit zeigen, wie einfach es ist, solche Änderungen umzusetzen, wenn man auf ein striktes Raster baut. Hier ein Margin Wert, da eine Breitenangabe verändert und schon ist das Layout für die höhere Auflösung angepasst.
Im geplanten letzten Teil dieser Serie, werde ich versuchen, das Raster flexibel funktionieren zu lassen. Eine perfekte Lösung fehlt mir aber noch. Im Prinzip sieht man schon jetzt, dass ein Raster, primär auf ganz wenigen CSS Werten beruht, wieso soll dies also nicht auch mit relativen Werten funktionieren? Teil II. ist hiermit fertig.
8 Kommentare
Für diesen Eintrag wurden die Kommentare geschlossen.
Oho! Das ist besser geworden als ich es erwartet habe. Sehr gut analysiert, strukturiert und präsentiert. Ausserdem kommt das hier im Tutorial ja ausgesprochen Schlank und schlüssig daher. (Da frag ich mich schon fast, womit due deine 1600 Zeilen CSS gefüllt hast.)
Was das Tutorial besonders schön zeigt, ist, dass Raster nur von einer Handvoll-Zahlen definiert werden, und sich der Rest automatisch ergibt, was eine automatische Generierung zumindest theoretisch erlaubt.
Ich lasse gerade von einem meiner Studenten eine Hausarbeit über das Thema schreiben um danach einen Formalismus zu erstellen, der es erlaubt Layout-Raster für’s Web über ein Backend in einem CMS zu erstellen. Ich werd, dann nochmal Feedback geben, sobald es Fragen oder was implementiertes zu zeigen gibt.
Tausend Dank!
Nebenbei: von oben links aus zu Positionieren ist druch die eingeprägten Lesegwohnheiten auch nur sinnig.
(Da frag ich mich schon fast, womit due deine 1600 Zeilen CSS gefüllt hast.)
Das frag ich mich auch hehe, mein Fehler war, das alte Stylesheet umoptimiert zu übernehmen, so dass ich Styles von Version 3 mitschleppe. Wenn der Relaunch hier fertig ist, werd ich das Stylesheet in Ruhe komprimieren, nur momentan ist es mir noch etwas zu riskant spontan die alten Sachen zu löschen.
Besonders die Link-Styles sind teilweise 3-fach und 4-fach definiert. Ich gelobe Besserung. Gruß
He! Waren die “Skizzen zur Version 5″ vor zwei Tagen auch schon in dem Artikel, oder hab ich langsam Alzheimer?
Mist erwischt, mein Plan die Leser langsam aber sicher in den Wahnsinn zu treiben, ist dahin. Skizzen sind seit gestern drin. Gebe ein paar Gründe an, such dir einen aus: a) wollte en Eintrag optisch auflockern b) war zu faul die Bilder vor Samstag fertig zu machen, c) hab vergessen die Akkus der Digi-Cam zu laden. Ehrlich gesagt, war es eine Kombination aus diesen drei Sachen
Es gibt im IE eine ein-pixel Verschiebung einiger Elemente nach rechts (oder nach links?) - ja ja - ich weiss “tot dem IE” aber ich finde sowas trotzdem unschön. Wenn mich mein Auge nicht täuscht sehe ich diese Verschiebung auch auf diesen Seiten und nicht nur bei meinen Grid-Testseiten (IE6).
Weiss jemand wie der Bug genau heisst und ob man es umgehen kann?
Habs selbst gefunden. Es scheint der “IE 3 pixel gap” zu sein. Hier steht was es ist und wie man es weghacken kann. http://www.perun.net/2004/07/09/3-pixel-abstand/
Habt ihr wahrscheinlich nicht gesehen weil ihr MAC-user seid?
Für mich kommt die Grid Lösung auf Absatz-Basis damit leider nicht in Frage - ich wollte eigentlich eine Lösung ohne Hacks.
Mit Blick in die Zukunft bzw. auf IE7, sollte man Hacks wie die “3px-Gap” überdenken. Der Markanteil von IE6 sinkt erstaunlich schnell. Kommt natürlich immer auf das jeweile Projekt an, aber wer heute eine Seite gestalten möchte, die noch in 12 Monaten ohne große Mehrarbeit aktuell ist, der sollte tapfer IE6 weniger Beachtung schnenken. Was man an zusätzlichen Freiheiten gewinnt, überwiegt die alten Einschränkungen doch sehr.
“Mit Blick in die Zukunft bzw. auf IE7, sollte man Hacks wie die “3px-Gap” überdenken. Der Markanteil von IE6 sinkt erstaunlich schnell.”
Eine ebenso gewagte wie leider (!) falsche Aussage. Der Blick auf z.B. Webhits zeigt, daß wenigstens die Hälfte aller User immer noch mit IE6.x unterwegs ist. So ungern ich das auch selbst mache, wer Wert darauf legt, daß seine Seiten möglichst von allen Usern fehlerfrei gesehen werden, der MUSS den IE6 berücksichtigen - und dies auch noch auf absehbare Zeit. Traurich abba wahr
So hilft es dem Webseitenersteller nur, seine Seite auf Mac und Win mit allen gängigen Browsern zu testen und die IE-Bugs (auch der 7er hat garantiert welche…) zu berücksichtigen.