Dokumentation zur neuen Gestaltung - Konzept und Raster

• Fr, 08. Februar 2008,
• 1379 Wörter,
• 3 Kommentare,
• Tags:
• CSS,
• Raster,
• Website

Das schwie­rige an neuen Ein­trä­gen mitt­ler­weile? Die opti­male Länge zu fin­den. Auch die­ser Text könnte ohne wei­te­res die 3000er Work-Marke spren­gen, aber gestal­te­risch wie inhalt­lich, soll sich hier was ändern. Gleich noch ein klei­ner Haken vor­weg. Die­ser Text beinhal­tet zwei Dia­gramme die im RSS-Reader zwar dar­ge­stellt wer­den, denen dort jedoch das CSS fehlt, um sowohl optisch als auch inhalt­lich zu funk­tio­nie­ren. Die Logik hin­ter die­ser Lösung folgt im wei­te­ren Ver­lauf die­ses Ein­trags. Wer den Text voll­stän­dig erschlie­ßen möchte, muss wohl oder übel die Seite besu­chen.

In Zei­ten wo jeder Mensch mit etwas Frei­zeit, sich krea­tiv im Inter­net ver­er­wi­gen kann, ist es schwie­ri­ger gewor­den dem Hand­werk wei­ter­hin viel Wert zu sug­ge­rie­ren. Selbst der blu­tigste Anfän­ger darf sich heute im Web eta­blie­ren. Das ist die Essenz vom “Web 2.0″-Konzept. Jeder darf daran teil­ha­ben. Was eins einer klei­nen tech­nisch ver­sier­ten Gruppe vor­be­hal­ten blieb, steht nun wirk­lich auch dem letz­ten Anwen­der offen, was dem Con­tent mehr Bedeu­tung ver­schafft und somit lang­fris­tig gut ist. Die eigent­li­che Ebene der Gestal­tung ist trans­pa­rent und zugäng­lich gewor­den. Jeder darf mun­ter kos­ten­lose The­mes für sei­nen Webauf­tritt aus­wech­seln. Mit einem Click zur bes­se­ren Optik, wobei das bes­ser immer sub­jek­tiv zu bewer­ten ist. Gestal­tung mit Sub­stanz zieht sich immer tie­fer hin­ter die eigent­lich sicht­bare Ebene. Gestal­tung für mich ist mitt­ler­weile mehr als die Optik der Fonts, Far­ben und Tex­tu­ren. Gestal­tung fin­det hier fast nur noch im Unbe­wuss­tem statt: Struk­tur, Navi­ga­tion, Typo­gra­fie.

Essenz

Das ist auch der Ansatz für meine Seite hier. Weni­ger ist immer noch mehr. Zurück zu den Wur­zeln. Als klas­si­sches Blog-Element, dass in mei­nen Augen total ver­sagt, sei hier bei­spiel­haft die so beliebte, mit Link-Listen zuge­la­dene, Sei­ten­spalte unzäh­li­ger Web­sei­ten, zu nen­nen. Es gibt einen Grund wieso, ich ganz expli­zit auf sol­che Ele­mente ver­zichte. Sol­che Ele­mente sind die Ant­wort auf eine Frage, die nie­mand heute mehr stellt.

Ich habe hier immer die Seite bas­teln wol­len, die mir selbst als Anwen­der gefällt. Das Lesen neuer Inhalte, das Fin­den neuer Links, all das fin­det bei mir fast aus­schließ­lich nur noch im RSS-Reader statt. RSS öffnet eine kom­plett neue Form der Ästhe­tik, wie man Infor­ma­tio­nen auf­nimmt bzw. prä­sen­tiert. Infor­ma­tio­nen wer­den wie­der nur auf ihre Essenz redu­ziert. Ich ver­stehe wei­ter­hin, wieso viele andere ihre Infor­ma­tio­nen nur in Aus­zü­gen über die Platt­form RSS anbie­ten möch­ten. Es geht sehr viel Wert ver­lo­ren, wenn man plötz­lich nur noch eine sim­ple Über­schrift zwi­schen hun­der­ten ist.

Was bleibt ist eine Essenz aus Inhalt, samt der dazu­ge­hö­ri­gen Gestal­tung, um die Seite auch außer­halb einer Feed-Reader Umge­bung, funk­tio­nie­ren zu las­sen. Jener Leser, der vom RSS-Reader hier­her fin­det, soll nur die bekann­ten Inhalte ange­neh­mer auf­be­rei­tet vor­fin­den. Nicht mehr und nicht weni­ger. Das ist das Kon­zept der Seite für die aktu­elle Ver­sion. Was momen­tan zu sehen ist, sind die Grund­zu­ta­ten um alles funk­tio­nie­ren zu las­sen. Ein Ele­ment dafür: das gewach­sene neue Spal­ten­ras­ter.

