Tutorial: Gestaltungsraster im Webdesign

• Di, 11. April 2006,
• 1164 Wörter,
• 3 Kommentare,
• Tags:
• CSS,
• Raster,
• Tutorial,
• Website

Als ich mir damals Gedan­ken machte, wie die neue Ver­sion die­ser Seite wer­den soll, war klar, dass ich ein fes­tes Ras­ter als Grund­lage nut­zen werde. Mich beein­druckt immer noch, wie viel Ruhe und Ord­nung sol­che Sei­ten besit­zen. Kein Ele­ment springt umher und raubt sich ein­fach den Platz der vor­han­den ist. Es gab sogar schon erste Tuto­ri­als, wie man die­ses Gestaltungs-Prinzip in HMTL Sei­ten umset­zen kann.

Mein Hoff­nung war, dass mein CSS Wis­sen aus­rei­chend war, um diese Geschichte funk­tio­nie­ren zu las­sen. Wenn ich nun jetzt die­sen Text schreibe, merke ich, dass Vie­les gelun­gen ist, aber umso mehr, wie­viele Feh­ler ich gemacht habe. Die­ses Tuto­rial soll nun zum einen zei­gen was ich wie gemacht habe und wo man eigent­lich eini­ges anders und bes­ser machen kann. In die­sem ers­ten Teil ver­su­che ich zu zei­gen, wie die Werte des hier ange­wand­ten Grund­ras­ters zustande gekom­men sind.

die Theo­rie

Fest stand, dass ich für’s Erste bei einem Lay­out mit fixer Breite blei­ben werde. Selbst heute noch, finde ich zu viele kleine Pro­blem­chen, die den Umstieg auf ein fle­xi­bles Lay­out ver­hin­dern, aber keine Bange, ich arbeite dran und die ers­ten Schritte sind längst gemacht. Mein Stan­dart­wert für Sei­ten mit fixer Breite sind 760 Pixel. Für diese Gestal­tung hier, ver­wende ich jedoch keine übli­chen zen­trier­ten Schlagschatten-Hintergrund-Grafik-Orgien, die das Auge des Besu­chers pene­trie­ren. Des­halb nahm ich zu den übli­chen 760 Pixel, 12 Pixel hinzu, die sonst üblich für 6 Pixel (pro Seite) Schlagschatten/Grafiken reser­viert sind. Am Ende stan­den die 772 Pixel als End­wert fest. Mein äußers­tes DIV, die­ser Seite, ist somit 772 Pixel breit. Die­ses DIV wird wie­derum nicht über die kom­plette Breite gefüllt. Ich bin ein Freund von viel zu viel Weiß­raum und darum besitzt die­ses DIV noch­mals 30 Pixel (je Seite) Platz nach innen (Pad­ding), so dass ich bei einer zu fül­len­den Breite von 712 Pixel bin.

Spal­ten 1x1

Grund­sätz­lich muss man wis­sen, wie viele Spal­ten man spä­ter nut­zen möchte. Spal­ten des Grund­ras­ters, sind nicht zu ver­wech­seln mit Bezeich­nun­gen wie “3-spaltiges HTML Lay­out”. Der Unter­schied ist fol­gen­der. In einem Ras­ter sind die Spal­ten in der Regel alle gleich groß (breit) und tei­len eine Seite ver­ti­kal ein. Für Grund­sätz­li­chen zum die­sem Thema emp­fehle ich den schon oben ver­link­ten Arti­kel von Mark Boul­ton. Um es ein­fa­cher zu machen werde ich für die­sen Text nun strikt nach Raster-Spalte und Layout-Spalte unter­schei­den.

Wenn ich nun von Raster-Spalten schreibe, dann meine ich damit “Schie­nen” oder ein Rah­men, auf dem spä­ter die Inhalte (Layout-Spalten) plat­ziert wer­den. Dies erklärt auch, wieso wir spä­ter nicht ein­fach sim­ple DIVs als eine Spalte defi­nie­ren kön­nen. Diese Lösung funk­tio­niert nur für ein­fachste Bedin­gun­gen, doch dazu an andere Stelle mehr.

Es geht immer noch darum, wie aus den 712 Pixel Raster-Spalten wer­den. Da meine Seite hier, pri­mär nur aus ein­zel­nen Ein­trags­sei­ten besteht, liegt auf der Gestal­tung die­ser der Fokus. Was ver­wende ich? Was brau­che ich? Was möchte ich? Ganz kon­kret war mein Bei­spiel extrem sim­pel. Ich hatte vom alten Design, eine feste Breite für meine Haupt-Layout-Spalte, also wirk­lich der Bereich wo spä­ter Texte und Bil­der ste­hen. Ich war auf 468 Pixel ange­wie­sen. Diese 468 Pixel wür­den auch dies­mal wich­tig sein. Ich hab nun zwei Werte, 712 Pixel und 468 Pixel, mit die­sen Wer­ten darf ich nun wei­ter spie­len.

ein wenig Mathe­ma­tik

