Springe zur HauptnavigationSpringe zum HauptinhaltSpringe zu den Kontaktdaten und SupportSpringe zum Footer
Blick auf die Frauenkirche Dresden

Webdesign Blog

Webdesign im Fokus

Tipps aus der Praxis, für die Praxis

Profitieren Sie von unseren gesammelten Erfahrungen. Machen Sie es gleich richtig.

TYPO3 Association Bronze MemberTYPO3 CMS Certified Integrator (TCCI)

Webseiten komfortabel entwickeln mit Bootstrap

Mit dem Framework Bootstrap lassen sich Webseiten zeitsparend als responsive Webdesign erstellen.

Onepager planen und erstellen mit TYPO3

Webseiten komfortabel entwickeln mit Bootstrap

Welche Elemente es von Bootstrap gibt und für welchen Zweck sie sich einsetzen lassen.

TYPO3 Association Bronze MemberTYPO3 CMS Certified Integrator (TCCI)

Nicht jedes Element auf der Website muss von Grund auf neu programmiert werden. Mit Bootstrap erhalten Sie kostenfreien Zugriff auf eine Bibliothek unterschiedlicher Elemente, die sich hervorragend in der Praxis einsetzen lassen und für responsive Webdesign eignen. Bootstrap hat die Arbeit bereits für Sie erledigt.

Wer sollte Bootstrap kennen?

Bootstrap erleichtert die Arbeit für Webentwickler und Webdesigner mit einem umfangreichen Baukasten an vorgefertigten Elementen.

Was ist Bootstrap und welchen Vorteil bietet es?

Twitter Bootstrap wurde von Twitter entwickelt und wird als Freeware zur Verfügung gestellt. Im Umfang befinden sich Gestaltungselemente für die Website wie Buttons oder Container. Auf diese Weise muss nicht jeder Website-Programmierer seinen eigenen Fundus an Buttons, Containern, Menüs, Headern und Footern programmieren, sondern greift komfortabel auf vorgefertigte Elemente zurück. Die Zeit wird stattdessen für die Entwicklung der Website genutzt, um Logik, Struktur, SEO und die Marketingziele der Website in der Programmierung umzusetzen. 

Die vorhandenen Elemente sind von Profis für den Einsatz in der Praxis entwickelt und optisch ansprechend. Zusätzlich enthält Bootstrap Javascript-Funktionen und Animationen, Kalender und Popups.

Woher kommt Bootstrap?

Twitter hatte die Idee, für sich selbst einen Baukasten mit vorhandenen Bausteinen zu entwickeln. Ziel war die Einheitlichkeit im Auftritt und eine Arbeitsersparnis für die Programmierer. Intern wurde die Umsetzung sehr gut aufgenommen und man entscheid sich, die Ergebnisse als Open Source zur Verfügung zu stellen.

Wie ist der Look and Feel von Bootstrap?

Wenn die Elemente in Bootstrap ursprünglich für Twitter genutzt wurden und Sie diese Elemente verwenden, sieht Ihr Webdesign dann wie Twitter aus? Nein, Bootstrap wird häufiger eingesetzt, als man denkt.

Bootstrap als Frontend-Web-Framework

Die grafischen Oberflächen aus Bootstrap können für die Erstellung von Webprojekten kostenlos genutzt werden. Grafische Elemente brauchen nicht mehr selbst entwickelt zu werden, sondern werden einfach von Bootstrap heruntergeladen und vor dem Einsatz ggf. angepasst. Die gestalterischen Elemente bedienen mit einer breiten Palette eine Vielzahl von Anwendungen.

Welche Designvorlagen enthält Bootstrap und lassen sie sich anpassen?

Bootstrap enthält Designvorlagen für HTML, CSS und Javascript. Prominent hervorgehoben werden in Beschreibungen von Bootstrap meist die Buttons und Schaltflächen. Bootstrap beinhaltet aber mehr. Sehr praktisch ist eine Navigationsleiste für das Menü. Weniger bekannt ist, dass Bootstrap auch Typographie und Vorlagen für Formulare liefert. Ebenfalls Elemente als Cards, Panels, Alerts und Badges.

