Flexibles Grid im Zusammenhang mit Responsive Webdesign

Ethan Marcotte nennt drei zentrale Elemente, die Responsive Webdesign ausmachen – eines davon ist ein sog. „flexibles Grid“ (oder auch fluid grid):

Bei der Gestaltung verwenden moderne Websites – angelehnt an den Printbereich – meist ein sog. Gestaltungsraster. Dies sorgt für optische Achsen, an denen sich das Auge orientieren kann: Websites, die ein Raster benutzen, werden als harmonischer und damit angenehmer empfunden. Anders als im Printbereich gibt es jedoch keine fest definierte Größe der Gestaltungsfläche – die äußere Begrenzung ist das Browserfenster, und dieses kann beliebig in seinen Abmessungen verändert werden. In fixen Layouts wird daher meist ein Rahmen auf eine feste Pixelgröße, oft 960px, festgelegt. Durch die Aufteilung in 12 Spalten á 80 Pixel erhält man dann ein einheitliches Raster. Ist das Browserfenster hingegen weniger als 960 Pixel breit, wird das Layout am Rand abgeschnitten oder künstlich verkleinert, was wiederum die Lesbarkeit verschlechtert (vgl. Zillgens 2013, S. 16–18).

Um ein festes Layout in ein flexibles zu transformieren, ist die Verwendung von Prozentwerten anstelle von festen Pixelwerten erforderlich. Anstatt die Gesamtbreite der Seite also wie im zuvor genannten Beispiel auf 960 Pixel festzulegen, legt man diese auf beispielsweise hundert Prozent fest. Bei einem zwölfspaltigen Gestaltungsraster hätte jede Spalte somit eine Breite von 8,3333%. In der konkreten Umsetzung und Anordnung der Website-Elemente kann dies mitunter viel kleinteiligen Rechenaufwand und sorgfältige Planung erfordern (vgl. Marcotte 2009). Aus diesem Grund kann die Verwendung von Werkzeugen zur automatischen Erzeugung flexibler Raster (engl. fluid grid generators) wie „Gridpak“ oder sogar umfangreicher Gestaltungsframeworks wie „Twitter Bootstrap“ oder „Foundation“ sinnvoll sein (vgl. Schelper 2011; Gridpak.com 2014; Gebauer 2013).