Kolumne: Dino talks

Bootstrap: Responsive Layouts und Bilder
Kommentare

Twitter Bootstrap fällt das Verdienst zu, eine neue Systematik von HTML-Elementen zu definieren, die Benutzer in modernen Seiten erwarten und die Entwickler dementsprechend entwickeln müssen. Bootstrap bietet Elemente wie Pager, Dropdown-Schaltflächen, Karusselle, modale Dialogfelder, Registerkarten, Breadcrumbs und weitere, die jeweils mit ihrem eigenen Layout und einer eigenen Programmieroberfläche aufwarten. Darüber hinaus stellt Bootstrap ein flexibles Grid-System mit einem standardisierten und dokumentierten Layout bereit und rückt das Thema der responsiven Bilder stärker in den Vordergrund.

Auf den ersten Blick mag Twitter Bootstrap einfach ein weiteres CSS-Framework sein, mit dem Sie Ihre Webseite effizient sowie auf moderne Erwartungen und leichte Handhabbarkeit abgestimmt strukturieren können. Letztlich dreht sich das Web um HTML und JavaScript, die oft gepriesene Revolution des „rich and extraordinary“ Webs mit Silverlight und Flash ist ganz einfach gescheitert. Gleichzeitig ist die gewaltige Stärke von HTML, nämlich die Tatsache, dass es jedermann – ich wiederhole: jedermann! – konsumieren kann, aber auch eine erhebliche Schwäche, da es deshalb Jahre braucht, um die Sprache zu upgraden. Der Hype im Zuge neuer Versionen des allgegenwärtigen HTML5 genügt nicht, um diese auf breiter Front zu etablieren. Sicherlich wird dies irgendwann passieren, doch es braucht seine Zeit; und Entwickler können nicht einfach auf HTML-vNext warten, um ad hoc Elemente für die Strukturierung von Seiten anzubieten. So wird es immer eine unvermeidliche Verzögerung zwischen dem Fortschritt der HTML-Markup-Sprache, dem durchschnittlichen Browsersupport dafür (und zwar nicht nur deren neusten Builds) und den Ansprüchen der Entwickler geben.

Dieses Szenario schafft Raum für so genannte Intermediate-Frameworks, die semantische Elemente mit standardmäßigem Markup in Einklang bringen. Potenziell mag hier jedes Framework gute Dienste leisten, doch Twitter Bootstrap könnte das Rennen machen, weil es effektiv ist und eben von Twitter kommt.

Das HTML-Vokabular neu definieren

Bootstrap bietet eine Systematik an HTML-Entitäten, die Sie als Benutzer auf Webseiten vorfinden und als Entwickler einbinden möchten. Unter anderem gibt es Elemente wie Pager, Dropdown-Schaltflächen, Karusselle, modale Dialogfelder, Registerkarten und Breadcrumbs. Für jedes Element definiert Bootstrap ein HTML-Standardlayout und, wo zweckmäßig,auch ein programmierbares API. Darin liegt das eigentliche Erfolgskonzept von Twitter Bootstrap.

Einer der wichtigsten Fixpunkte, die Bootstrap definiert, und der erste, der Ihnen bei Ihren praktischen Erkundungen begegnen dürfte, ist das Grid-System. Hierbei handelt es sich um ein responsives und flexibles Grid-System, mit dem Sie bis zu zwölf Spalten definieren und den Inhalt über die Horizontale verteilen können. In der neuesten Version Bootstrap v3 wurde dieses Feature von Haus aus „Mobile first“ gestaltet. Es stellt sich auf die Viewport-Größe ein und erkennt, ob es sich um ein Gerät mit Vollbilddarstellung handelt oder um ein in der Größe angepasstes Browserfenster auf dem Desktop.

Grid-Fixpunkte

Außer der praktischen Einfachheit gibt es eigentlich keinen besonderen Grund, warum das Grid in zwölf Abschnitte unterteilt ist, das müssen wir ganz einfach so akzeptieren. Eine Zeile Inhalt muss in bestimmter Weise formatiert und in einen Container gesteckt werden:

<div class="container">
   <div class="row">
     ...
   </div>
</div>

