Quick Win: Responsive CSS Grids

CSS Grids wie 960.gs und BlueprintCSS dürften mittlerweile jedem bekannt sein. Sie helfen, die Website in ein festes Raster zu unterteilen und mehrspaltige Layouts umzusetzen. Nun beschäftigt uns ein Thema, das immer häufiger in den Entwickler-Blogs zu lesen ist: responsives Webdesign.

In letzter Zeit wurden einige Raster unter dem Grundsatz entwickelt, dass Websites für alle Bildschirmbreiten und Endgeräte optimiert sein sollten. Dabei reicht es nicht aus, die Breite der Website flexibel zu machen. Oft müssen Spalten neu angeordnet und Texte vergrößert werden, damit auch auf dem kleinsten Smartphone-Display der Inhalt optimal wahrzunehmen ist. Ich habe mir einige dieser Frameworks angeschaut und möchte hier zunächst drei sehr unterschiedliche Lösungen vorstellen.

Columnal CSS

Die Macher von Columnal haben sich vom 960 Grid inspirieren lassen. Die Maximalbreite beträgt jedoch 1140px. Bei kleineren Browserfenstern wird das Layout flexibel, bis sich schließlich bei geringster Breite die Spalten untereinander setzen.

Skeleton

Auch bei Skeleton wurden Ideen vom 960 Grid übernommen. Allerdings wird es nicht flexibel bei einer kleineren Breite als 960px, sondern setzt zunächst eine feste Breite von 768px. Auch für mobile Displays gibt es zwei feste Gesamtbreiten. Skeleton liefert auch einige Styles für Text, Formulare und sogar Tabs und Buttons mit, wodurch es sich gut zum Erstellen von Wireframes eignet.

SimpleGrid

Das SimpleGrid ist nicht an das 960 Grid angelehnt. Man muss z.B. keine Klassen für die erste bzw. letzte Spalte einer Reihe vergeben, was viele als Nachteil des 960 Grids sehen. Auch sonst verhält sich das SimpleGrid anders: Es gibt 4 feste Breiten für große Bildschirme, wobei das Layout für Displays unter 720px Breite flexibel wird. Ein Vorteil vom SimpleGrid ist, dass sich auch die Schriftgröße je nach Auflösung anpasst.

Diese drei Frameworks helfen auf sehr unterschiedlichen Wegen, ein responsives Layout umzusetzen. Es gibt noch unzählige andere Frameworks für diesen Zweck. Gerne könnt ihr eure Favoriten in einem Kommentar vorstellen.