4.5    Tipps zur Umsetzung 

Dank der Media Queries ist das Grundgerüst einer responsiven Webseite recht schnell umgesetzt. Je nach Komplexität des Layouts und der Inhalte ist die Anpassung hin zu einer auf allen möglichen Geräten und Bildschirmen gut bedienbaren und zugänglichen Webseite aber oft gar nicht so einfach.

4.5.1    HTML-Prototyping 

Ein wesentlicher Aspekt eines responsiven Workflows ist der schnelle Wechsel in den Browser. Anhand eines HTML-Prototyps kann so frühzeitig die Entwicklung der Webseite besprochen werden, sozusagen »am lebenden Objekt«. Mögliche Fehlerquellen, Ungereimtheiten und Unklarheiten können so schon früh im Projekt erkannt und behoben werden.

Der Weg zu einem HTML-Prototyp ist sehr unterschiedlich. Der spezifischste ist wohl die Erstellung eines individuellen HTML-Dokuments von null an. Dies hat den Vorteil, dass der Quellcode genau zum Projekt passt und keinerlei überflüssige Zeilen enthält (wenn er denn gut gecodet ist). Dafür dürfte dies auch die zeitaufwendigste Variante sein.

Der Einsatz von HTML-Frameworks ist beim Prototyping ebenfalls sehr beliebt. Hier steht schon ein Grundgerüst in Form eines flexiblen Rasters zur Verfügung, und dazu kommt eine Art »Handwerkskasten« mit vielfältigen Elementen wie Navigationsleisten, Buttons, Tabs usw. Diese Frameworks können einem jede Menge Arbeit abnehmen, und man kann recht schnell ansehnliche Ergebnisse erreichen.

Allerdings hat es zu häufig etwas von »Mit Kanonen auf Spatzen schießen«. Der Funktionsumfang drückt sich eben auch durch einen sehr umfangreichen Quellcode aus. Viel zu überladen für die meisten Webseiten, die nur einen Bruchteil der integrierten Elemente benötigen. Mehr zum Einsatz von Frameworks lesen Sie in Kapitel 8, »Layout und Raster«.

4.5.2    Testen 

Die Webseite so wie früh wie möglich im Browser zu entwickeln heißt auch, sie so früh wie möglich zu testen. Das typische Verkleinern des Browserfensters am großen Webdesigner-Bildschirm, um unterschiedliche Breakpoints auszuprobieren, ist das eine. Das andere ist, die Webseite auf möglichst vielen Geräten anzuschauen, sozusagen im Live-Betrieb. Die Ansicht und vor allem die Bedienung auf einem Smartphone im Hochformat (Portrait-Modus) lassen sich eben auf einem 30-Zoll-Monitor nicht simulieren.

Ghostlab (vanamco.com/ghostlab) bietet die Möglichkeit, die Webseite direkt auf verfügbaren Endgeräten zu testen und zu debuggen (Fehler aufzuspüren).

Im Idealfall kann man die Webseite auf allen möglichen Geräten und Betriebssystemen testen. Im Normalfall stehen diese aber nicht ausreichend zur Verfügung. Eine Alternative stellen die Tools dar, die Screenshots einer Webseite auf verschiedenen Betriebssystemen und in verschiedenen Browser(versionen) machen, wie beispielsweise browserstack.com/screenshots oder browsershots.org.

Abbildung 4.23    Eine breite Auswahl an Betriebssystemen und Browsern zum Testen bietet browserstack.com/screenshots.

Eine tolle Einrichtung sind die Open Device Labs, die unterschiedliche mobile Endgeräte zum »echten« Testen zur Verfügung stellen. Eine Übersicht liefert: opendevicelab.com. Die Labs nehmen übrigens auch gerne Altgeräte entgegen!

Abbildung 4.24    Eine sehr große Auswahl an responsiven Quellen finden Sie hier: bradfrost.github.io/this-is-responsive

Nicht nur das Layout und die passende Anordnung der Inhalte sollten bei einer responsiven Webseite getestet werden, sondern auch die Funktionen und die Performance (z. B. die Ladegeschwindigkeit) in den verschiedenen Browsern, Geräten und Auflösungen.

Und wer immer noch nicht genug Input hat von Responsive Webdesigns, dem sei die Sammlung »Responsive Resources« wärmstens empfohlen. Hier bleibt eigentlich keine Frage offen: bradfrost.github.io/this-is-responsive/resources.html. Und ebenfalls von Brad Frost ist die wunderbare Sammlung von »Responsive Patterns«, die für jeden Fall eine Codeantwort parat hat: bradfrost.github.io/this-is-responsive/patterns.html.