Stolpersteine bei Grundrastern für Webseiten

Vor knapp zwei Wochen gab es im Büro neue Hardware. Darunter ein iMac als neuer Rechenknecht für so ziemlich alles. Eins muss man Apple ob als Hasser oder Fan eingestehen, sie bauen makellose Hardware was die Rechner betrifft – MightyMouse und die neue Tastatur dagegen sind eher mau. Mies ist auch, dass man sich an diese Qualität viel zu schnell gewöhnt und der eigene Dell XPS irgendwie weniger beeindruckt. Besonders die Display-Frage ist kritisch.

Die Apple-Displays sind schick und groß, sehr groß, fast schon zu groß. Auf einem solchen Display betrachtet, schaut die eigene Website dann doch anders aus. Text bleibt zwar weiterhin lesbar, aber bei 96 DPI erscheint die Text-Spalte doch sehr schmal. Die Display-Frage ist und bleibt spannend, besonders mit Blick auf den sicherlich auch bei uns irgendwann kommenden Boom für kleine Displays im Stil des iPhone. In Japan werden heute schon mehr Webseiten auf Handy-Displays betrachtet, als auf normalen PC-Displays. Jede Version wird ihr separates Stylesheet brauchen. Für diese Seite bin ich da sehr zuversichtlich, da primär ja nur Text zu gestalten ist. Fakt ist dennoch, dass die aktuelle 800er Version irgendwie nicht Ganzes und nichts Halbes mehr ist. Es gibt immer weniger Argumente die dafür sprechen. Drum fangen die Überlegungen an, wie das Layout anzupassen ist.

So schön und so gehyped rasterbasierte Web-Gestaltungen mittlerweile geworden sind, so unvollständig sind die vielen Lobeshymnen. An dieser Stelle möchte ich ein paar Worte zu den Stolpersteinen für Grund-Raster im Webdesign schreiben. Als ich damals überhaupt mit Grafik-Spielerein am Rechner angefangen habe, da war die Hochzeit der Mods für Computer-Spiele. Eine Grundregel von damals, welche heute immer noch gilt, stammt aus alten Urzeiten der Rechnung mit Bits und Bytes: Alles muss ein Multiplikator von 2 sein. Egal ob Textur, oder Polygon, CPUs lieben Zahlen, die sich durch Zwei dividieren lassen. Die Zahl Zwei ist ein Grundpfeiler geworden, der immer wieder zu beachten war.

Ähnlich geht es bei Grundrastern zu. Wer sich einmal damit einlässt, hängt schnell in der Zahlenfalle fest. Zum Beispiel haben meine Bilder in den Einträgen hier, seit Monaten immer eine Höhe, die sich durch die Zeilenhöhe der Schrift dividieren lässt. Die Breite der Bilder lehnt sich ebenfalls an die Spaltenbreite an und alles lässt sich ebenfalls durch zwei dividieren. Zwei. Es gibt momentan zwei Bildergrößen.

Zwei Probleme zum Anfang. Wenn ich mein Raster erweitern möchte, dann wird mein Text plötzlich breiter als meine bisher direkt darauf bemessenen Bilder. Zwar ist mein CSS und der Quellcode der Einträge so angelegt, dass ich die Bilder mit CSS neu bemaßen könnte, aber eine Skalierung ist nur im ganz kleinen Maße ohne Verlust der Qualität möglich. Raster binden nicht nur die Inhalte fest, sondern auch den Nutzer, wenn es darum geht Änderungen am Raster vorzunehmen. Zwar gibt es immer Nischen-Lösungen, die aber alle viel zu unflexibel sind. Ich habe damals schon überlegt, wie der Quellcode aussehen muss, um möglichst flexbibel bei Änderungen zu sein. Hier kann ich nur empfehlen Bilder im Code nicht zu bemaßen, schön generische CSS-Klassen zu verteilen und die Reihenfolge von Text, Bild und Bild-Unterschrift penibel zu pflegen. Das Bild oben zeigt meine bisher beste Lösung zum Problem. Erstaunlich, wieviel mal doch mit normalen Floats noch so erreichen.

Wer Bilder und Text im Raster balancieren möchte, muss genau überlegen, wie eventuelle zukünftige Änderungen aussehen sollen. Sollte ich die Spaltenzahl hier erhöhen, dann kommt plötzlich auch eine neue dritte Bilderbreite hinzu. Plötzlich gilt es drei verschiedene Bildformate richtig zu platzieren und bitte alles schön sauber und ohne viel Aufwand, oder gar Änderungen im Code der separaten Einträge.

So einfach und simpel derartige Gestaltungen wirken mögen, soviel mehr Arbeit muss in die grundsätzliche Planung vorher laufen. Einfach drauf los und hoffen das alles irgendwie passt ist hier nicht. Fehler kann man auch nicht mit irgendwelchen Grafiken verstecken. Die Sorgfalt lohnt sich jedoch, denn sofern die verschiedenen Browser mitspielen, ist eine saubere Grundstruktur dann wirklich flexibel. Inhalte im Web varrieren stark und alle wollen korrekt plaziert werden.