Mit dem Siegeszug mobiler Geräte wurden Entwickler vor die Herausforderung gestellt, Websites für Bildschirme verschiedenster Formate zu entwickeln. In den vorhergehenden Teilen dieser Serie wurden Lösungsansätze und die richtige Herangehensweise besprochen, doch nun ist es an der Zeit, einen Blick auf die Umsetzung aus technischer Sicht sich zu gewähren.

Wie so oft, ist man als Entwickler hier vor die Wahl gestellt, allein auf die vom W3C bereitgestellten Tools (HTML, CSS3 & Media Queries) zurückzugreifen, oder - wie auch in anderen Bereichen der Webentwicklung üblich - auf raffinierte Tools der Open Source-Community - sogenannte Frontend Frameworks - zurückzugreifen. Ich werde hier einen kurzen Überblick auf die Vorzüge dieser letzten Option gewähren.

Warum Frameworks?

2011 war das Jahr der RWD-Frameworks. Twitter veröffentlichte sein Framework „Bootstrap“ in der ersten Version und auch „Zurb stellte sein „Foundation“ Framework zur Verfügung. Funktionell haben sich beide in den letzten Jahren bis auf kleine Unterschiede inzwischen angeglichen: Beide verfolgen eine Mobile-First Strategie und liefern standardmäßig ein 12-Column Gridsystem mit stufenweise definierbaren Breakpoints für verschiedene Bildschirmgrößen. Auch bieten beide häufig verwendete Elemente wie Buttons, Navigation und Carousel, teilweise bereits mit den nötigen JavaScript Plugins. Beim Download bieten beide diverse Anpassungsoptionen und die Option, nur benötigte Module zu inkludieren. So lassen sich die sonst recht umfangreichen Frameworks einfach auf das Notwendigste reduzieren.

Während andere Frameworks teils noch minimalistischer sind oder den Fokus auf andere Anwendungsbereiche legen, bieten Bootstrap und Foundation das breiteste Spektrum und die größte Userbasis - So war Bootstrap im Juni 2014 das größte Projekt auf der bekannten Open Source-Plattform „GitHub.

Bootstrap

Mit über 9000 Commits, 560 Contributors und über 25.000 „Forks“ zählt Bootstrap zu den aktivsten Projekten auf der Open Source-Plattform „GitHub“.

Doch welche Vorteile bieten sich Entwicklern, wenn sie auf eines dieser Frameworks zurückgreifen?

Schnelles Prototyping

Durch das simple Gridsystem und vorgefertigte Elemente wie Buttons und Navigationen lassen sich schnell simple Prototypen entwickeln. Diese Prototypen können so schnell der finalen Website strukturell angeglichen werden, ohne viel Zeit in das Schreiben von Styles, die sich meist bei selbst auf den ersten Blick komplett unterschiedlichen Strukturen wiederholen, zu stecken.

Anpassbar und Erweiterbar

Sowohl mit dem „Builder“ als auch anschließend in den Stylesheets im SASS-Format (eine Stylesheet-Sprache, die CSS-Dateien um einige Funktionen erweitert und zu solchen kompiliert werden kann) - für Bootstrap das funktionell ähnliche LESS - lässt sich das Aussehen der Grundelemente auch nachträglich noch ändern. So kann man schnell den Prototyp an das eigentliche Design anpassen. Eigene Styles können unabhängig definiert werden, auch hat man mit SASS und LESS die Möglichkeit, im Framework definierte Variablen wie Farben und Breakpoints zu verwenden, um eine konsistente Struktur aufzubauen, die nachträglich noch durch das Setzen von Variablen global verändert werden kann. So stellt man sicher, dass auch wirklich alle Elemente zur selben Zeit umbrechen, auftauchen oder sich verändern.

Sauber strukturiert, wiedererkennbar und regelmäßig gewartet

Diese Frameworks wurden über die Jahre weiterentwickelt und verbessert. So ist man also sicher, stets aktuellsten Standards und „best practises“ in dieser sich stets im Wandel befundbaren Branche zu erfüllen. Durch die vorgegebene Struktur des Grid Layouts und anderer Elemente wird gesichert, dass sich diese Standards durch das ganze Projekt ziehen und somit auch von Entwicklern, die mit diesen Frameworks vertraut sind, schnell nachvollzogen und weitergeführt werden können.

Bootstrap2

Responsive Web Design leicht gemacht: Bootstrap liefert die gängigen „Breakpoints“ als simple Klassen - Plug & Play.

Moderne Standards wie ein „Mobile First“-Ansatz sind von Haus aus vorgegeben, umgebungsspezifische Probleme können so verhindert werden oder sind gut dokumentiert und mit einer Vielzahl an Lösungsvorschlägen aus der Community einfach lösbar.

Kompatible Komponenten

Ein Großteil der Frameworks belässt es nicht nur bei den grundlegenden strukturellen Elementen, sondern liefert optional weitere Komponenten mit, die in einer Vielzahl von Projekten Verwendung finden. Sie sind einfach kombinierbar, um neue Komponenten zu kreieren. So lassen sich z.B. bei Bootstrap schnell ein Modal und ein Carousel zu einer Lightbox verbinden. Diese Komponenten kommen von Haus aus bereits mit einem Styling, können nach Abschließen des Prototypen jedoch noch beliebig angepasst werden.

Gut Dokumentiert

Generell kommen die Frameworks meist mit einer ausführlichen Dokumentation. Dank einer aktiven Community sind zu den häufigsten Problemen zahlreiche Lösungsvorschläge verfügbar. Das Lesen dieser Dokumentation hilft nicht nur zum Verständnis der Frameworks und deren Funktionalität, sondern bietet auch ein tief gehendes Verständnis der Prozesse und Strukturen im Hintergrund. So wird ein Entwickler, dem Frameworks wie Bootstrap geläufig sind, auch problemlos ohne deren Hilfe Responsive Websites entwickeln können.

Fazit

Als Entwickler streben wir stets danach, Redundanzen zu vermeiden. Potentielle Fehlerquellen durch repetitive Prozesse, die in der Umsetzung von responsiven Webseiten häufig auftreten können, lassen sich mit dem Einsatz eines Frameworks einfach vermeiden - so bleibt mehr Zeit fürs Detail.