1024 Pixel zum Glück

Auch wenn es ein paar Jahre gedau­ert hat, aber nun bin auch ich, von den Vor­tei­len der zusätz­li­chen Pixel, über­zeugt. Im Gegen­teil, mehr Raum untertreicht auch mei­nen oben beschrie­be­nen Ansatz, Inhal­ten die per­fekte Bühne berei­ten zu wol­len. Seit Ewig­kei­ten waren die Leser hier mit hohen Auf­lö­sun­gen unter­wegs. Eine aktu­elle Über­sicht über Brow­ser­auf­lö­sun­gen der Besu­cher hier sieht so aus:

Die Frage “Wie” war das grö­ßere Übel. Ich hatte im letz­ten Jahr schon ein­mal die Rich­tung 1024 Pixel ange­peilt, bis dahin mit wenig Erfolg. Zwei ältere Texte behan­deln einige der Stol­per­steine. Die Trans­for­ma­tion vom alten zum neuen Ras­ter will durch­aus sorg­fäl­tig geplant sein. Wich­tig war, durch­aus mehr Platz nut­zen zu wol­len, jedoch nicht auf Kos­ten der Les­bar­keit der Texte. Lau­fen die Zei­len zu lang, ver­lie­ren sie an Les­bar­keit. Eine volle zusätz­li­che “alte” Spalte hätte die Breite der Zei­len auf 712 Pixel erhöht, eine Länge die nicht mehr ange­nehm zu lesen ist. Statt­des­sen habe ich das alte Ras­ter ver­fei­nert und so dem Text eine zusätz­li­che halbe “alte” Spalte zu göh­nen. Damit wächst die Breite der Text-Spalte von ehe­mals 468 Pixel, auf nun 590.

Somit ist das neue Ras­ter um eine zusätz­li­che Spalte gewach­sen, es ist fei­ner gewor­den und erlaubt nun sehr viel mehr Grö­ßen als vor­her, was spä­tes­tens bei Bil­dern und Aus­rich­tung von Ele­men­ten, bedeut­sam sein wird. Hier eine kleine Ver­an­schau­li­chung des neuen Grund­ras­ters - dies ist übri­gens keine Gra­fik son­dern ein mit CSS gestyl­tes Dia­gramm.

2 Spal­ten

224 Pixel

3 Spal­ten

346 Pixel

4 Spal­ten

468 Pixel

5 Spal­ten

590 Pixel

6 Spal­ten

712 Pixel

7 Spal­ten

834 Pixel

8 Spal­ten

956 Pixel

Hier zu sehen ein Dia­gramm zur Illus­tra­tion aller mög­li­chen Spal­ten­grö­ßen des aktu­el­len Ras­ters.

Fokus beim neuen Ras­ter blieb also die Les­bar­keit der Texte, sowie ein mög­lichst gro­ßer Spiel­raum, zum Posi­tio­nie­ren der Ele­mente. Vor­her hatte ich prak­tisch zwei Bild­for­mate. Eines mit 468 Pixeln der Text­breite, sowie eines mit vol­ler Breite des Ras­ters: 712 Pixel. Mit die­sen zwei For­ma­ten kam ich schon recht weit. Bei­spiele gibt es hier und hier zu sehen. Plötz­lich jedoch ste­hen weit mehr For­mate zur Ver­fü­gung und noch schlim­mer, die alten wol­len nicht mehr so recht ins Ras­ter pas­sen.

Wieso ich die Gra­fik wei­ter oben als Dia­gramm ange­legt habe ist sim­pel. Pixel­gra­fi­ken ska­lie­ren sehr schlecht. HTML-Elemente dage­gen wun­der­bar. Die Umstel­lung der Dia­gramme auf das neue Ras­ter war ein Kin­der­spiel: hier und da ein CSS-Wert geän­dert und fer­tig. Abso­lute Ska­lier­bar­keit von Ele­men­ten ist noch Illu­sion, aber wenn man im Ein­zel­fall die Mög­lich­keit hat, sollte man sie nut­zen.

Die Pixel­bil­der dage­gen auf die 590 Pixel hoch­zu­zie­hen wär zwar ein­fach gewe­sen, aber auf Kos­ten der Qua­li­tät. Letzt­end­lich hab ich mich für die ein­fachste aber effek­tivste Lösung ent­schie­den. Nun lau­fen die Texte zwar bei alten Tex­ten wei­ter als einige Bil­der, aber mit dem klei­nen Makel muss ich leben, zumal dank CSS immer hier und da noch was zu ver­bes­sern ist. Was bleibt ist das neue Ras­ter voll bei ein­zel­nen Arti­keln aus­zu­nut­zen. Vor­be­rei­tet ist im Prin­zip alles. Trick­reich war nicht zu ver­ges­sen, die alten Bildformat-Klassen beim Import der Daten zu Word­Press, vor­her umzu­ben­nen, um bei der Menge der neuen Klas­sen und For­mate, die Über­sicht zu behal­ten.

