03
09

barcode

1024.2 - Tanz auf dem Raster

Eigent­lich soll­ten die wert­vol­len Oster­fei­er­tage auch genutzt wer­den um die neue Gestal­tung hier einen Schritt vor­ran zu brin­gen, aber wieso oft blieb vom guten Vor­satz nicht viel übrig. Statt des­sen kämpf­ten DVDs und ein paar DS-Spiele um meine Auf­merk­sam­keit. Beson­ders die­ses teuf­li­sche Film­werk hat seine Spu­ren hin­ter­las­sen. Ich habe E.T. nun seit ein paar Jah­ren nicht mehr gese­hen und hoffte der Film hätte seine Wir­kung ver­lo­ren, aber falsch gedacht. E.T. ist bei mir wie auf Knöpfe drü­cken mit dem Ergeb­nis nas­ser Augen. Ich liebe und hasse die­sen Film dafür, wird Zeit für ein E.T.-Eintrag samt Kindheits-Erinnerungen zum ers­ten Kino-Besuch mei­nes Lebens. Aber genug dazu…

Als nach­träg­li­che Erleu­te­rung zum ers­ten Teil noch ein paar Details zum neuen/alten Grund­ras­ter. Wirk­lich viel ver­än­dert hat sich nicht, d.h. die grund­sätz­li­chen Maße blei­ben alle beste­hen. Hier noch­mal die Illus­tra­tion vom alten Tuto­rial:

Infografik: Raster-Maße

Neu hin­zu­ge­kom­men ist eine vierte “große” Spalte bzw. eine zusätz­li­che Tei­lung der alten Spal­ten in neue Klei­nere. Warum? Ein­fach um etwas mehr Frei­heit bei der Anord­nung auf dem Ras­ter zu erhal­ten, mal schauen wie­viel Spiel­raum ich habe:

Das erwei­terte Ras­ter ist nun fei­ner und ins­ge­samt brei­ter.

Infografik: neue Raster-Maße

Das Pro­blem mit zusätz­li­chem Platz ist eine sinn­volle Nut­zung. Nicht jeder Inhalt funk­tio­niert plötz­lich auf mehr Raum bes­ser. Ich hatte nie wirk­lich Pro­bleme mit der noch aktu­el­len schma­len Breite der Seite. Im Gegen­teil, es sitzt alles so opti­miert an sei­nem Platz, dass es schwer ist nun eine neue Ord­nung hin­ein zu brin­gen.

Die Idee war, die zusätz­li­che Breite auch auf den jewei­li­gen Inhalt - und somit pri­mär den Text-Blöcken - zu nut­zen. Die Breite eines Text-Blocks ist jedoch eine sehr sen­si­ble Eigen­schaft. Ich möchte mich zwar nicht selbst loben, aber die Les­bar­keit die­ser Seite ist wirk­lich gut und die Breite der Text-Blöcke ist daran nicht unschul­dig. Den­noch lohnt es sich immer zu Tes­ten. Dank CSS eine Frage von weni­gen Minu­ten.

Zum Ver­gleich zwei Mög­lich­kei­ten Text und Bild auf der Seite neu anzu­ord­nen.

Infografik: Vergleich Text-Breite

Diese Gra­fik zeigt zwei Ver­su­che irgend­wie sinn­voll die neuen Maße des Ras­ter zu nut­zen. Jeweils Rot mar­kiert, Berei­che die ich für pro­ble­ma­tisch halte, wo optisch eine Unruhe oder ein Loch ent­steht, genau was ich mit einem Ras­ter ver­mei­den möchte.

Auf der lin­ken Seite, nutze ich die volle neue zusätz­li­che Breite, auf der rech­ten Seite hat sich prak­tisch im Ver­gleich zum jet­zi­gen Stand nichts ver­än­dert. Links geht Les­bar­keit und Ruhe abhan­den, Rechts dage­gen wirkt die Seite stark ungleich­ge­wich­tig, beson­ders im obe­ren Teil. Der logi­sche Schritt wäre also eine Mischung aus bei­den Lösun­gen.

weni­ger ist mal wie­der mehr

Infografik: neues LayoutAllein schon an der Anzahl und Größe der opti­schen Pro­bleme die­ses Lay­outs scheint dies die beste Lösung bis­her zu sein. Ich kann nur jedem Emp­feh­len auch im Web­de­sign mal “Abstand” von dem Lay­out zu neh­men. Ich habe hier ein­fach mal Screen­shots der Sei­ten ver­klei­nert und plötz­lich kom­men Schwä­chen ans Licht, die man bei der nor­ma­len Bildschirm-Betrachtung oft sehr spät ent­deckt.

Alle obsku­ren Ver­su­che, mit der Brech­stange die Inhalte in die Breite zu zie­hen, ver­ur­sa­chen mehr Scha­den als Ver­bes­se­run­gen. Die Gestal­tung fühlt sich ein­fach nicht mehr so aus­ge­gli­chen an. Sicher­lich mögen die Sei­ten ins­ge­samt dann kür­zer wer­den und wir bekom­men ja auch an jeder Ecke gesagt, dass Scrol­ling schlecht sei. Noch schlech­ter sind aller­dings miese Les­bar­keit und opti­sche Unruhe. Ich opfere gern Sei­ten­länge und zwinge zum Scrol­len, wenn dafür das Ver­ständ­nis für den Inhalt steigt.

Ein aktu­el­ler Stand zeigt zusätz­lich ein paar ver­än­derte Details. So ist meine Spalte für Marginalien/Bildunterschriften und Über­schrif­ten erst­mal auf die Hälfte geschrumpft. Dar­aus resul­tiert auch, dass ich die Text-Ausrichtung ändern kann, weil ich nun kaum viel Weiß­raum zum Text über­spie­len muss wie jetzt viel­leicht noch. Eine rechte Text­aus­rich­tung macht plötz­lich wenig Sinn. Ob die klei­nen Über­schrif­ten wei­ter­hin so links flie­ßen wer­den sei mal noch dahin­ge­stellt. 102 Pixel sind ver­dammt wenig, ver­mut­lich rücken die Zwi­schen­über­schrif­ten somit noch klas­sisch in die eigent­li­che Text-Spalte hin­ein.

So wie momen­tan die eigent­li­chen Inhalte auf der Seite ste­hen, bin ich wirk­lich zufrie­den damit. Der visu­elle Rhyth­mus stimmt sowohl ver­ti­kal als auch hori­zon­tal, zumin­des­tens beim eigent­li­chen Eintrags-Inhalt. Drum­herum herrscht noch Chaos, aber das wird in den kom­men­den Tagen besei­tigt.

Klasse Arti­kel­se­rie in Sachen 1024.x. Wei­ter­hin viel Erfolg beim Umbau!

wau dein bei­spiel muss ich klauen :) - ne mal im ernst, die sache mit dem imgLarge gefällt mir sehr :)

Kommentar schreiben
safari bug

Vorschau:

HTML ist in Kommentaren zugelassen. Erlaubt sind die HTML-Tags:
<a href>, <i>, <p>, <strong>, <em>, <ul>, <ol>, <li>, <blockquote>.
Alle themenfremden oder persönlichkeistverletzenden Beiträge werden gelöscht, also immer schön sachlich argumentieren.

schrieb: