Frameworks für Responsive Layout

Nicht bei jedem Projekt muss man das Rad neu erfinden, sondern kann eine Basisstruktur verwenden, die sich als robust erwiesen hat. Und vielleicht setzt man auch direkt fertige, gängige Layoutkomponenten ein, und passt sie entsprechend an. Die Verwendung von Frontend-Frameworks bietet also einiges an Vorteilen.Heute sollte ein solches Framework natürlich auch "responsiv" sein, sprich die die erstellten Layouts sollten sich an die verschiedenen Bildschirmgrößen anpassen. Aus der großen Anzahl an Responsive Frameworks tellen wir als besonders interessante Varianten 320 and Up, Bootstrap und Foundation vor. Außerdem wollen wir einen kurzen Blick auf einige weitere werfen.

320 and Up

320 and Up stammt von Andy Clarke; die erste Version erschien im Frühjahr 2011. Die rundum erneuerte Version 2 basiert, wie die Vorversion, auf Boilerplate, integriert aber jetzt ebenfalls Komponenten von Bootstrap.Wie der Name suggeriert, verfolgt 320 and Up den Ansatz "Mobile First" und hatte damit ursprünglich eine Vorreiterrolle: Von den Formatierungen für die kleinen Bildschirme ausgehend, werden sukzessive die Angaben für größere Bildschirme ergänzt.Fünf Media Queries sind insgesamt im Stylesheet von 320 and Up enthalten: Eigene Formatierungen sind vorgesehen ab einer Größe von 480, 600, 768, 992 und 1382 Pixel. Im Download-Paket finden Sie eine HTML-Datei als Vorlage mit nützlichen Bestandteilen. Sie beinhaltet beispielsweise konditionale Kommentare um das HTML-Element, damit sich besondere Formatierungen für einzelne IE-Versionen definieren lassen:

Damit erhält das HTML-Starttag, wenn es sich um den IE 8 und nicht um eine mobile Version handelt, die Klasse lt-ie9. So können Sie besondere Formatierungen für diesen Browser in Ihrem Stylesheet vornehmen, indem Sie vor dem gewünschten Selektor .lt-ie9 ergänzen.Außerdem finden sich in der HTML-Datei nützliche eingebundene Javascript-Dateien wie Selectivizr, das die CSS3-Selektoren in älteren IEs nachbessert, und Modernizr zur Feature Detection.Eine zentrale Komponente von 320 and Up ist das Stylesheet. Dieses erhalten Sie in verschiedenen Versionen. Zusätzlich zur normalen CSS-Datei gibt es Stylesheets für CSS-Präprozessoren: Eigene Ordner beinhalten die Angaben für LESS und SASS, für Letzteres in verschiedenen Geschmacksrichtungen.Einen Überblick über die Formatierungen verschaffen Sie sich am einfachsten über die Präprozessoren-Version, weil dort die Dateien und Komponenten einzeln zu sehen sind. Zentrale Komponente ist ein 320andup genanntes Stylesheet, das die anderen Stylesheets einbindet und in Kommentaren erläutert, worum es sich jeweils handelt.Neben dem üblichen Reset-Stylesheet und grundlegenden Formatierungen gibt es auch Formatierungen für Alert-Buttons, Boxes und Badges - dort lassen sich beispielsweise schöne Farbverläufe einbauen. Für Icons wird wie bei Bootstrap der Font Awesome genutzt.Weitere Komponenten sind Vorformatierungen für Formularelemente oder Tabellen. Die Formatierungen für einzelne Viewportgrößen stehen in eigenen Dateien - teilweise auch nur als leere Vorlagen.Interessant, aber auch erklärungsbedürftig ist die Komponente Upstart von 320 and Up: In dieser finden sich Zusatz-Formatierungen für gängige Layoutkomponenten, etwa für ein Rasterlayout oder für Panels.Nützliche Helfer im Entwicklungsalltag des Responsive Designers sind zwei weitere Dateien, die man beide über einen Server aufrufen muss: responsive.html führt vor, wie eine ausgewählte Datei in verschiedenen Viewportgrößen aussieht.Sie setzt hierfür auf iFrames und zeigt automatisch die index.html-Datei, die sich im selben Verzeichnis befinden muss, in den verschiedenen Viewportgrößen. Die andere Datei, responsive.php, dient zum Test der Schriftgröße.So ist 320 and Up eine gute Projektvorlage mit ausgewählten Komponenten von Bootstrap und Mobile Boilerplate, ohne jedoch vollständige vorgefertigte Layouts zu präsentieren. Anpassungen lassen sich am einfachsten vornehmen, wenn man die CSS-Präprozessoren-Varianten nutzt.

Bootstrap

Das beliebte Frontend-Framework Bootstrap stammt ursprünglich vom Twitter-Team. Attraktiv ist es besonders durch seine vielen Komponenten für schöne Benutzeroberflächen - das reicht von einem einfach zu verwendenden Rasterlayout über Dropdownmenüs, Buttons, Navigationsvarianten, Thumbnails bis hin zu Fortschrittsbalken. Mit dabei sind eine Reihe von Javascript-Dateien für modale Dialoge, Tabs, Toooltipps, Pop-overs, Karussells und vieles mehr.Besonders praktisch ist der konfigurierbare Download, bei dem Sie einerseits die Komponenten wählen und andererseits die grundlegenden Formatierungen wie Farben und Größen bestimmen können. Bootstrap verwendet LESS als Präprozessor. Wenn Sie aber nicht mit LESS arbeiten wollen, können Sie grundlegende Formatierungen auch über die Download-Seite bestimmen.Standardmäßig ist bei Bootstrap die responsive Komponente nicht inbegriffen, sondern muss erst aktiviert werden. Dafür ergänzen Sie in Ihrer HTML-Datei eine Meta-Angabe und einen Verweis auf das entsprechende Stylesheet:

Bootstrap bietet sein Rasterlayout in zwei Versionen an: zum einen als Standardvariante, die Breitenangaben in Pixeln umsetzt, und zum anderen als flüssiges Rasterlayout. Bei beiden können Sie die bootstrap-responsive.css-Datei einsetzen.In Kombination mit dem flüssigen Layout haben Sie ein klassisches responsives Layout, im anderen Fall gibt es stufenweise Anpassungen: Die Spaltenbreite ist dann bei ganz großen Displays mit mehr als 1200 Pixel verfügbarem Viewport 70 Pixel breit, bei einer Breite zwischen 980 und 1200 Pixeln hingegen 60 Pixel, und zwischen 768 und 980 wird die Spalte 42 Pixel breit.

Links zum Thema

• Responsive Komponente von Bootstrap
• 320 and Up
• Foundation von Zurb
• Less-Framework
• Weiterentwicklung von Less: Frameless
• Skeleton
• Patterns fürs Responsive Design

Bei noch kleineren Viewportgröße sind die Spalten flüssig. Die Kombination aus Pixelwerten für die Breite und Media Queries ist kein responsives Webdesign im ursprünglichen, von Ethan Marcotte geprägten Sinn des Wortes, sondern ein adaptives Layout. Aber feste Pixelwerte für die Breiten haben Vorteile - und kommen den Grafikern mehr entgegen, die ursprünglich im Print beheimatet sind.Ist das Responsive Stylesheet eingebunden, können Sie außerdem über Klassen steuern, ob ausgewählte Komponenten auf bestimmten Geräten sichtbar oder unsichtbar sein sollen. Beispielsweise wird ein Element mit class="visible-phone" nur auf Smartphones angezeigt oder mit class="hidden-phone" auf kleinen Bildschirmen ausgeblendet.Ebenfalls praktisch ist die einklappbare Navigation, für die die JavaScript-Datei collapsible eingebunden sein muss: Damit wird die Navigation bei viel verfügbarem Platz als horizontale Leiste angezeigt, bei weniger verfügbarem Platz hingegen verschwindet sie und kann über einen Klick auf das Menü-Icon wieder angezeigt werden - diesmal als vertikale Navigation.

Die richtige Foundation

Bescheiden ist das Auftreten von Foundation nicht gerade, denn sie bezeichnen sich selbst "als fortschrittlichstes Responsive Framework der Welt" (The most advanced responsive front-end framework in the world). Version 3.2.2 ist gerade erst im November 2012 erschienen.Als Ausgangsbasis verwenden Sie am besten die im Download-Paket mitgelieferte index.html-Datei. In dieser sind alle benötigten Dateien bereits integriert, jeweils als normale und als Minimalversion, wobei erstere auskommentiert ist. Von den zwei CSS-Dateien ist foundation.css das CSS-Herzstück, app.css ist hingegen für die eigenen Formatierungen vorgesehen.Mit dabei ist eine große Anzahl an JavaScript-Dateien, die in der Index-Datei innerhalb eines Kommentars eingebunden sind. Direkt verlinkt ist die Datei foundation.min.js, die alle JavaScript-Dateien zusammenfasst. app.js dient zum Starten der Komponenten.Zur Anordnung der Inhalte gibt es ein Raster-Framework, das eine Aufteilung in Spalten ermöglicht und wie üblich mit Klassennamen wie column oder eight arbeitet. Zusätzlich gibt es aber dank der eingesetzten Präprozessoren die Möglichkeit, ein semantisches Grid zu verwenden.Foundation setzt auf flüssige Angaben, das heißt Werte in Prozent. Abstände wie padding können Sie einfach anpassen, da Foundation mithilfe der CSS3-Eigenschaft box-sizing: border-box das andere Boxmodell aktiviert: width bezeichnet dann nicht mehr nur den inneren Bereich, zu dem padding und border addiert werden, sondern die Gesamtbreite.Standardmäßig werden bei kleineren Bildschirmen die Elemente auf 100%-Breite gesetzt und untereinander angeordnet. Falls Sie doch eine Aufteilung auf kleinen Bildschirmen brauchen, so gibt es hierfür eigene Klassen mit dem Präfix -mobile, mit denen sich bestimmte Komponenten nur für kleine Viewports nebeneinander platzieren lassen.Apropos eigene Klassen: Wie Bootstrap stellt auch Foundation Klassen zur Verfügung, um Inhalte nur bei bestimmten Viewportgrößen sichtbar zu machen oder zu verbergen.Foundation bietet eine Reihe von formatierten Inhaltselementen: von Buttons über Lösungen für die Navigation, Formularelemente und Tabs bis hin zu weiteren gängigen Bestandteilen von Benutzeroberflächen.So existieren Fortschrittsbalken, Thumbnails oder eine Flexibilisierung von Videoelementen, die sich dann an die Bildschirmgröße anpassen. Besonders attraktiv sind die mitgelieferten Javascript-Funktionen, darunter Orbit Slider - nutzbar für Bilder oder andere Inhalte -, Reveal für modale Fenster, die sich erstellen lassen, ohne dass Sie eine Zeile Javascript-Code schreiben müssen, Clearing für eine Galerie oder Magellan für eine fixe Navigation. Das Schöne daran ist, dass diese Komponenten alle responsiv sind.Da Foundation auf flüssige Breitenangaben in Prozent setzt, ist nur eine geringe Anzahl an Anpassungen notwendig. Mit einer einzigen Media-Query-Angabe werden die Anpassungen für kleine Viewports definiert:

Foundation setzt auf SASS/Compass, worüber sich die einzelnen Komponenten bequem anpassen lassen. Wer lieber mit CSS pur arbeitet, kann das natürlich auch. In diesem Fall empfiehlt es sich, über die Download-Seite die ersten Anpassungen vorzunehmen. Besonders praktisch sind auch die Templates, die auf der Downloadseite zur Verfügung stehen und beispielhafte Seitenaufteilungen zeigen.

Von Skeleton bis Frameless

Natürlich gibt es eine große Anzahl weiterer responsiver Frameworks. Da wäre beispielsweise Skeleton, das neben der Typographie ein fast schon klassisch anmutendes responsives Rasterlayout mitbringt. Außerdem gibt es Less - was nichts mit dem gleichnamigen LESS-Präprozessor zu tun hat.Less ist allerdings kein Framework mit vorgefertigten Dateien, sondern beschreibt eine Idee, wie sich adaptive Layouts erstellen lassen, die über die verschiedenen Gerätegrenzen hinweg konsistent wirken. Flüssige Angaben sind hier nicht angesagt, vielmehr bleiben die Spaltenelemente bei den verschiedenen Viewports in einheitlicher Größe, werden aber nach Bedarf unterschiedlich angeordnet oder über den Außenabstand angepasst.Eine Weiterentwicklung von Less stellt Frameless dar, das ebenfalls auf Spalten in einer festen Breite setzt. Die Media Queries orientieren sich hier nicht mehr an gängigen Breiten von Ausgabegeräten (was sie sowieso nicht tun sollten), sondern orientieren sich an den Spalten. Dann kann man beispielsweise überlegen, welche Anpassungen durchgeführt werden sollen, wenn nur X Spalten Platz haben.Eindeutig kein Framework, aber von nicht minder großem Nutzen, ist die responsive Pattern-Galerie von Brad Frost, ein Teil seines Projekts "This is responsive": Hier sind Möglichkeiten aufgelistet, gängige Layoutkomponenten responsiv zu realisieren. Eine unentbehrliche Inspirationsquelle!

Fazit

Die vorgestellten Frameworks sind ganz unterschiedlich angelegt und unterschiedlich komplex. Das eine Ende stellt sicher Foundation von Zurb dar, das neben vielen Layoutkomponenten wie Buttons, Tabs und so weiter auch gleich die richtigen responsiven Plug-ins für Slider, Bildergalerien und mehr mitbringt.Attraktiv ist auch die Möglichkeit, ein semantisches Raster zu nutzen. Foundation zeigt außerdem, wie man moderne Features wie box-sizing einsetzt, und motiviert einfach dazu, ein neues Projekt mit diesem großartigen Framework zu gestalten.Einen großen Funktions- und Komponentenreichtum bietet auch Bootstrap. Bei Bootstrap ist allerdings die responsive Komponente kein Kern des Frameworks.So heißt es auch explizit in der Dokumentation, bei größeren Projekten solle man die Verwendung unterschiedlicher Code-Basen anstelle von Media Queries in Erwägung ziehen. Aber trotzdem enthält Bootstrap alles notwendige für die Anpassungen an kleinere Bildschirme.Sowohl Bootstrap als auch Foundation erlauben aufgrund ihres Komponentenreichtums das rasche Prototyping und die schnelle Erstellung von attraktiven, klickbaren Layoutentwürfen. 320 and Up präsentiert eine handverlesene Auswahl nützlicher Vorgaben. Es ist ein recht persönliches Projekt und eben die Code-Basis, die Andy Clarke bei seinen Projekten immer wieder verwendet.Es bietet sich an, 320 and Up als Basis oder Vorbild für die Gestaltung eigener Frameworks zu nehmen. Less und Frameless liefern weniger Code als vielmehr eine elementare Idee für die Herangehensweise, die vor allem dann interessant ist, wenn man beispielsweise mit einem adaptiven Layout mit festen Pixelbreiten für die Spalten liebäugelt. Die Media Queries sind bei den einzelnen Frameworks unterschiedlich komplex und ausdifferenziert.320 and Up deckt mit immerhin fünf gängigen Größen eine beachtliche Palette ab. Trotzdem sollte man nie vergessen, dass sich die Layoutanpassungen nicht an gängigen Geräteklassen orientieren sollten, sondern an den Erfordernissen des aktuellen Layouts.Und muss man wirklich so viele Fälle berücksichtigen? Foundation zeigt, dass sich bei einem flüssigen Layout auch die wichtigsten Anpassungen durch eine einzige Media Query vornehmen lassen. Die Frameworks sind aber noch in weiterer Hinsicht interessant. Sie können als typische Beispiele für die Vorgehensweise im heutigen Webdesign angesehen werden: es sind keine reinen CSS-Frameworks mehr, sondern sie enthalten zusätzlich wichtige JavaScript-Komponenten. Angesagt ist ebenfalls der Einsatz von CSS-Präprozessoren, weil diese - richtig verwendet - den ersten Schritt zu besser benutzbaren und wartbaren Stylesheets darstellen.bst wiederum ist eine Sammlung von nützlichen Funktionen und Ergänzungen zu SASS. Eine schöne Erläuterung der notwendigen Schritte zur Installation von Compass finden Sie unter thesassway.com.