Webseiten-Layout wie bei Zeitungen - häh?

• Mo, 17. September 2007,
• 650 Wörter,
• 3 Kommentare,
• Tags:
• Raster,
• Zeitungen

In den letz­ten Wochen scheint auch wirk­lich jeder auf den grid-based web­de­sign-Zug auf­zu­sprin­gen. Wir bekom­men kom­plette CSS-Frameworks gelie­fert, deren Sinn eigent­lich jeder in Frage stellt, aber es liegt eben im Trend. Pas­send dazu kom­men auch erste Details zu CSS3 ans Tages­licht die u.a. auch in einem Golem-Artikel ange­ris­sen wor­den, unter der Über­schrift: “CSS3 Grid Lay­out: Webseiten-Layout wie bei Zei­tun­gen”

Lei­der über­sieht man bei die­sem im Ansatz durch­aus net­ten Ver­such ein win­zi­ges aber essen­ti­el­les Detail. Worin liegt der grund­le­gende Unter­schied zwi­schen Print und Non-Print? Das eine besitzt im End­pro­dukt immer das glei­che For­mat, das andere eben nicht. Beweis-Stück A:

Hier zu sehen ein Screen­shot eines Arti­kels bei A brief mes­sage. Sieht nicht nur auf den ers­ten Blick wun­der­schön illus­triert aus, funk­tio­niert aber nur mit sehr strik­ten Ein­schrän­kun­gen, was Text­länge betrifft und benö­tigt ein jeweils sepa­ra­tes Style­s­heet.

A brief mes­sage ist ein klei­nes neues Pro­jekt vom Design Direc­tor der nytimes.com und einem offen­sicht­lich Zelo­ten vom klas­si­schen Print-Design. A brief mes­sage ist der Ver­such mehr “print” ins Web zu brin­gen. Das Ergeb­nis sind kurze hübsch illus­trierte und indi­vi­du­elle mit CSS gestal­tete Arti­kel. Es gibt da nur einen klei­nen Haken, neben der Tat­sa­che, dass wirk­lich jeder Arti­kel ein sepa­ra­tes Style-Sheet braucht. Die Text-Länge die­ser Arti­kel ist sehr begrenzt. Wieso? Beweis-Stück B:

Arti­kel der Apple-Website. Funk­tio­niert ähnlich wie das erste Bei­spiel. Texte sind hier bis auf das letzte Pixel bemaßt, um in der Höhe über­haupt voll­stän­dig les­bar zu sein.

Hier ein an sich sehr hüb­scher Arti­kel der Apple-Seite. Eigent­lich wun­der­schön umge­setzt oder nicht? Rot im Bild mar­kiert der eigent­li­che “wie bei Zeitungen”-Text. Die Höhe die­ser roten Flä­che ent­spricht bis aus letzte Pixel, der Höhe eines maxi­mier­ten Broser-Fensters bei einer ver­ti­ka­len Höhe von 1024 Pixeln. Wehe man benutzt hier eine klei­nere Auf­lö­sung, dann scrollt man sich den Fin­ger ab, beim Ver­such dem Inhalt des Tex­tes zu fol­gen.

CSS3

Was CSS3 nun ver­sucht läuft gezielt dar­auf hin­aus, dass man diese tol­len neuen Funk­tio­nen wie­der nur mit üblen Ein­schrän­kun­gen nut­zen kann. Wer seine elek­tro­ni­sche Zei­tung lay­ou­ten möchte, tut dies wie im Print, für ein ganz strik­tes For­mat. Alles was die­sem nicht ent­spricht, funk­tio­niert dann so toll, wie die­ser Apple-Artikel.

Der Ver­such Inhalte so wie im Print zu prä­sen­tie­ren, wird nie­mals makel­los funk­tio­nie­ren. Inhalte im Web ver­än­dern sich viel zu häu­fig, um wie ein­fa­che Zeitungs-Inhalte behan­delt zu wer­den. CSS hat jetzt schon echte Pro­bleme mit der Ver­ti­ka­len und diese ist ein Grund­pfei­ler für jedes funk­tio­nie­rende Grund­ras­ter. Wann ist die Spalte zu Ende? Was muss der Text in die nächste umbre­chen? Zuge­ge­ben die Idee ist ver­lo­ckend, aber sie bringt mehr Pro­bleme mit sich, als sie löst. Es ist wirk­lich furcht­bar die­sen Text, der Apple-Seite, in einem dafür zu klei­nem Fens­ter zu lesen. Nicht jeder hat ein 30-Zoll-Display, ein auf­lö­sungs­un­ab­hän­gi­ges OS und die wenigs­tens Nut­zer maxi­mie­ren ihr Browser-Fenster.

Ein wei­te­rer Neben­ef­fekt wird der immer auf­blä­hen­dere Quell­code. Wer diese bei­den Bei­spiele mal näher betrach­tet ent­deckt Quell-Code, der deut­lich ver­schach­tel­ter ist, als üblich.

Um dem Gan­zen sicher­lich ver­früh­ten Thema etwas Posi­ti­ves abzu­ge­win­nen: Lay­out im Web könnte dadurch noch kom­pli­zier­ter (zeit­auf­wen­di­ger) wer­den. Man braucht dann sicher­lich zukünf­tig drei sepa­rate Style­s­heets: das klas­si­sche Jet­zige für alle Auf­lö­sun­gen, eins kom­plett gelay­ou­tet für eine anvi­sierte große Auf­lö­sung, sowie eins für mobile Geräte im Stil des iPhone. Beson­ders die jeweils auf­wen­di­ge­ren Ver­sio­nen, wer­den wie schon jetzt bei A brief mes­sage, ein indi­vi­du­el­les Style­s­heet benö­ti­gen. Über mehr Arbeit sollte man sich eigent­lich nicht beschwe­ren, sofern sie bezahlt wird.

Ich möchte gern mal einen lan­gen Netz-Artikel in die­sem Stil sehen, mit auf­wen­di­gen Bil­dern wech­seln­der Größe. Dann braucht es für jeden ein­zel­nen Artike jeman­den der ihn wie im Print “setzt”. Vor­bei sind Zei­ten, wo man seine Daten ins CMS ein­gibt und sorg­los ver­öf­fent­licht. Was sich hier anbahnt, ist ein Rück­schritt in punkto Kom­fort beim Ver­öf­fent­li­chen neuer Netz-Inhalte. CSS-Templates wer­den sicher­lich ein Thema.

Zum gleichen Thema

• Niveau runter, Klicks raufFundstücke

• falsch, falscher, am falschestenFundstücke

• Score this! Die Fabel vom Bewerten von SpielenZeugs

• WinterschlafFundstücke

• "Isn't that gorgeous?" Nö.Fundstücke

• unter den Grauen ist der Hellgraue KönigFundstücke

• Twitter-Nachrichten schon jetzt das Oxymoron 2008Fundstücke