Wenn man sich mein altes Lay­out anschaut, wird man schnell sehen, dass ich eine opti­sche zweite Layout-Spalte hatte und wie­der habe. Diese zwei Layout-Spalten müs­sen nun auf 712 Pixeln Platz fin­den und die grö­ßere der bei­den Layout-Spalten besitzt eine Breite von 468 Pixeln. Diese Fak­ten waren nicht zu ändern, der Rest ist ein­fa­che Mathe­ma­tik.

   712 Pixel - 468 Pixel = 244 Pixel

712 Pixel auf­ge­teilt auf 3 Spal­ten

Diese 244 Pixel müs­sen nun meine Sei­ten­spalte und die inne­ren Abstände beinhal­ten. Ich ent­schied mich recht schnell für ein Drei-Spalten-Grundraster. Man soll die Dinge ein­fach ange­hen und für die erste Anwen­dung, rei­chen drei Raster-Spalten mehr als aus. Dar­aus ergibt sich, dass meine 468 Pixel, zwei Raster-Spalten samt Spalten-Zwischenraum beinhal­ten müs­sen.

   468 : 2 = 234

Nun kommt es zum Ermit­teln der Größe des Spalten-Zwischenraums, dafür brau­che ich den Wert von 244 Pixeln der Sei­ten­spal­ten.

   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 mei­ner Spal­ten. Wenn ich nun kei­nen Feh­ler gemacht habe soll­ten drei Spal­ten, samt zwei Zwi­schen­räu­men 712 Pixel erge­ben. Dami habe ich alle wich­ti­gen Grö­ßen und kann begin­nen, alles umzu­set­zen.

   224 + 20 + 224 + 20 + 224 = 712 Perfekt.

höhere Mathe­ma­tik

Füh­ren wir die Geschichte etwas wei­ter. Wenn ich mor­gen mein Lay­out für eine 1024er Auf­lö­sung umbauen möchte, kann ich dann pro­blem­los ein­fach eine wei­tere Spalte hin­zu­rech­nen? Hinzu kämen 244 Pixel, also eine wei­tere Spalte samt Zwi­schen­raum:

   712 + 244 = 956

Und siehe da, eine wei­tere Spalte auf dem sel­ben Ras­ter, passt per­fekt 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 Umstel­lung auf 1024 Pixel, eine Ände­rung von einer Hand voll Zif­fern im CSS Code, aber dazu im zwei­ten Teil mehr.

4 Spal­ten?

Eine letzte kleine Rech­nung noch um zu zei­gen, wieso ich bei 3 statt 4 Raster-Spalten, für die klei­nere Auf­lö­sung geblie­ben bin. Wie sähe es aus, 4 Spal­ten auf die 712 Pixel ver­tei­len zu wol­len? Wir bräuch­ten 4 Spal­ten samt 3 Zwi­schen­räu­men.

   712 / 4 = 178

Um 3 Zwi­schen­räume zu erhal­ten, muss ich irgend­was durch 3-teilbares von den 178 Pixel abzie­hen. Ich nehme 12 Pixel und rechne gleich die Breite der Zwi­schen­räume aus:

   178 - 12 = 166
12 x 4 / 3 = 16

712 Pixel auf­ge­teilt auf 4 Spal­ten

Wieso ich dies schnell ver­wor­fen habe? Nun ja, wer solch ein Ras­ter nutzt, der hat sicher auch vor, irgendwo auch ein­mal nur eine Spalte zu nut­zen. Meine Schrift­grö­ßen waren von Beginn an fest­ge­legt, was zum Ergeb­nis hat, dass ein 166 Pixel brei­ter Text­block, viel zu schwer zu lesen ist. Was ich zei­gen möchte ist fol­gen­des. Ein Grund­ras­ter sollte nicht nur zum Selbst­zweck exis­tie­ren, son­dern Sinn machen. 4 Spal­ten auf 712 Pixel tun dies, für mei­nen Fall nicht. Bei ande­ren Sei­ten, die 10 Pixel große Schrif­ten benut­zen, aller­dings viel­leicht doch. So ein Ras­ter ist ein Gestal­tungs­ele­ment von vie­len, und mein Bei­spiel ist wirk­lich nur mein Bei­spiel, wel­ches sich nicht auf jede Seite über­tra­gen lässt.

Im zwei­ten Teil die­ser klei­nen Serie, geht es um die Umset­zung, der hier ermit­tel­ten Werte, mit Hilfe von CSS. Dafür werde ich noch etwas Zeit brau­chen, da ich immer noch nicht sicher bin, wie­viel gra­fi­schen Schnick-Schnack ich, für den CSS Reboot am ers­ten Mai, auf die jet­zige leere (sau­bere) Gestal­tung klat­schen muss, um nicht im Meer der über 1000 ange­mel­de­ten, mit Schlag­schat­ten, Grün und Dun­kel­grau über­frach­te­ten Sei­ten, unter­zu­ge­hen.

Zum gleichen Thema

• Randnotiz - Was von Bühne frei#1 übrig bliebRandnotizen

• Balken-Diagramme im Web-Design 2.0CSS

• noch im WinterschlafFundstücke

• eingelaufenOff-Topic

• Webdesign ist der kleinste gemeinsame NennerCSS

• Dokumentation zur neuen Gestaltung - Konzept und RasterWeb Design

• Ri-di-seinCSS