Tutorial: Gestaltungsraster im Webdesign
Als ich mir damals Gedanken machte, wie die neue Version dieser Seite werden soll, war klar, dass ich ein festes Raster als Grundlage nutzen werde. Mich beeindruckt immer noch, wie viel Ruhe und Ordnung solche Seiten besitzen. Kein Element springt umher und raubt sich einfach den Platz der vorhanden ist. Es gab sogar schon erste Tutorials, wie man dieses Gestaltungs-Prinzip in HMTL Seiten umsetzen kann.
Mein Hoffnung war, dass mein CSS Wissen ausreichend war, um diese Geschichte funktionieren zu lassen. Wenn ich nun jetzt diesen Text schreibe, merke ich, dass Vieles gelungen ist, aber umso mehr, wieviele Fehler ich gemacht habe. Dieses Tutorial soll nun zum einen zeigen was ich wie gemacht habe und wo man eigentlich einiges anders und besser machen kann. In diesem ersten Teil versuche ich zu zeigen, wie die Werte des hier angewandten Grundrasters zustande gekommen sind.
die Theorie
Fest stand, dass ich für’s Erste bei einem Layout mit fixer Breite bleiben werde. Selbst heute noch, finde ich zu viele kleine Problemchen, die den Umstieg auf ein flexibles Layout verhindern, aber keine Bange, ich arbeite dran und die ersten Schritte sind längst gemacht. Mein Standartwert für Seiten mit fixer Breite sind 760 Pixel. Für diese Gestaltung hier, verwende ich jedoch keine üblichen zentrierten Schlagschatten-Hintergrund-Grafik-Orgien, die das Auge des Besuchers penetrieren. Deshalb nahm ich zu den üblichen 760 Pixel, 12 Pixel hinzu, die sonst üblich für 6 Pixel (pro Seite) Schlagschatten/Grafiken reserviert sind. Am Ende standen die 772 Pixel als Endwert fest. Mein äußerstes DIV, dieser Seite, ist somit 772 Pixel breit. Dieses DIV wird wiederum nicht über die komplette Breite gefüllt. Ich bin ein Freund von viel zu viel Weißraum und darum besitzt dieses DIV nochmals 30 Pixel (je Seite) Platz nach innen (Padding), so dass ich bei einer zu füllenden Breite von 712 Pixel bin.
Spalten 1×1
Grundsätzlich muss man wissen, wie viele Spalten man später nutzen möchte. Spalten des Grundrasters, sind nicht zu verwechseln mit Bezeichnungen wie „3-spaltiges HTML Layout“. Der Unterschied ist folgender. In einem Raster sind die Spalten in der Regel alle gleich groß (breit) und teilen eine Seite vertikal ein. Für Grundsätzlichen zum diesem Thema empfehle ich den schon oben verlinkten Artikel von Mark Boulton. Um es einfacher zu machen werde ich für diesen Text nun strikt nach Raster-Spalte und Layout-Spalte unterscheiden.
Wenn ich nun von Raster-Spalten schreibe, dann meine ich damit „Schienen“ oder ein Rahmen, auf dem später die Inhalte (Layout-Spalten) platziert werden. Dies erklärt auch, wieso wir später nicht einfach simple DIVs als eine Spalte definieren können. Diese Lösung funktioniert nur für einfachste Bedingungen, doch dazu an andere Stelle mehr.
Es geht immer noch darum, wie aus den 712 Pixel Raster-Spalten werden. Da meine Seite hier, primär nur aus einzelnen Eintragsseiten besteht, liegt auf der Gestaltung dieser der Fokus. Was verwende ich? Was brauche ich? Was möchte ich? Ganz konkret war mein Beispiel extrem simpel. Ich hatte vom alten Design, eine feste Breite für meine Haupt-Layout-Spalte, also wirklich der Bereich wo später Texte und Bilder stehen. Ich war auf 468 Pixel angewiesen. Diese 468 Pixel würden auch diesmal wichtig sein. Ich hab nun zwei Werte, 712 Pixel und 468 Pixel, mit diesen Werten darf ich nun weiter spielen.
ein wenig Mathematik
Wenn man sich mein altes Layout anschaut, wird man schnell sehen, dass ich eine optische zweite Layout-Spalte hatte und wieder habe. Diese zwei Layout-Spalten müssen nun auf 712 Pixeln Platz finden und die größere der beiden Layout-Spalten besitzt eine Breite von 468 Pixeln. Diese Fakten waren nicht zu ändern, der Rest ist einfache Mathematik.
712 Pixel - 468 Pixel = 244 Pixel
Diese 244 Pixel müssen nun meine Seitenspalte und die inneren Abstände beinhalten. Ich entschied mich recht schnell für ein Drei-Spalten-Grundraster. Man soll die Dinge einfach angehen und für die erste Anwendung, reichen drei Raster-Spalten mehr als aus. Daraus ergibt sich, dass meine 468 Pixel, zwei Raster-Spalten samt Spalten-Zwischenraum beinhalten müssen.
468 : 2 = 234
Nun kommt es zum Ermitteln der Größe des Spalten-Zwischenraums, dafür brauche ich den Wert von 244 Pixeln der Seitenspalten.
244 - 234 = 10
10 Pixel sind somit jeweils eine Hälfte des Spalten-Zwischenraums. Diese 10 Pixel gehen von je einer Hälfte der 468 Pixel ab, dann hab ich die finale Breite meiner Spalten. Wenn ich nun keinen Fehler gemacht habe sollten drei Spalten, samt zwei Zwischenräumen 712 Pixel ergeben. Dami habe ich alle wichtigen Größen und kann beginnen, alles umzusetzen.
224 + 20 + 224 + 20 + 224 = 712 Perfekt.
höhere Mathematik
Führen wir die Geschichte etwas weiter. Wenn ich morgen mein Layout für eine 1024er Auflösung umbauen möchte, kann ich dann problemlos einfach eine weitere Spalte hinzurechnen? Hinzu kämen 244 Pixel, also eine weitere Spalte samt Zwischenraum:
712 + 244 = 956
Und siehe da, eine weitere Spalte auf dem selben Raster, passt perfekt in die nächst größere Monitor-Auflösung. Ja, dies ist kein Zufall und ja, ich fasse diese Option schon seit eine Weile in Betracht. Dank CSS wär die Umstellung auf 1024 Pixel, eine Änderung von einer Hand voll Ziffern im CSS Code, aber dazu im zweiten Teil mehr.
4 Spalten?
Eine letzte kleine Rechnung noch um zu zeigen, wieso ich bei 3 statt 4 Raster-Spalten, für die kleinere Auflösung geblieben bin. Wie sähe es aus, 4 Spalten auf die 712 Pixel verteilen zu wollen? Wir bräuchten 4 Spalten samt 3 Zwischenräumen.
712 / 4 = 178
Um 3 Zwischenräume zu erhalten, muss ich irgendwas durch 3-teilbares von den 178 Pixel abziehen. Ich nehme 12 Pixel und rechne gleich die Breite der Zwischenräume aus:
178 - 12 = 166 12 x 4 / 3 = 16
Wieso ich dies schnell verworfen habe? Nun ja, wer solch ein Raster nutzt, der hat sicher auch vor, irgendwo auch einmal nur eine Spalte zu nutzen. Meine Schriftgrößen waren von Beginn an festgelegt, was zum Ergebnis hat, dass ein 166 Pixel breiter Textblock, viel zu schwer zu lesen ist. Was ich zeigen möchte ist folgendes. Ein Grundraster sollte nicht nur zum Selbstzweck existieren, sondern Sinn machen. 4 Spalten auf 712 Pixel tun dies, für meinen Fall nicht. Bei anderen Seiten, die 10 Pixel große Schriften benutzen, allerdings vielleicht doch. So ein Raster ist ein Gestaltungselement von vielen, und mein Beispiel ist wirklich nur mein Beispiel, welches sich nicht auf jede Seite übertragen lässt.
Im zweiten Teil dieser kleinen Serie, geht es um die Umsetzung, der hier ermittelten Werte, mit Hilfe von CSS. Dafür werde ich noch etwas Zeit brauchen, da ich immer noch nicht sicher bin, wieviel grafischen Schnick-Schnack ich, für den CSS Reboot am ersten Mai, auf die jetzige leere (saubere) Gestaltung klatschen muss, um nicht im Meer der über 1000 angemeldeten, mit Schlagschatten, Grün und Dunkelgrau überfrachteten Seiten, unterzugehen.
3 Kommentare
Für diesen Eintrag wurden die Kommentare geschlossen.
global $hemingway ?>Ehrlich, aufrichtig und begeistert: danke!
So! Genug Lob. Fragen.
Mit „fester Breite“ meinst Du eine Breitenangabe in Pixeln statt in em oder ex, oder?
Völlig wertfrei: welche Argumente gibt es gegen „Schlagschatten-Hintergrund-Grafiken“ ?
Hast Du ausser dem Artikel von Mark Boulton andere Quellen für die Entwicklung von Layout-Rastern?
Ich versuche mal die Konzepte zusammen zufassen, nur damit ich weiß, dass ich das richtig verstanden habe:
– Es gibt sowas wie einen „Satzspiegel“: die Fläche auf der Du dich entschieden hast etwas darszustellen.– Der Satzspiegel hat eine fixe Breite, wie immer die auch zustande kommt undeine variable Höhe.– Der Satzspiegel enthält eine Anzahl identlisch breiter Spalten.– Eine Spalte hat eine Breite.– Alle Spalten haben voneinander einen identischen Abstand.
Ja. Bis jetzt bin ich noch nicht soweit, das ganze wirklich flexibel umzusetzen.
Völlig subjektiv. Ich hab mich dran satt gesehen, ein Effekt der halt erbarmungslos benutzt wird.
Ich hab nicht weiter nach Links zum Thema gesucht. Es gibt sicherlich ne Menge, eine gute Idee für die weiteren Teile, das merke ich mir mal vor.
Ja es ist in vielerlei Hinsicht ein Satzspiegel, der die Fläche in der Horizontalen gliedert, da eine feste Höhe halt nicht gegeben ist.