Immer mehr Menschen erkunden das Web auf mobilen Endgeräten wie Smartphones oder Tablets. Hierdurch entsteht ein Problem für die Webentwickler: Um Unleserlichkeiten wie zu kleine und unangepasste Schrift oder ewiges Hin- und Herscrollen auf den Bildschirmen zu vermeiden, muss das Design der Website ein flexibles Format besitzen, damit der Content sofort und leicht zu finden ist und sich dabei möglichst ansprechend präsentiert. Hier stellen wir drei der aktuell wichtigsten Frameworks vor und zeigen Vor- und Nachteile auf.
Bootstrap 3
Das wohl bekannteste Responsive CSS Framework ist das von Twitter entwickelte Bootstrap. Erstmals im Jahre 2010 designt, ist seit einiger Zeit die mittlerweile dritten Version dieses umfassenden Tools erhältlich. Bootstrap supportet so gut wie alle gängigen Browser auf den unterschiedlichsten Betriebssystemen und arbeitet mit Fluid Grids. Dabei enthält es viele Widgets und ist gut geeignet für einen schnellen Einsatz „out of the box“. Mittlerweile wurde in Bootstrap 3 in der aktuellsten Version 3.2 das „mobile-first“-Prinzip als Schwerpunkt gewählt, bei dem sich bewusst der Platzmangel der kleineren Bildschirme von mobilen Endgeräten zunutze gemacht und sich auf ein reduziertes und übersichtliches Design sowie Beschränkung auf die wichtigsten Inhalte konzentriert wird. Darüber hinaus wurden größere und kleinere Weiterentwicklungen sowie diverse Bugfixes zur Vorgängerversion vorgenommen: so enthält das Framework nun eine Erweiterung um eine einzelne Fluid Grid mit Klassen für Smartphones, Tablets und Desktops. Auch kann der Service des Drittanbieters ZeroClipboard – Copy Docs Snippets – verwendet werden, um schnelleres Copy & Paste für Code Snippets zu ermöglichen. Außerdem enthält Bootstrap 3.2.0 eine sogenannte „Wall of Browser Bugs“, indem das Framework bekannte Bugs der verschiedenen Browser umgeht und aushebelt.
Die Vorteile
- schnelle und einfache Installation
- viele UI-Widgets für den Gebrauch „out of the box“
- inklusive Fluid Grid System
- vereinheitlicht die Benennung der Klassen und id’s
Die Nachteile
- recht hoher Codeanteil, daraus resultieren größere Datenmengen
- unflexibel: man tendiert dazu immer selbe Layouts zu designen
- individuelle Anpassungen sind relativ schwierig umzusetzen bzw. erfordern fundierte Kenntnisse des Bootstrap Codes
- begrenzte Skalierbarkeit
Foundation 5
Das von dem Produktdesignerteam ZURB entwickelte CSS Framework Foundation geht seit diesem Jahr nun mehr in die fünfte Runde. Auch dieses Framework arbeitet mit Fluid Grids, ist aber das am besten geeignetste Tool bei Class Grids über alle Anzeigebereiche (Viewports) hinweg. Dabei präsentiert sich Foundation 5 bei den UI-Tools als starkes Modulset, welches dem User mehr Freiheiten in der Gestaltung seines Designs gibt als der große Konkurrent Bootstrap, auch wenn mittlerweile beide die freie Javascript-Bibliothek jQuery als Grundlage ihrer Designs benutzen.
Foundation 5 unterstützt alle gängigen Browser auf allen Systemen – Abstriche muss man allerdings bei IE’s älter als Version 9 machen. Vergleicht man Foundation v4 mit der aktuellsten Version 5.2.2 schneidet der derzeitige Release mit einer deutlich verbesserten Performance und Effektivität ab. Dies resultiert aus dem zu diesem Release einhergehenden Wechsel von Zepto zu jQuery 2. Diese Änderung und die Hinzunahme von fastclick.js verbessert die Performance für Desktop- wie auch Mobile-User. Darüber hinaus wurden für ein schnelleres Prototyping neue Templates und für die Stylesheetsprache Sass das Add-On Libsass hinzugefügt.
Die Vorteile
- schnelle und einfache Installation
- inklusive Fluid Grid System
- bis zu 16 Spalten möglich
- individuelle Anpassungen gehen leichter/schneller
Die Nachteile
- kein Support für ältere IE Versionen (älter als Version 9)
- Größenangaben sind nicht in Pixeln, sondern in „rem“ (was den meisten sicherlich fremd ist)
- nur wenige Möglichkeiten für die Entwicklung und Gestaltung Formularen
Skeleton
Im Vergleich zu seinen beiden großen Kontrahenten ist Skeleton wesentlich grundlegender, aber auch einfacher aufgebaut. So sind die Grids fixed und die UI-Tools nicht so umfangreich wie bei Boostrap oder Foundation. Skeleton wirkt in seiner Syntax daher dem Grid-System 960.gs ähnlich. Passend zum Namen ist diese limitierte Simplizität aber so gewollt, um auch dem Laien ein kompetentes und zugleich übersichtliches Werkzeug in die Hände zu legen. Das CSS Framework unterstützt in der Desktop-Version Chrome, Firefox, Safari und IE7+ und in der Mobile-Variante das iPhone, Android und iPad.
Leider ist die Trickkiste bei Skeleton nicht nur begrenzt, sondern auch teilweise mit falschem Zauber versehen: die Überlegungen zum Thema Responsive Framework erscheinen nur als Anhängsel. Es stapeln sich keine Tabs in der mobilen Version oder kleine, auf 16-Coloumn-Grids transferierte 1-spaltige Bilder belegen den vollen Bildschirm im 2-spaltigen Layout. Die Schnellhilfe irrt sich in puncto Nutzung von geschachtelten Spalten: so wird .row für mehrere beinhaltete Reihen genutzt, obwohl der Support .coloumns für Alles angibt – wobei auch .row nicht automatisch eine Lösung für eine Verschachtelung ist.
Die Vorteile
- schnelle und einfache Installation
- geringer Code (sehr wenig Datenmenge)
- maximale Individualisierbarkeit
- ideal für die Entwicklung von schnellen Prototypen
Die Nachteile
- nur wenige UI-Widgets „out of the box“
- keine Unterstützung von less und sass
- allgemein ein paar Bugs im Code
Abschließend hier noch eine ausführliche Auflistung mit den Features der einzelnen Responsive CSS Frameworks.