Grid Based Layouts

So neu wie es zunächst anmutet ist es eigentlich nicht: Grid-Based Layouts. Diese Technik vereinfacht im Grunde die Strukturierung des Frontend Designs von Websites. Anhand des Raster lassen sich bereits in der Konzeptionssphase sehr detailliert Größe, Verhältnis und Platzierung existenzieller Site-Elemente bestimmen. Während der Umsetzung erleichtert es zudem den Einsatz von CSS Bausteinen anhand vordefinierter Klassen erheblich.

Wie ich bereits andeutete, ist das Thema nicht ganz neu. Im Druckbereich findet das Rastern von Vorlagen grob geschätzt seit Erfindung des Zeitungsdrucks statt. Selbst als es noch völlig normal war (und es auch keine ernst zunehmenden Alternativen gab), verwendeten viele Webworker für Ihr HTML/Tabellen Gefrickel mehr oder weniger ein Raster, da es die Strukturierung der Tabellenlayouts deutlich vereinfachte.

Nun, wo wir es alle wieder besser wissen, CSS sich als Standard etabliert hat (auch wenn das einige Browserhersteller und das W3C manchmal ein wenig anders sehen), kommen die Raster allmählich wieder in Mode. In diesem Fall beschränkt sich der Grund aber nicht nur auf die reine Arbeitserleichterung, sondern die Ästhetik spielt ebenfalls eine Rolle.

Warum also ein Raster-Basiertes Layout?

Wer sich schon einmal auch nur Ansatzweise mit Gestaltungsgrundlagen beschäftigt hat, dem sollten Gestaltungskontraste und der „goldende Schnitt“ nicht neu sein. Ab hier fängt es an Spaß zu machen: Grid Based konsequent geplant, hilft ein wohl strukturierstes Layout bereits in der Planungsphase ohne großen Stress auch in die Praxis zu übertragen. CSS kommt dabei eine große Bedeutung zu. yaml ist in dieser Angelegenheit eine sehr gute Möglichkeit, da hier nativ CSS Bausteine eingesetzt werden.

Wo fängt man an?

Sacha Greif bietet in einem Blog-Artikel eine sehr hilfreiche Übersicht anhand einer Schritt für Schritt Einführung: Seven Smooth Steps to Superb Grids.

Cameron Moll bietet eine Arbeitshilfe anhand einer Hintergrundgrafik mit Pixel-Lineal, Gitter-Raster und vorbereiteten Spalten für ein 960 Pixel breites Layout:

Das Smashing Magazine bietet den mit Abstand umfangreichsten Artikel rund um das Thema Raster-Basiertes Layout: Designing With Grid-Based Approach.

Schön visuell veranschaulicht, wie es aussehen kann, hat Oliver Wagner – Agenturblog: Zeit für ein neues Layout.

Tags: Design