Stolpersteine bei Grundrastern für Webseiten

• Do, 25. Oktober 2007,
• 668 Wörter,
• 0 Kommentare,
• Tags:
• Apple,
• Raster,
• Tutorial

Vor knapp zwei Wochen gab es im Büro neue Hard­ware. Dar­un­ter ein iMac als neuer Rechen­knecht für so ziem­lich alles. Eins muss man Apple ob als Has­ser oder Fan ein­ge­ste­hen, sie bauen makel­lose Hard­ware was die Rech­ner betrifft - Migh­ty­Mouse und die neue Tas­ta­tur dage­gen sind eher mau. Mies ist auch, dass man sich an diese Qua­li­tät viel zu schnell gewöhnt und der eigene Dell XPS irgend­wie weni­ger beein­druckt. Beson­ders die Display-Frage ist kri­tisch.

Die Apple-Displays sind schick und groß, sehr groß, fast schon zu groß. Auf einem sol­chen Dis­play betrach­tet, schaut die eigene Web­site dann doch anders aus. Text bleibt zwar wei­ter­hin les­bar, aber bei 96 DPI erscheint die Text-Spalte doch sehr schmal. Die Display-Frage ist und bleibt span­nend, beson­ders mit Blick auf den sicher­lich auch bei uns irgend­wann kom­men­den Boom für kleine Dis­plays im Stil des iPhone. In Japan wer­den heute schon mehr Web­sei­ten auf Handy-Displays betrach­tet, als auf nor­ma­len PC-Displays. Jede Ver­sion wird ihr sepa­ra­tes Style­s­heet brau­chen. Für diese Seite bin ich da sehr zuver­sicht­lich, da pri­mär ja nur Text zu gestal­ten ist. Fakt ist den­noch, dass die aktu­elle 800er Ver­sion irgend­wie nicht Gan­zes und nichts Hal­bes mehr ist. Es gibt immer weni­ger Argu­mente die dafür spre­chen. Drum fan­gen die Über­le­gun­gen an, wie das Lay­out anzu­pas­sen ist.

So schön und so gehy­ped ras­ter­ba­sierte Web-Gestaltungen mitt­ler­weile gewor­den sind, so unvoll­stän­dig sind die vie­len Lobes­hym­nen. An die­ser Stelle möchte ich ein paar Worte zu den Stol­per­stei­nen für Grund-Raster im Web­de­sign schrei­ben. Als ich damals über­haupt mit Grafik-Spielerein am Rech­ner ange­fan­gen habe, da war die Hoch­zeit der Mods für Computer-Spiele. Eine Grund­re­gel von damals, wel­che heute immer noch gilt, stammt aus alten Urzei­ten der Rech­nung mit Bits und Bytes: Alles muss ein Mul­ti­pli­ka­tor von 2 sein. Egal ob Tex­tur, oder Poly­gon, CPUs lie­ben Zah­len, die sich durch Zwei divi­die­ren las­sen. Die Zahl Zwei ist ein Grund­pfei­ler gewor­den, der immer wie­der zu beach­ten war.

Ähnlich geht es bei Grund­ras­tern zu. Wer sich ein­mal damit ein­lässt, hängt schnell in der Zah­len­falle fest. Zum Bei­spiel haben meine Bil­der in den Ein­trä­gen hier, seit Mona­ten immer eine Höhe, die sich durch die Zei­len­höhe der Schrift divi­die­ren lässt. Die Breite der Bil­der lehnt sich eben­falls an die Spal­ten­breite an und alles lässt sich eben­falls durch zwei divi­die­ren. Zwei. Es gibt momen­tan zwei Bil­der­grö­ßen.

Zwei Pro­bleme zum Anfang. Wenn ich mein Ras­ter erwei­tern möchte, dann wird mein Text plötz­lich brei­ter als meine bis­her direkt dar­auf bemes­se­nen Bil­der. Zwar ist mein CSS und der Quell­code der Ein­träge so ange­legt, dass ich die Bil­der mit CSS neu bema­ßen könnte, aber eine Ska­lie­rung ist nur im ganz klei­nen Maße ohne Ver­lust der Qua­li­tät mög­lich. Ras­ter bin­den nicht nur die Inhalte fest, son­dern auch den Nut­zer, wenn es darum geht Ände­run­gen am Ras­ter vor­zu­neh­men. Zwar gibt es immer Nischen-Lösungen, die aber alle viel zu unfle­xi­bel sind. Ich habe damals schon über­legt, wie der Quell­code aus­se­hen muss, um mög­lichst flex­bi­bel bei Ände­run­gen zu sein. Hier kann ich nur emp­feh­len Bil­der im Code nicht zu bema­ßen, schön gene­ri­sche CSS-Klassen zu ver­tei­len und die Rei­hen­folge von Text, Bild und Bild-Unterschrift peni­bel zu pfle­gen. Das Bild oben zeigt meine bis­her beste Lösung zum Pro­blem. Erstaun­lich, wie­viel mal doch mit nor­ma­len Floats noch so errei­chen.

Wer Bil­der und Text im Ras­ter balan­cie­ren möchte, muss genau über­le­gen, wie even­tu­elle zukünf­tige Ände­run­gen aus­se­hen sol­len. Sollte ich die Spal­ten­zahl hier erhö­hen, dann kommt plötz­lich auch eine neue dritte Bil­der­breite hinzu. Plötz­lich gilt es drei ver­schie­dene Bild­for­mate rich­tig zu plat­zie­ren und bitte alles schön sau­ber und ohne viel Auf­wand, oder gar Ände­run­gen im Code der sepa­ra­ten Ein­träge.

So ein­fach und sim­pel der­ar­tige Gestal­tun­gen wir­ken mögen, soviel mehr Arbeit muss in die grund­sätz­li­che Pla­nung vor­her lau­fen. Ein­fach drauf los und hof­fen das alles irgend­wie passt ist hier nicht. Feh­ler kann man auch nicht mit irgend­wel­chen Gra­fi­ken ver­ste­cken. Die Sorg­falt lohnt sich jedoch, denn sofern die ver­schie­de­nen Brow­ser mit­spie­len, ist eine sau­bere Grund­struk­tur dann wirk­lich fle­xi­bel. Inhalte im Web var­rie­ren stark und alle wol­len kor­rekt pla­ziert wer­den.

Zum gleichen Thema

• 1024.3 - Chaos in EchtzeitFundstücke

• Cool ReadingsFundstücke

• ein paar inhaltliche TeaserFundstücke

• Balken-Diagramme im Web-DesignCSS

• iPod ShuffleFundstücke

• iSteamFundstücke

• Ri-di-seinCSS