Die Elemente sind bereits für verschiedene Browsern optimiert, so dass sich beim Besuch der Website trotz unterschiedlicher Browser ein einheitliches Erscheinungsbild ergibt. Die einzelnen Vorlagen können in der Größe verändert und auf Spaltenbreite gebracht werden. Auf diese Weise lassen sich die vorgefertigten Bootstrap-Definitionen an das Corporate Design der Website anpassen.

Weitere Gestaltungsmöglichkeiten über Bootstrap

Großflächige Gestaltungselemente wie Slideshows für Bilder lassen sich ebenfalls mit Bootstrap gestalten. Um Kundenkommentare zu ermöglichen, werden Dialogboxen angeboten. Die Navigation über Tabs wird unterstützt. Bootstrap bietet ebenfalls vertikale Akkordeons an.

Bootstrap unterstützt responsive Webdesign

Als Webdesigner wissen wir alle um die Bedeutung von responsive Webdesign für die Usability und das SEO. Die Gestaltungselemente von Bootstrap lassen sich in ein responsive Webdesign einbinden und werden auf den Endgeräten passend dargestellt.

Vorteile von Bootstrap

  • Durch die Nutzung vorbereiteter Elemente geht die Arbeit schneller von der Hand.
  • Die Gestaltungselemente lassen sich problemlos in TYPO3 und viele andere Systeme einbinden.
  • Bootstrap ist hervorragend dokumentiert. Bei Fragen erhält man Unterstützung durch eine große Community.
  • Als Open Source-Angebot ist Bootstrap kostenfrei.

Aber es gibt auch Nachteile

  • Der Quellcode ist recht umfangreich.
  • Für die Nutzung von Bootstrap sind trotzdem CSS-Kenntnisse erforderlich.
  • Falls die vorhandenen Elemente individualisiert werden sollen, müssen die CSS-Eigenschaften meist überschrieben werden. Der Aufwand muss ins Verhältnis gesetzt werden zu der Arbeitsersparnis beim Verwenden vorgefertigter Elemente. Kommt darauf an, wie fit Sie in CSS sind und wie routiniert Sie im Umschreiben werden.

Komponenten von Bootstrap

Icons und Glyphicons

Bootstrap ist u.a. für Icons bekannt geworden. 1.200 Icons stellt Bootstrap bereit, die sich als SVGs, SVG Sprite oder Web Fonts einbinden lassen, bereichert um 250 Glyphicon Halflings im Font Format.

Dropdown-Menüs

Mit Dropdown-Menüs lassen sich Untermenüpunkte aufklappen, um eine Auswahl von Links anzuzeigen. Durch das Java-Script Plugin werden sie interaktiv. Dropdown-Menüs müssen gezielt angeklickt werden. Das Menü wird nicht durch ein Mouseover angezeigt. Das bringt mehr Ruhe auf die Website.

Button-Gruppe

Mehrere Buttons können seitlich oder vertikal über JavaScript bündig aneinandergereiht werden. Ein schönes Gestaltungselement für die Website.

Button Dropdown

Die Buttons selbst können wiederum als Ausklappmenü verwendet werden. Durch den farbigen Button mit den abgerundeten Ecken und dem darunter befindlichen Aufklappmenu ist das Menü nicht nur sehr übersichtlich, sondern schaut auch hochwertig aus.

Eingabefelder / Input-Gruppen

Formulare zur Steuerung von Eingaben lassen sich flexibel gestalten: Text, Schaltflächen oder Schaltflächengruppen können auf beiden Seiten der Eingabemaske platziert werden.

Navigation / Navbar

Fertige Navigationsleisten, die die Einbindung eines Logos erlauben und ausklappbare Akkordeons unterstützen.

Breadcrumps

Die aktuelle Position, an der sich der Besucher der Website befindet, wird inkl. Navigationshierarchie und automatisch über CSS eingefügte Trennzeichen angezeigt.

Seiten-Nummerierung

Über die Paginierung hinaus kann auch der Inhalt verwandter Seiten angezeigt werden.

Labels

Die in den Text eingebundenen Labels erreichen hohe Aufmerksamkeit und sind im gleichen Design wie die Buttons gestaltet. So ergibt sich ein harmonisches Gesamtbild.

Badgets

Die von Bootstrap bereitgestellten Badges können an die Größe des übergeordneten Elementes, zum Beispiel des Textes, angepasst werden.

Jumbotron

Die Größe zählt, dachten sich wohl die Bootstrap-Entwickler und nannten die plakative Komponente prompt Jumbotron. Wenn Sie gern das Produkt als einen Star inszenieren, finden Sie hier die passende grafische Plattform für den Hauptdarsteller.

Tabellen

Kleine aber auch großflächige Tabellen können mit Bootstrap abgebildet werden. Die Tabellenköpfe können als Kopfzeile und auch in der ersten Spalte angeorndet und gegenüber dem eigentlichen Inhalten der Tabelle (den Zellen) optisch hervorgehoben werden. Jede zweite Zeile kann mit einer Hintergrundfarbe versehen werden und so eine Steifenoptik für die Tabelle gewählt werden. Auch bunte Darstellungen sind geeignet, um über die Auswahl der Farbe einen Zusammenhäng mit anderen Inhalten herzustellen. Feine senkrechte oder waagerechte Trennlinien und Hervorhebungen innerhalb der Tabelle sind möglich.

Überschriften

Für prägnante Überschriften bietet Bootstrap die passende Typographie an.

Vorschaubilder / Thumbnails

Thumbnails lassen sich komfortabel in eine Umgebung einbetten und ragen in der Größe und Breite nicht über ihr Umfeld hinaus. Besonders angenehm im Hinblick auf responsive Design.

Warnhinweise / Alerts

Mit im Programm sind bei Bootstrap vorgefertigte kontextbezogene Alerts, die zu bestimmten User-Aktionen passen. Selten sah eine Warnung besser aus.

Verlaufsanzeige

Die Progress Bars/Fortschrittsbalken lassen sich stapeln, beschriften und die Hintergründe animieren.

Media Objekte

Vorlagen für Komponenten wie Blog-Kommentare und – natürlich – Tweets.

Listengruppe

Manchmal werden Aufzählungen umfangreicher und sind mit einer einfachen Liste nicht mehr zu bewältigen. Mit Bootsrap lassen sich Listengruppen - also mehrere Listen nebeneinander - anlegen. Gut, um verschiedene Aspekte eines Themas in Kurzform zu beleuchten oder Varianten übersichtlich zu vergleichen.

Panels

Vereinfach gesagt beschriftete Felder mit Rahmen ringsherum. Interessant, um Content zu strukturieren. Verschiedene Aspekte eines Themas können mit Panels in gut verdauliche kleinere Häppchen zerlegt werden. Zudem bietet der Header des Panels die Möglichkeit einer Farbkodierung. Die Variante als Footer ist ebenfalls möglich.

Embeds

Mit Bootstrap lassen sich Inhalte wie Videos und Diashows elegant einbetten. Das Format orientiert sich an der Breite des übergeordneten Elements – wichtig für responsive Webdesign.

Wells

Mit diesem Element wird ein Panel inkl. grauem Hintergrund erzeugt. Dies soll im Layout den Eindruck von etwas mehr Tiefe erzeugen.

Berücksichtigt Bootstrap die Barrierefreiheit?

Bootstrap ist bereits von hausaus sehr auf die Anforderungen der BITV orientiert. Mit geringem Aufwand lassen sich die Bootstrap Elemente so anpassen, dass die Website barrierefrei ist.

Navigation überspringen: Blinde Besucher der Website lassen sich die Website von einem Screenreader vorlesen und bedienen die Website über Tasten. Deshalb muss auch die Navigation über Tasten bedienbar sein. Am Anfang der Website sollte deshalb ein „skip navigation link“ angeboten werden, damit der Hauptinhalt sofort angesprungen werden kann.

Farbkontraste: Personen mit Farbsehschwäche können einige Farben nicht wahrnehmen oder von anderen unterscheiden. Beispiel: Pink wird als Grau wahrgenommen. Wenn Sie sichergehen wollen, verwenden Sie bei Ihrem Webdesign Elemente mit hohem Kontrast wie schwarz/weiß.

Verschachtelte Überschriften: Hier gilt das, was Sie grundsätzlich berücksichtigen sollten: Die Hauptüberschrift sollte als H1 bezeichnet werden, Subheads als H2 usw. Die Ebenen sollten nicht zu tief führen. Was tief verschachtelt ist, wird von der Suchmaschine als weniger wichtig interpretiert.

Warum sollte man Bootstrap nutzen?

Bootstrap stellt eine solide Grundlage an Elementen dar, die von einem engagierten Team direkt für die Anwendung in der Praxis entwickelt wurde und als Open Source kostenfrei bereitgestellt wird.

Die Elemente haben ihre Erprobungsphase hinter sich. Bootstrap hat sich als ein gern eingesetzter Standard etabliert. Läuft man dadurch als Webentwickler Gefahr, dass die programmierten Seiten alle gleich aussehen?

Diese Gefahr besteht nicht. Bootstrap bietet lediglich einen Teil der Gestaltungselemente an, die einer Website Gesicht geben, aber nicht alle. Das geübte Auge des Webentwicklers erkennt die Buttons, die nach Bootstrap aussehen, der Auftritt einer Website wird jedoch noch von anderen Gestaltungselementen bestimmt. In der industriellen Fertigung ist es völlig OK, bewährte Standards anderer Hersteller zu nutzen. Für die Fertigung eines Pkws werden die Teile von Tausenden Lieferanten verbaut.

Gibt es Alternativen zu Bootstrap? Ja, googeln Sie bitte mit den Suchbegriffen „bootstrap alternatives“.  

Unsere Erfahrungen: Bootstrap und TYPO3

Welche Erfahrungen haben wir mit Bootstrap und TYPO3 gemacht? Wir entwickeln Webseiten bevorzugt mit dem CMS TYPO3 von der Konzeption über die Struktur bis hin zur fertigen Website inkl. Anbindung an das Hosting. Wir bauen Webseiten komplett neu auf, erweitern und optimieren sie. Von daher sehen wir ein breites Spektrum in der täglichen Praxis. Bootstrap lässt sich prima in eine TYPO Umgebung einbetten und ist für dieses CMS empfehlenswert.

Fazit

Bootstrap stellt eine solide Grundlage für das Frontend selbst entwickelter Webseiten dar: Viele Komponenten wie Tables, Grids und Modals, mit denen sich Webseiten leicht erstellen lassen, sind bereits im Baukasten vorhanden. Sie sind flexibel einsetzbar und brauchen nicht erst selbst geschrieben zu werden.

Die Elemente von Bootstrap passen sich in der Größe dem übergeordneten Umfeld an: ein großer Vorteil für responsive Design. 

Die Gestaltung der Elemente von Bootstrap ergibt ein einheitliches Erscheinungsbild auf der Website. Weitere Funktionen für die Website können auf dem Gerüst von Bootstrap aufgebaut werden.

Noch mehr Informationen zu Botstrap?

Weitere Informationen zu Bootstrap. Dem beliebtesten Framework mit HTML, CSS und Javascript für die Entwicklung von anpassungsfähigen und moderne Websites.

Wissenswertes rund um das Thema Webdesign ...

Webdesign im Fokus - wissenswerte Informationen rund um Ihre Homepage. Lesen Sie hier alle wichtigen Informationen zu Webdesign und Suchmaschinenoptimierung.

TYPO3 Camp Mitteldeutschland 2020

TYPO3 Camp Mitteldeutschland 2024

TYPO3 Camp Mitteldeutschland 2024 in Dresden: Innovation, Vernetzung, Inspiration. Seien Sie dabei! #t3cmd

Barrierefreie Website: Ein Leitfaden für mehr Engagement

Planung einer barrierefreien Website

Barrierefreiheit erweitert Ihr Publikum, verbessert die Nutzererfahrung und stärkt Ihre Marke – ideal für Marketing-Experten, die mehr erreichen…

Analyse und Konzeption von Webseiten und Homepages

Erfolg durch Performance und Barrierefreiheit mit TYPO3

Erfahren Sie, wie TYPO3 Caching und Responsive Design die Ladezeiten verbessern, die SEO steigern und die Konversionsraten erhöhen.