Next AG
Blog
Homepages, Websites, SEO, SEM

CSS-Framework Bootstrap

Grob umschrieben beinhaltet ein CSS-Framework einen Layout-Grundraster und diverse Gestaltungselemente für standardisiertes Webdesign mit CSS. Die Next AG setzt seit längerem das Framework Bootstrap ein, welches Dank seiner hohen Verbreitung mittlerweile quasi als Industriestandard gilt (in Prozenten: Design Framework usage in Switzerland). Bootstrap, ursprünglich für die interne Verwendung bei Twitter entwickelt, verdankt seinen Erfolg nebst dem responsiven Layout-Grundraster einer umfassenden Bibliothek an User-Interface-Komponenten, welche sich leicht implementieren lassen und schlussendlich Zeit sparen.

Vorteile von Bootstrap

Bootstrap bringt nebst seinem strukturierten Aufbau vordefinierte Begrifflichkeiten mit, welche viele grundlegende Arbeiten erleichtern und beschleunigen. Anstatt auf der grünen Wiese zu starten, kann in einer erweiternden und adaptierenden Arbeitsweise an Projekte herangegangen werden. Dies wirkt sich unter anderem positiv auf die Schnittstelle zwischen Design und Entwicklung aus, da von vornherein Konsens darüber besteht, wie eine responsive Website in seinen Grundzügen aufgebaut werden soll.

Bootstrap unterstützt die Entwicklung nebst dem responsiven Layout-Grundraster mit seinem konsistenten User-Interface. Dieser Vorteil greift insbesondere dann, wenn grafische Layout-Vorgaben nicht bis auf die Komponenten-Detailebene abtauchen.

Bootstrap stellt zudem sicher, dass die Darstellung browserübergreifend stimmig ist. Dieser Vorteil erspart zeitaufwändiges optimieren für ältere Browserversionen.

Weiter fördert Bootstrap Konsistenz bei der Entwicklung von Websites im Sinne dessen, dass Templates gleich aufgebaut und in eigenen Erweiterungen die Bootstrap-Begrifflichkeiten und Struktur weiterverwendet respektive ergänzt werden können. Dieser Punkt wirkt sich einerseits positiv auf einzelne Projekte aus, bietet andererseits aber auch Vorteile, wenn Dritte in ein Projekt involviert werden oder mit Templates von Drittanbietern gearbeitet wird da alle auf derselben Basis aufbauen, welche im Übrigen sehr gut dokumentiert ist.

Einen weiteren grossen Vorteil bietet die grosse Community welche Templates, neue Komponenten, Plug-Ins und Know-How zur Verfügung stellt.

Nachteile von Bootstrap

Standardisierung schränkt ein, insbesondere die Designfreiheit. Böse Zungen behaupten, eine auf Bootstrap basierende Website sei auf den ersten Blick erkennbar. Dies mag stimmen und für Projekt mit hohem Design- und Innovationsanspruch ist die Individuallösung einem Framework vorzuziehen. In den meisten Fällen zeigt sich aber, dass Layout und Framework in keinem Widerspruch zueinander stehen.

Als Nachteil wird häufig auch die zu Grunde liegende Codebasis erwähnt, welche in der Regel mehr enthält als tatsächlich verwendet wird. Da Bootstrap konfigurierbar ist, lassen sich einzelne nicht benötigte Komponenten ausschliessen. Es kann hartnäckig behauptet werden, dass dies noch nicht genügend weit gehe. Stellt man jedoch die Effizienz des Frameworks einer handgemachten bit- und byte-effizienten Lösung gegenüber, so spricht der Zeitvorteil in der Regel für die Verwendung eines Frameworks wie Bootstrap.

Ein typisches und ein weniger typisches Beispiel

Appadu – Longstay Appartments

Eine klassische Bootstrap-Website: Das Layout ist auf das Layout-Grundraster von Bootstrap abgestimmt und die eingesetzten Elemente, abgesehen von der Navigation, wurden mit bereits vorhandenen Bootstrap-Komponenten umgesetzt (Formular, Buttons, Akkordeon).

Appadu

appadu.ch

abilio

Ein Beispiel für Individualismus. Die Website informiert über das SOB-Projekt abilio, welches den Reisenden mit der abilio-App einen Buddy zur Seite stellt und interessierten Verkehrsunternehmen die abilio-Vision näher bringt.

Ein individueller Designstil verlangt nach individuellen Massnahmen. Viele Elemente wurden individuell angefertigt. Das CSS-Framework Bootstrap dient hier mit seinem Layout-Grundraster, den grundlegenden Definitionen für Farben, Typografie, Buttons und Formularfelder als Fundament. Zudem konnten die Akkordeonelemente 1:1 zum Einsatz gelangen.

abilio