Eine nahezu unüberschaubare Vielfalt an grid-basierten CSS-Frameworks bevölkert den Markt. Einige davon berücksichtigen responsive Designansätze, andere nicht. Fast allen ist gemeinsam, dass sie sich auf bestimmte Rahmenbedingungen festlegen. Sei es eine vorgegebene Pixelgesamtbreite oder die Anzahl der Spalten, um die Einhaltung von Konventionen kommt man nicht herum. Responsify.it, ein moderner Online-Grid-Generator, überlässt seinen Nutzern mehr Wahlmöglichkeiten.

Auf seinem Gebiet flexibel wie ein Gummibärchen ist Responsify.it (Bildquelle: bongtschik/pixelio.de)

Responsify.it: Studentisches Projekt mit Perspektive

Stuart Kennedy aus Belfast in Nord-Irland ist Student des Mediendesigns im Abschlussjahr. In erster Linie im Rahmen seiner universitären Verpflichtungen arbeitete er einige Monate an einem Projekt, das er Responsify.it nannte.

Responsify.it ist eine Web-App, mit deren Unterstützung man sich kostenlos, schnell und unkompliziert eine Vorlage für responsive Websites zusammenklicken und dann herunterladen kann. Der Download enthält neben dem CSS auch eine entsprechend funktionale HTML-Datei, sowie das Grid als PNG für Layoutzwecke, etwa in Photoshop oder Fireworks.

Das Besondere an Responsify ist der Verzicht auf eine feste Konvention, wie man sie etwa bei 960.gs findet. Anderen responsiven Frameworks, etwa Skeleton, hat Responsify voraus, dass die mit Responsify erzeugten Layouts fluid sind, also auf Prozentwerten, nicht auf Pixelwerten basieren. Die Webapp folgt zwar dem Ansatz eines klassischen Grid-Layouts, lässt aber dem Nutzer die Wahl der Anzahl der Spalten. So können Grids mit einer beliebigen Spaltenzahl generiert werden.

Natürlich resultiert daraus, wie bei den meisten Frameworks auch, die Verwendung relativ unsemantischer Klassen, nämlich .span1 bis .spanX. Allerdings kann diese Vorgehensweise als etabliert betrachtet werden. Besser in dieser Hinsicht arbeitet nach meiner Kenntnis nur das dezidiert entsprechend benannte Semantic.gs.

Die wesentlichen Einstellungen sind schnell erledigt

Eine Designvorlage ist mit Responsify.it schnell gemacht. In der sehr übersichtlichen, an iPad-Designprinzipien angelehnten UI sind nur wenige Angaben erforderlich, bis man am Ende den rechts unten positionierten Button “Download Template” klicken kann. Neben der Zahl der Spalten legt man noch den Spaltenabstand fest. Bei Bedarf fügt man den vom Entwickler bereits voreingestellten Breakpoints für Smartphones (480px) und Tablets (768px) weitere hinzu. Diese erscheinen dann links unten innerhalb des “Change Viewport-Size”-Auswahlmenüs. Ein Klick auf den entsprechenden Breakpoint führt dazu, dass sich das Beispielgrid optisch anpasst.

Vorkonfigurierte Breakpoints

Custom Breakpoint hinzugefügt

Responsify.it selber ist übrigens nicht responsiv. Die optische Kontrolle der entsprechenden Viewports kann nicht durch das Resizen des Browsers, in dem Responsify.it ausgeführt wird, erfolgen, sondern bedarf zwingend der Verwendung des entsprechenden Auswahlmenüs. Die von Responsify erzeugten Layouts sind von dieser Einschränkung naheliegenderweise nicht betroffen und reagieren sofort auf jegliche Viewport-Veränderungen.

Responsify.it liefert meiner Meinung nach eine sehr stabile und sinnvolle Grundlage für den Start der eigenen responsiven Website. Anders als ein Framework kümmert es sich nicht um andere CSS-Aspekte, etwa Typografie oder Formular-Layouts, sondern beschränkt sich auf die Kernkompetenz als Grid-Generator.

Derzeit lassen sich mit Responsify ausschließlich prozent-basierte Layouts generieren. An der Möglichkeit, Layouts auf der Basis von EM-Werten zu erstellen, arbeitet Kennedy nach eigenen Angaben bereits. Pixellayouts werden nicht unterstützt.