Container selbst sollten nicht verschachtelt werden, weil der CSS-Style für den Container basierend auf Breiten mit feststehender Pixelanzahl definiert ist. Dabei kann jeder Container beliebig viele Zeilen aufnehmen und jede Zeile kann bis zu zwölf Spalten enthalten. Zeilen können verschachtelt werden, wobei der Inhalt der untergeordneten Zeilen in diesem Fall auf zwölf weiteren untergeordneten Spalten beruht. Das Grid-System ist responsive und basiert auf den in Tabelle 1 definierten Kriterien.

Tabelle 1: Media Queries Breakpoints in Twitter Bootstrap

Kriterium Code Zielgerät
Bis zu 768 px xs Kleine Geräte wie z. B. Smartphones
Größer als 768 px und bis zu 992 px sm Geräte mittlerer Größe wie z. B. Tablets
Größer als 992 px und bis zu 1 200 px md Die meisten Desktopgeräte
Größer als 1 200 px lg Große Bildschirme wie bei Desktops und Smart-TVs

Jede Zeile in Tabelle 1 stellt ein Zielgerät dar. Genau genommen ist Bootstrap eine rein clientseitige Lösung und unternimmt praktisch nichts, um Geräte anhand ihrer User-Agent-Signatur zu erkennen. Allerdings orientiert sich Bootstrap an den Gerätetypen und reduziert jedes Gerät auf eine begrenzte Bildschirmbreite. Für jeden dieser Breakpoints wird ein Media-Queries-Satz an CSS-Regeln in voller Übereinstimmung mit den Richtlinien für responsives Webdesign festgelegt. Bootstrap definiert keine spezifischen CSS-Regeln für den XS-Breakpoint, weshalb sich besonders kleine Geräte die Standard-Style-Konfiguration herausgreifen. Das folgende Beispiel zeigt eine Spaltendefinition, die den horizontalen Raum in zwei Blöcke aufteilt, die jeweils das Äquivalent von sechs Rasterspalten einnehmen:

<div class="row">
  <div class="col-md-6"> ... </div>
  <div class="col-md-6"> ... </div>
</div>

Mit der Notation col-XX-N legen Sie die Größe einer Rasterspalte innerhalb einer Zeile fest. Der Platzhalter XX steht für das CSS-Klassenpräfix, wie es in der Spalte „Code“ von Tabelle 1 angegeben ist und das die Größe des Zielgeräts angibt. Der Platzhalter N ist eine Ganzzahl zwischen 1 und 12. Konzeptionell entspricht dies dem HTML-Attribut colspan von TD-Elementen in HTML-Tabellen. Im obigen Beispiel teilen Sie die Zeile in zwei Teile auf, die jeweils die Hälfte des verfügbaren Raums einnehmen. Sie können frei entscheiden, wie Sie den horizontalen Raum aufteilen, solange die Summe der N-Platzhalter in allen DIV-Elementen einer Zeile die Anzahl zwölf nicht überschreitet. Beachten Sie, dass Sie den Spalten auch einen offset hinzufügen können, indem Sie die Klassenspezifikation einfach mit col-md-offset-N verketten:

<div class="row">
  <div class="col-md-4 col-md-offset-2"> ... </div>
  <div class="col-md-6"> ... </div>
</div>

Der Netzeffekt der offset-Klasse erweitert den linken Rand der Spalte um die angegebene Anzahl an Spalten. Es versteht sich von selbst, dass offset und Spalten-Spans niemals den Gesamtwert von zwölf überschreiten sollten.

Layouts für mehrere Geräte

Beim Übergang von älteren Bootstrap-Versionen, wo Sie zum Überspannen von Layoutspalten nur eine CSS-Klasse nutzen konnten, bleibt oftmals unerwähnt, dass es mehr als willkommen ist, mehrere Spaltenklassen gemeinsam zu verwenden. Bootstrap tut sein Bestes, um CSS-Klassen heraufzuskalieren, doch können Sie Elemente in einer Zeile trotzdem noch für verschiedene Geräte auf unterschiedliche Art definieren. Zum Beispiel können Sie den Bildschirm auf großen Desktops in vier Teile gliedern und bei den kleinsten Geräten in zwei. Sehen Sie sich als Beispiel hierzu das folgende Markup an:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8"> ... </div>
  <div class="col-sm-6 col-md-4"> ... </div>
</div>

