Web & Mobile

Responsive und modern Design mit Bootstrap

Ein ansprechendes Design auf möglichst allen Endgeräten zu erreichen ist eine der größten Herausforderungen bei der Entwicklung von Webanwendungen. Vor allem der Boom der mobilen Geräte und die damit verbundenen verschiedenen Bildschirmgrößen und Auflösungen erschweren dies.

Mithilfe des von Twitter erschaffenen CSS-Frameworks Bootstrap soll dieses Problem möglichst einfach gelöst werden. Es bietet Komponenten, welche zur Entwicklung moderner Websites geeignet sind und dabei die technischen Anforderungen von verschiedenen Geräten berücksichtigen.

Bootstrap Design

Der Einstieg in Bootstrap gelingt sehr leicht, da es klar strukturiert aufgebaut ist. Der Kern besteht aus verschiedenen Stylesheets (CSS), welche die im Framework vorhandenen Elemente einbeziehen. Über eine globale Konfigurationsdatei kann der Entwickler bestimmen, welche Komponenten er verwenden will. Die zahlreichen Komponenten können vom Entwickler je nach Wunsch angepasst werden. Dabei werden entweder eigene Styles oder verschiedenste vorgefertigte „Themes“ verwendet. Wenn Sie Bootstrap für die Entwicklung Ihrer Website in Betracht ziehen, sollte Ihnen allerdings bewusst sein, dass die vorgegebenen Komponenten zwar individualisierbar sind, jedoch immer ein "Bootstrap-Touch" sichtbar sein wird. Als gutes Beispiel für die sehr ansprechenden Designs, die erreicht werden können, kann unter anderem Twitter herangezogen werden.

Responsive Design

Eine weitere Stärke von Bootstrap liegt in der Entwicklung von responsive Designs. Mit anderen Worten, das Design Ihrer Website passt sich perfekt an die Eigenschaften der verschiedenen Displays ihrer Benutzer an. Egal ob auf dem Desktop, auf Smartphones oder Tablets - das „mobile first grid system“ zielt auf eine bestmögliche Darstellung auf allen Endgeräten ab. Die Idee ist, das Design zuerst für kleine Bildschirme (z.B. Smartphones) zu entwickeln. Anschließend werden die Komponenten und deren Anordnungen auf größere Bildschirme erweitert.

Browserunabhängigkeit

Bootstrap wurde mit Augenmerk auf das damals noch relativ junge HTML5 und CSS3 entwickelt, um so von den aktuellsten Funktionsmöglichkeiten profitieren zu können. Bei der Entwicklung wird auf das Konzept der progressiven Verbesserung gesetzt, was maximale Browserkompatibilität zur Folge hat. Bootstrap 3 und die damit verbundenen neuesten Funktionen sind zwar nicht mehr mit allen Browsern kompatibel (< IE7, < FF 3.6), Bootstrap 2 wird aus diesem Grund aber weiterhin aktualisiert und unterstützt. Konkret bedeutet dies, dass die grundlegenden Informationen der Website für alle Geräte und Browser zugänglich sind, erweiterte Funktionalitäten jedoch nur den Geräten und Browsern zur Verfügung stehen, die diese auch unterstützen. Deutlich wird dies beispielsweise bei den in CSS3 eingeführten Eigenschaften für abgerundete Ecken, Farbverläufe und Schatten.

Das Front-End-Framework wird übrigens als Open Source Projekt betrieben und ständig vorangetrieben. Es handelt sich um das populärste Projekt beim Hostingdienst GitHub. Wer also auf Bootstrap setzt, der kann sicher gehen, auf dem neuesten Stand zu sein.

Fazit

Twitter Bootstrap eignet sich für alle, die möglichst schnell eine schön anzusehende Website entwickeln wollen, welche dazu auf verschiedenen Gerätetypen dargestellt werden soll. Sowohl Einbindung als auch Verwendung funktionieren makellos. Ein weiterer Vorteil ist, dass Bootstrap problemlos mit anderen Webtechnologien wie etwa jQuery (siehe News Q2.2014) kombiniert werden kann. Ob sich das Front-End-Framework für Sie eignet, hängt auch von der Art Ihrer Website ab. Sehr individuell gestaltete Seiten können eher schwer entwickelt werden, da das Design zu einem gewissen Grad an Bootstrap gekoppelt ist. Für einen Großteil von Websites ist die Verwendung jedoch durchaus eine Überlegung wert.

Bei Interesse können Sie sich auf http://builtwithbootstrap.com/ Beispiele ansehen, die mithilfe von Bootstrap entwickelt wurden.

Autor: Dominik Prilmüller, Web- und Software Developer