tekom-Jahrestagung 2012 - ActiveDoc

Informationsdesign
Abb. 2: Beispiele für CSS Media Queries
Damit die Umsetzung eines Responsive Designs funktioniert, ist noch
Folgendes zu beachten:
−−
Keine festen Grid-Layouts: stattdessen Fluid-Grids (%-Angaben statt
Pixel) verwenden.
−−
Keine festen Schriftgrößen: Schriftgrößen und Zeilenhöhen auf Basis
von % und/oder em definieren.
−−
Keine festen Bildgrößen: Bilder sollten skaliert werden, evtl. ist hierfür
JavaScript notwendig.
−−
HTML5 verwenden.
Testen
Für einen ersten Test eignen sich Online-Tools, z. B. The Responsinator
[6]. Nach Eingabe der URL wird die Anzeige auf verschiedenen Geräten
parallel simuliert, eine Navigation innerhalb der Webseiten ist
möglich. Ein Online-Tool ersetzt natürlich nicht den „echten“ Test auf
verschiedensten Geräten. Erleichtert wird der Test, wenn das kostenlose
Programm Adobe Shadow [7] eingesetzt wird. Auf dem Desktoprechner
wird das Programm und die entsprechende Erweiterung für den
Browser Google Chrome installiert, auf jedem mobilen Gerät die Adobe
Shadow App. Nun wird jede Webseite, die auf dem Desktoprechner
aufgerufen wird, automatisch auch auf allen mobilen Geräten angezeigt.
Ein integrierter Remote Debugger ermöglicht die Anzeige des DOM im
mobilen Browser. Weiterhin können auf den Mobilgeräten Screenshots
erstellt werden, die automatisch auf dem Desktoprechner gespeichert
werden.
Beispiele
Abb. 3 zeigt einen Preview (über The Responsinator erstellt) der Webseite
des CSS-Frameworks YAML [8] in 2 verschiedenen Versionen:
links für ein iPad, rechts für ein iPhone. Eine umfangreiche Sammlung
von Websites, die Responsive Webdesign umsetzen, wird von Eivind
Uggedal unter mediaqueries.es [9] zur Verfügung gestellt.
114
tekom-Jahrestagung 2012