tekom-Jahrestagung 2012 - ActiveDoc

Informationsdesign
INF 3
Fachvortrag
Responsive Webdesign
Margit Becher, Hochschule Hannover
Webseiten werden heute auf einer Vielzahl unterschiedlichster Geräte
betrachtet. Dazu gehören Breitbildmonitore ebenso wie Smartphones.
Laut Gartner Research wird es 2013 mehr Webzugriffe durch mobile
Geräte als durch Desktopcomputer geben [1].
Viele Websites basieren noch auf einem statischen Grid-Layout, optimiert
für eine Auflösung von 1024 x 768 px, für mobile Geräte wurde/
wird häufig eine mobile Version in einer Subdomain erstellt. Mit einer
Vielzahl unterschiedlichster Geräte entsteht jedoch ein nicht vertretbarer
Pflegeaufwand. Zudem sollte bedacht werden, dass viele Nutzer
mehr als zwei Geräte parallel verwenden (Multiscreen Szenario), daher
sollten Websites so gestaltet werden, dass es für den Nutzer keinen
Unterschied macht, über welches Gerät er Informationen abruft. Konsistentes
Design, d. h. insbesondere der grundlegende Aufbau und die
Navigationsmechanismen, sollten für den Nutzer erkennbar bleiben.
Gleichzeitig sollte aber auch stets der Nutzungskontext berücksichtigt
werden.
Responsive bedeutet „auf jemanden eingehen“, „reaktionsfähig bleiben“.
Responsive Webdesign wurde bekannt durch einen Artikel von
Ethan Marcotte [2]. Es bezeichnet eine Technik im Webdesign, bei der
sich das Layout einer Webseite selbstständig und dynamisch an die Fähigkeiten
des Endgerätes, z. B. Größe, Auflösung, anpasst.
Vorgehensweise
Responsive Design ist kein mobiles Design, sondern ein Design für
alle Geräte. Daher sollte bei der Planung der Website zuerst der Inhalt
(„Content First“, „Content Driven“) betrachtet werden und dann erst das
Layout. Dies bedeutet konkret:
−−
Inhaltselemente definieren, Inhalte kategorisieren, nach ihrer Bedeutung
sortieren und gruppieren.
−−
Breakpoints definieren. Dies sind die Stellen, an denen sich das Layout
einer Website ändert, wenn die Inhalte auf Geräten mit unterschiedlich
großen Displays dargestellt werden (s. Abb. 1).
−−
Verhaltensweise der Inhaltselemente auf verschieden großen Ausgabebildschirmen
(wird dieser Inhalt benötigt, in welchem Detaillierungsgrad,
evtl. nur als Link?) festlegen.
−−
Navigationsstruktur planen.
Bezüglich der Navigationsstruktur erfordern mobile Geräte eine besondere
Aufmerksamkeit: Buttons müssen groß genug sein, Dropdownmenüs
dürfen nicht vom Hover-Effekt abhängig sein. Tipps finden sich in
[3].
112
tekom-Jahrestagung 2012