Mehr Platz bedeu­tet auch jedem klei­ne­ren Ele­ment plötz­lich mehr Mög­lich­kei­ten der Posi­tio­nie­rung zu geben und hier wird die Geschichte plötz­lich auf­wen­di­ger. Ein ein­fa­ches Bei­spiel. Mit wel­cher Viel­falt kann ich ein Bild der Breite 346 Pixel sinn­voll plat­zie­ren?

 

346 Pixel über die ers­ten 3 Spal­ten - CSS: .11100000

 

.01110000

 

.00111000

 

.00001110

 

.00000111

Posi­ti­ons­ma­trix für ein klei­ne­res Bild­for­mat im neuen Ras­ter.

Nun geht es viel­leicht schon zu sehr in die prak­ti­sche Rich­tung, aber das Prin­zip sei hier erklärt. Jede Posi­tion braucht ihre sepa­rate CSS-Klasse. Noch fehlt mir hier ein sinn­vol­les Klas­sen­sys­tem, drum an die­ser Stelle eine von vie­len mög­li­chen Lösun­gen. Die CSS-Klasse defi­niert ich dadurch, wel­che Spal­ten vom Objekt benutzt wer­den. Ins­ge­samt gibt es 8 Spal­ten. Die­ses Bild­for­mat deckt 3 davon ab, 5 blei­ben unbe­nutzt. Wel­che Spal­ten bei wel­cher Posi­tion benutzt wer­den, bestimmt dann die CSS-Klasse. Die CSS-Klasse .00111000 defi­nitiert sich wie folgt von links nach rechts: Spalte 1 und 2 sind unbe­nutzt. Spalte 3, 4 und 5 wer­den benö­tigt. Spalte 6, 7 und 8 sind wie­der frei.

Wel­che Posi­tion das Bild im Ein­zel­fall dann erhält, geht schon sehr Rich­tung Gestal­tung im Print und muss tat­säch­lich in jedem Fall ein­zeln bestimmt wer­den. Es kommt immer auf das Umfeld des Bil­des an. Brau­che ich eine Bild­un­ter­schrift? Folgt das Bild einer Zwischen-Überschrift? Wie­viele Absätze erschei­nen vor und nach dem Bild und wie lang lau­fen diese? Mitt­ler­weile erlaubt das Ras­ter viel mehr Mög­lich­kei­ten und somit jedoch auch mehr “Arbeit” und Sorg­falt. Was sich hier andeu­tet wird sicher­lich mit Blick auf die kom­mende Ver­sion von HTML und CSS durch­aus zur Regel. Gestal­tung von Inhal­ten im Web wird umfang­rei­cher, benö­tigt dafür aber mehr Sorg­falt. Ein ein­fa­ches Text­ver­fas­sen und Bil­der­hoch­la­den reicht da nicht mehr. Auf­wen­di­gere Arti­kel möchte geplant und umge­setzt wer­den.

Mein Pro­blem bei Über­nahme der alten Inhalte war einen gestal­te­ri­schen Mit­tel­weg zu fin­den. Ich hätte die alten nun zu klei­nen Bil­der auch gern aus der Text-Spalte her­aus­ge­rückt, jedoch besit­zen viele davon Bild­un­ter­schrif­ten und dort käme es dann zu Über­lap­pun­gen und häss­li­chen Aus­wüch­sen des CSS-Float. Jetzt neue geschrie­bene Arti­kel dür­fen alle Optio­nen des neuen Ras­ters nut­zen, was auch bedeu­tet erstein­mal alle Mög­lich­kei­ten zu sich­ten und ein CSS-System zu ent­wi­ckeln, was spä­te­res Ein­pfle­gen neuer Inhalte ein­fach macht. Von nichts kommt nichts heißt es so schön, auch bei der neuen Gestal­tung hier, ist das nicht anders. Im zwei­ten Teil der kur­zen Serie, werde ich ein paar Zei­len zur Typo­gra­fie notie­ren.

Zum gleichen Thema

• zusätzliche Änderungen und skalierbare BilderCSS

• noch ein ScreenshotFundstücke

• streamlinedWeb Design

• Kommentarfunktion eingeschränktZeugs

• neues IconFundstücke

• Konjunktives BloggenFundstücke

• Details zum Update - QuellcodeWeb Design