1024.2 – Tanz auf dem Raster
Eigentlich sollten die wertvollen Osterfeiertage auch genutzt werden um die neue Gestaltung hier einen Schritt vorran zu bringen, aber wieso oft blieb vom guten Vorsatz nicht viel übrig. Statt dessen kämpften DVDs und ein paar DS-Spiele um meine Aufmerksamkeit. Besonders dieses teuflische Filmwerk hat seine Spuren hinterlassen. Ich habe E.T. nun seit ein paar Jahren nicht mehr gesehen und hoffte der Film hätte seine Wirkung verloren, aber falsch gedacht. E.T. ist bei mir wie auf Knöpfe drücken mit dem Ergebnis nasser Augen. Ich liebe und hasse diesen Film dafür, wird Zeit für ein E.T.-Eintrag samt Kindheits-Erinnerungen zum ersten Kino-Besuch meines Lebens. Aber genug dazu…
Als nachträgliche Erleuterung zum ersten Teil noch ein paar Details zum neuen/alten Grundraster. Wirklich viel verändert hat sich nicht, d.h. die grundsätzlichen Maße bleiben alle bestehen. Hier nochmal die Illustration vom alten Tutorial:
Neu hinzugekommen ist eine vierte „große“ Spalte bzw. eine zusätzliche Teilung der alten Spalten in neue Kleinere. Warum? Einfach um etwas mehr Freiheit bei der Anordnung auf dem Raster zu erhalten, mal schauen wieviel Spielraum ich habe:
Das Problem mit zusätzlichem Platz ist eine sinnvolle Nutzung. Nicht jeder Inhalt funktioniert plötzlich auf mehr Raum besser. Ich hatte nie wirklich Probleme mit der noch aktuellen schmalen Breite der Seite. Im Gegenteil, es sitzt alles so optimiert an seinem Platz, dass es schwer ist nun eine neue Ordnung hinein zu bringen.
Die Idee war, die zusätzliche Breite auch auf den jeweiligen Inhalt – und somit primär den Text-Blöcken – zu nutzen. Die Breite eines Text-Blocks ist jedoch eine sehr sensible Eigenschaft. Ich möchte mich zwar nicht selbst loben, aber die Lesbarkeit dieser Seite ist wirklich gut und die Breite der Text-Blöcke ist daran nicht unschuldig. Dennoch lohnt es sich immer zu Testen. Dank CSS eine Frage von wenigen Minuten.
Diese Grafik zeigt zwei Versuche irgendwie sinnvoll die neuen Maße des Raster zu nutzen. Jeweils Rot markiert, Bereiche die ich für problematisch halte, wo optisch eine Unruhe oder ein Loch entsteht, genau was ich mit einem Raster vermeiden möchte.
Auf der linken Seite, nutze ich die volle neue zusätzliche Breite, auf der rechten Seite hat sich praktisch im Vergleich zum jetzigen Stand nichts verändert. Links geht Lesbarkeit und Ruhe abhanden, Rechts dagegen wirkt die Seite stark ungleichgewichtig, besonders im oberen Teil. Der logische Schritt wäre also eine Mischung aus beiden Lösungen.
weniger ist mal wieder mehr
Allein schon an der Anzahl und Größe der optischen Probleme dieses Layouts scheint dies die beste Lösung bisher zu sein. Ich kann nur jedem Empfehlen auch im Webdesign mal „Abstand“ von dem Layout zu nehmen. Ich habe hier einfach mal Screenshots der Seiten verkleinert und plötzlich kommen Schwächen ans Licht, die man bei der normalen Bildschirm-Betrachtung oft sehr spät entdeckt.
Alle obskuren Versuche, mit der Brechstange die Inhalte in die Breite zu ziehen, verursachen mehr Schaden als Verbesserungen. Die Gestaltung fühlt sich einfach nicht mehr so ausgeglichen an. Sicherlich mögen die Seiten insgesamt dann kürzer werden und wir bekommen ja auch an jeder Ecke gesagt, dass Scrolling schlecht sei. Noch schlechter sind allerdings miese Lesbarkeit und optische Unruhe. Ich opfere gern Seitenlänge und zwinge zum Scrollen, wenn dafür das Verständnis für den Inhalt steigt.
Ein aktueller Stand zeigt zusätzlich ein paar veränderte Details. So ist meine Spalte für Marginalien/Bildunterschriften und Überschriften erstmal auf die Hälfte geschrumpft. Daraus resultiert auch, dass ich die Text-Ausrichtung ändern kann, weil ich nun kaum viel Weißraum zum Text überspielen muss wie jetzt vielleicht noch. Eine rechte Textausrichtung macht plötzlich wenig Sinn. Ob die kleinen Überschriften weiterhin so links fließen werden sei mal noch dahingestellt. 102 Pixel sind verdammt wenig, vermutlich rücken die Zwischenüberschriften somit noch klassisch in die eigentliche Text-Spalte hinein.
So wie momentan die eigentlichen Inhalte auf der Seite stehen, bin ich wirklich zufrieden damit. Der visuelle Rhythmus stimmt sowohl vertikal als auch horizontal, zumindestens beim eigentlichen Eintrags-Inhalt. Drumherum herrscht noch Chaos, aber das wird in den kommenden Tagen beseitigt.
2 Kommentare
Für diesen Eintrag wurden die Kommentare geschlossen.
global $hemingway ?>Klasse Artikelserie in Sachen 1024.x. Weiterhin viel Erfolg beim Umbau!
wau dein beispiel muss ich klauen 🙂 – ne mal im ernst, die sache mit dem imgLarge gefällt mir sehr 🙂