Mit Bootstrap ist alles besser! Oder?
Trackback URL
Wer im Web zu Hause ist, hat den Namen Bootstrap mittlerweile sicher das ein oder andere Mal gehört. Mittlerweile dürften Millionen Seiten im Netz auf dem mobile-first Framework Bootstrap basieren und auch wir bei contentXXL integrieren Bootstrap-Templates zum schnellen Aufbau neuer Portale in unser CMS. Aufgrund der vollen Kompatibilität des contentXXL CMS mit dem Bootstrap-Framework geht das schnell und einfach und – je nach Anwendungsfall – empfehlen wir die Verwendung auch unseren Partnern und Kunden.
Doch wo genau liegen die Vorteile von Bootstrap und gibt es möglicherweise auch Nachteile? Dieser Frage gehen wir im heutigen Blogpost auf den Grund.
Was bietet Bootstrap?
Wie eingangs bereits erwähnt ist Bootstrap ein Framework zur schnellen Entwicklung mobilfreundlicher Webseiten auf Basis von HTML5, CSS3 sowie JavaScript beziehungsweise jQuery. Bootstrap ist Open Source und die entsprechenden, fertigen Stylesheet-Dateien können unter http://holdirbootstrap.de/ kostenlos heruntergeladen werden. Neben dem fertigen CSS bietet Bootstrap vordefinierte HTML-Komponenten wie Navigationen, Listen, Dropdowns, Icons und vieles mehr.
Damit, so das versprechen von Bootstrap, lassen sich kleine wie große Projekte - die auf allen Endgeräten funktionieren - deutlich schneller entwickeln.
Mittlerweile haben wir selbst zahlreiche Projekte auf Basis von Bootstrap begleitet und sind zu der Überzeugung gekommen, dass es viele gute Gründe gibt, Bootstrap oder auch andere Frontend-Frameworks einzusetzen. Aber es gibt auch einige Nachteile, die einem klar sein sollten.
Darum macht die Verwendung von Bootstrap Sinn!
Enorme Zeitersparnis
Fakt ist, eine Webseite auf Basis von Bootstrap zu bauen, ist um ein Vielfaches schneller als die Seitenstruktur bzw. HTML-Templates und das CSS selbst schreiben zu müssen. Dies gilt umso mehr, als dass nicht nur das CSS sondern auch die HTML-Komponenten bereits fertig verfügbar sind.
Zudem gibt es mittlerweile zahlreiche Quellen, über die man fertige Templates beziehen kann. Einen Marktplatz für kostenpflichtige (Premium-)Templates gibt es z.B. unter https://wrapbootstrap.com/ , kostenlose Templates gibt es unter anderem unter https://startbootstrap.com/
Mit dem fertigen Template und dem vordefinierten Bootstrap CSS steht ein kompletter Webauftritt im Prinzip fertig bereit, ohne auch nur eine Zeile Markup oder Code selbst geschrieben zu haben. In der Regel umfasst dies verschiedene Layouts für Startseiten, Layouts für verschiedenste Unterseiten sowie Vorlagen für häufig benötigte Webseiten-Elemente.
Wird ein CMS verwendet, bei den meisten Unternehmen dürfte das mittlerweile der Fall sein, verursacht die Integration der Seitentemplates natürlich noch Aufwand: Templates können nicht einfach eins zu eins ins Content Management System übertragen werden. Es müssen auch die Positionen für Funktionsmodule sowie die Platzhalter für die dynamisch eingefügten Inhalte integriert werden. Die Zeitersparniss gegenüber dem individuellem Aufbau des gesamten Portals bleibt dennoch enorm, auch aufgrund des geringen Aufwands beim CSS.
Die Abbildung zeigt die Übernahme eines Bootstrap-Templates in ein CMS am Beispiel von contentXXL.: Im Wesentlichen sieht das HTML gleich aus, doch wird der auszugebende Inhalt (z.B. der Autorenname) durch entsprechende Platzhalter ersetzt. Zum Beispiel fügt der Platzhalter [Description] den Text des Blogposts ein, der Platzhalter [Author] fügt den jeweiligen Redakteur ein. Damit werden Bootstrap-Seiten dynamisch pfegbar und neue Seiten, Artikel und sonstige Inhalte können einfach ohne HTML-Kenntnsise hinzugefügt werden.
Out-of-the box mobilfreundlich und cross-browser-fähig
Das fertige CSS ist eines der großen Vorteile (und wie wir später noch erfahren, manchmal auch einer der Nachteile) von Bootstrap. Der wesentliche Vorteil liegt darin, dass das Standard-CSS von Bootstrap bereits für mobile Endgeräte und verschiedene Browser optimiert ist.
Die aufwändige Definition von Media Queries (diese steuern u.a. das Aussehen in Abhängigkeit von der Bildschirmgröße) und umfangreiche Anweisungen für einzelne Browser entfallen und auch der Zeitaufwand die Seite immer wieder auf verschiedenen Endgeräten und Browsern zu testen wird immens reduziert.
Einfach an eigene Vorstellungen anpassbar
Für jeden, der sich ein bisschen mit HTML auskennt, sind die fertigen Bootstrap-Templates sehr leicht anpassbar. Nicht benötigte Komponenten löscht man einfach raus oder man kopiert benötigte Komponenten, um Sie an anderer Stelle zu verwenden.
Wer kein fertiges Template nutzen möchte, kann sich die benötigten Elemente auch einfach selbst auf der Bootstrap-Seite zusammenstellen.
Abbildung: Für zahlreiche Webseiten-Elemente steht das HTML-Gerüst fertig zur Verfügung und braucht nur noch kopiert werden.
Hierin kann man Nachteile sehen
Neben all den Vorteilen, die Bootstrap für die Entwicklung responsiver Webseiten hat, sollte man auch über die wenigen Nachteile oder zumindest Einschränkungen Bescheid wissen.
Sehr viel CSS und JavaScript
Nicht nur das HTML-Markup von Bootstrap ist aufgrund der Vielzahl an referenzierten CSS-Klassen sehr umfangreich, generell verwendet Bootstrap sehr viel CSS und JavaScript. Zwar erfüllen die Stilvorlagen und Skripte durchaus einen Zweck, doch würden in den wenigsten Projekten wirklich alle CSS-Selektoren und alle eingebundenen Skriptdateien benötigt.
Fakt ist jedenfalls, dass die umfangreichen CSS- und JavaSkripte die Ladezeit der Webseite negativ beeinflussen. Je nach Ausmaß kann dies Nutzer verärgern oder die SEO-Performance negativ beeinflussen. Aus diesem Grund kann es sich empfehlen, die Option „Anpassen“ auf der Bootstrap Seite zu nutzen, um angepasste und auf die individuellen Bedürfnisse reduzierte Skript- und CSS-Dateien zu erhalten.
Natürlich ist dies komplexer als einfach nur ein Template und das Standard-CSS zu verwenden. Man muss sich hierzu eingehender mit dem Thema befassen. Ein Teil der Einfachheit und der Zeitersparnis wird damit zunichte gemacht.
Nicht alle Browser und Displaygrößen funktionieren immer perfekt
Auch wenn Bootstrap als mobile-first Framework konzipiert ist und damit wirbt, für alle Geräte geeignet zu sein, ist das Ergebniss nicht immer auf allen Displaygrößen optimal. Manchmal läuft dann doch der Text aus einer Box oder ähnliches. Möchte man das vermeiden, bleiben eigene Anpassungen manchmal doch nicht aus. Tendenziell ist das Ergebnis aber standardmäßig sehr gut.
Gleiches gilt für die Darstellung auf den verschiedenen Browsern. Eine Übersicht der unterstützten Browser findet man hier: http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#desktop-browsers Obwohl Bootstrap hier behauptet, Microsoft Edge zu untersützen, haben wir in Tests speziell mit diesem Browser Probleme erlebt. Aber auch in anderen Browsern treten bei eizelnen Elementen immer mal wieder „Bugs“ auf, sei es, dass ein Hover-Effekt nicht wie gewünscht funktioniert oder ähnliches. Aber Hand aufs Herz: Hätte man bei einer Eigenentwicklung alles aus dem Stand perfekt für alle Browswer gehabt?
Die meisten Seiten sehen ähnlich aus
Ist man viel im Netz unterwegs auf, fallen einen häufig starke Ähnlichkeiten von auf Bootstrap basierenden Seiten auf. Natürlich weiß der durchschnittliche Nutzer nicht, dass es sich um Bootstrap handelt und es ist auch die Frage ob den meisten Nutzern überhaupt die ähnliche Seitenaufteilungen, die ähnlichen Gestaltungselemente, die gleichen Icons usw. auffallen. Und wenn ja, wird es als negativ empfunden oder kann es fast schon als neuer Design-Trend gelten? Untersuchungen hierzu gibt es zumindest meines Wissens nicht.
Legt man als Betreiber einer Webseite jedoch wert auf ein sehr individuelles Design, dann bleiben nur umfangreiche Anpassungen an Templates und CSS oder eben der Verzicht auf Bootstrap und damit auch auf die zahlreichen Vorteile.
Alternative Frontend-Frameworks
Neben Bootstrap gibt es zahlreiche weitere Frontend-Frameworks.
Ebenfalls sehr bekannt und interessant ist Foundation. Interessant auch deshalb, weil es nicht nur Templates für Webseiten, sondern beispielsweise auch responsive E-Mail-Templates bereitstellt. Gerade das Templaten von responsiven HTML-Mails ist schwierig und erfordert entsprechendes Know-how und aufwändige Tests.
Foundation stellt verschiedene Templates, die sowohl in Outlook wie auch auf anderen wichtigen Mail-Clients funktionieren, bereit: http://foundation.zurb.com/emails/email-templates.html
Weitere bekannte Frontend-Frameworks sind zum Beispiel Skeleton, Pure und Compass.
Fazit
Egal ob mit CMS oder ohne, responsive Frontend-Frameworks, können die Erstellung mobilfreundlicher Seiten deutlich erleichtern. Auch aus diesem Grund haben wir die Integration von Bootstrap in contentXXL so einfach wie möglich zu gestaltet und stellen entsprechende Seiten- und Modultemplates fertig bereit. Neben den vielen Vorteilen, gibt es jedoch auch ein paar Nachteile, die man für seine Entscheidung zumindest kennen sollte.
Lassen Sie uns wissen, was Sie denken...