Auf XS-Bildschirmen erhalten Sie nur eine Spalte, auf SM-Bildschirmen hingegen zwei gleich breite Spalten. Auf allen anderen Bildschirmen (MD und LG)sind es zwei Spalten, wobei die Spalte ganz links doppelt so groß wie die andere ist. Dem Beispiel können Sie ebenfalls entnehmen, dass eine gewisse Skalierung automatisch geschieht. Wenn Sie also die gleichen Spans für beispielsweise besonders kleine und kleine Geräte planen oder festlegen, brauchen Sie nur xs anzugeben, und die Bibliothek erledigt automatisch den Rest für Sie.

Bilder und Responsiveness

Bilder sind ein eher problematischer Aspekt beim responsiven Webdesign. Bootstrap bietet zwar eine gewisse Unterstützung für responsive Bilder, aber dennoch bleibt in dieser Hinsicht das Meiste Ihnen überlassen. Bootstrap übernimmt lediglich die grundlegenden Arbeiten und stellt sicher, dass Bilder nicht über ihre tatsächliche Größe hinaus skaliert werden. Dazu müssen Sie allen Bildern folgenden Stil hinzufügen:

max-width: 100%;

In Bootstrap erreichen Sie das mithilfe der Klasse img-responsive, die zudem sicherstellt, dass das Bild passend zum übergeordneten Element auch vertikal skaliert wird.

height: auto;

Dies ist nur ein Aspekt des Problems und möglicherweise auch nur der einfachste. Auf diese Weise liefert die Website immer dasselbe Bild, unabhängig vom anfordernden Gerät und der verfügbaren Bandbreite. Das mag nicht unbedingt ideal sein, da Desktopbilder für Smartphones oft zu groß sein können. Es ist schließlich nicht nur eine Sache der Bandbreite, sondern auch des Renderings: der Browser muss das Bild schrumpfen. Sie sollten sich dieses Problems bewusst sein und auch berücksichtigen, dass von Bootstrap – wie von jeder anderen rein clientseitigen Lösung – in dieser Hinsicht keine Wunder zu erwarten sind.

Dennoch gibt es zwei Wege, die Sie einschlagen können. Einer ist eine temporäre Implementierung des vorgeschlagenen PICTURE-Elements in einem zukünftigen HTML-Standard. Gemäß [1] könnte dies in nicht allzu ferner Zukunft eine Option zur Einbettung von Bildern mit mehreren Auflösungen in Webseiten sein.

<picture width="500" height="500">
   <source media="(min-width: 45em)" src="large.jpg">
   <source media="(min-width: 18em)" src="med.jpg">
   <source src="small.jpg">
   <img src="small.jpg" alt="">
   <p>Accessible text</p>
</picture>

Für dieses Feature steht ein aktueller Codebaustein zum Herunterladen unter [2] bereit. Weitere Lösungen finden Sie im Überblick unter [3].

Ein alternativer Ansatz erfordert eine serverseitige Erkennung des anfordernden Geräts. Nachdem die Site die Fähigkeiten des Geräts ausgewertet hat, gibt sie einfach das am besten geeignete Bild zurück. Sie können einen HTTP-Handler oder sogar einen Web-API-Endpunkt erstellen und diesen die Bilder bereitstellen lassen. Ein möglicher Prototyp sieht so aus:

<img src="home/img/sea.jpg" alt="" />

Dabei soll img eine Methode auf einem bestimmten Controller sein, die einen Pfad zu einem Bild erhält. Intern kann die Controllermethode den User-Agent-String überprüfen und sich dazu entscheiden, ein anderes Bild bereitzustellen, wobei eine standardmäßige Namenskonvention wie sea-xs.jpg, sea-md.jpg usw. verwendet wird. Details können gegebenenfalls natürlich angepasst werden. Zur Implementierung dieser Lösung benötigen Sie einen zuverlässigen Weg, um die Geräte zu erkennen. Dabei müssen Sie nicht alle erdenklichen Geräteeigenschaften kennen, sondern lediglich den Typ des Geräts, sodass Sie sinnvoll entscheiden können, welches Bild zur Bereitstellung am besten geeignet ist. Das WURFL-API für ASP.NET [4] eignet sich hierfür als Framework.

Zusammenfassung

Dieser Artikel hat den Beitrag von Twitter Bootstrap für die neue HTML-Systematik und die Förderung des Mobile-First-Designs herausgestellt. Das Grid-System wurde besprochen, genauso wie verschiedene Techniken, um Bilder einer Website auf verschiedenen Geräteklassen responsiver zu machen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -