Responsive Webdesign
Das Responsive Webdesign hat für eine starke Verbesserung der Benutzerfreundlichkeit von Websites auf unterschiedlichen Geräten gesorgt. Websites mit einem responsiven […]
11. Oktober 2016
Das Responsive Webdesign hat für eine starke Verbesserung der Benutzerfreundlichkeit von Websites auf unterschiedlichen Geräten gesorgt. Websites mit einem responsiven Layout sind in ihrer Gestalt nicht länger starr, sondern passen sich unterschiedlich großen Bildschirmen dynamisch an. Einen wichtigen Grundstein für das reaktionsfähige Webdesign legte der amerikanische Webdesigner Ethan Marcotte mit einem Artikel im Jahr 2010. Dabei stellte Marcotte auch die CSS „Media Queries“ vor, welche inzwischen wichtige Bestandteile vieler Webseiten sind.
Lange Zeit war Responsive Webdesign kein sehr großes Thema. Erst mit der zunehmenden Verbreitung von Smartphones (allen voran das iPhone) und weiteren internetfähigen Geräten erhielt diese Disziplin einen echten Aufwind. Als Selbstversuch kann man mit einem Smartphone eine Website betrachten, welche Anfang der 2000er entstanden ist und seither nicht mehr überarbeitet wurde. Schnell wird klar, dass hier die Usability stark zu wünschen übrig lässt. Schriften sind zu klein, Seiten überfüllt und Links sind nur mit einer Lupe klickbar. Mal schnell die Öffnungszeiten eines lokalen Geschäftes zu recherchieren kann somit zur echten Geduldsprobe werden. Eine von mehreren Lösungen, um dieses Problem zu bewältigen, ist das Responsive Webdesign.
Die größte Herausforderung von Responsive Webdesign ist vermutlich die hohe Anzahl verschiedener Geräte mit ihren unterschiedlichen Bildschirmgrößen. Angefangen von sehr kleinen Smartphone-Displays, über Tablets und Notebooks bis hin zu großen Monitoren - auf jedem Gerät soll eine Website optimal dargestellt werden. Doch nicht nur die Abmessung variiert, sondern auch die Auflösungsdichte. So hat ein Retina-Display des iPhone 6 eine Punktdichte von 326 ppi, während jene vom MacBook Pro mit Retina Display lediglich 227 beträgt.
Darüber hinaus funktionieren mobile Geräte anders als der Desktop-Computer. Hier gibt es keine Maus-Cursor, welche Hover-States aktivieren könnten. Klickbare Flächen müssen deshalb umso besser als solche erkennbar sein. Letztlich ist das Ziel, jedem einzelnen Gerät gerecht zu werden und somit allen Website-Nutzern eine optimale Darstellung und Bedienung zu ermöglichen.
Damit eine Website auf jedem Gerät optimal dargestellt werden kann, muss diese einige Informationen abfragen können. Hierzu zählt beispielsweise die verfügbare Fläche oder auch die Geräte-Orientierung (Hochformat/Querformat). Hierzu werden sogenannte CSS Media Queries eingesetzt. Diese kennt man bereits aus anderen Anwendungsbereichen - so werden oftmals Stylesheets für einen bestimmten Browser oder für den Druck bereit gestellt.
Mithilfe der Media Queries (bei CSS2 hießen diese noch Media Types) können verschiedene Daten abgefragt werden, beispielsweise:
Möchte man jetzt zum Beispiel bestimmen, dass eine Website auf Bildschirmen mit einer Breite von mindestens 1000px einen schwarzen Hintergrund erhält, dann könnte der passende Befehl so aussehen:
@media only screen and (min-width: 1000px) {
body {
background-color: #000;
}
}
Nun muss jeder Webdesigner selbst entscheiden, wie er seine Breakpoints bzw. Umbruchpunkte setzt. Möglich wäre folgende Vorgehensweise:
@media (min-width:320px) { /* Smartphones */ }
@media (min-width:481px) { /* E-Readers (Portrait), kleinere Tablets, Smartphones */ }
@media (min-width:641px) { /* E-Readers (Landscape), Tablets (Portrait), Smartphones */ }
@media (min-width:961px) { /* Tablets, Laptops und Desktops mit niedriger Auflösung */ }
@media (min-width:1025px) { /* Größere Tablets, Laptops und Desktops */ }
@media (min-width:1281px) { /* Hochauflösende Laptops und Desktops, TV-Geräte und Beamer */ }
Es empfiehlt sich, bei der kleinsten Größe zu beginnen und sich dann nach und nach zum Breakpoint mit der größten Breite vorzuarbeiten. Diesen Ansatz nennt man auch Mobile First. Zwar ist es theoretisch auch möglich, anders herum vorzugehen. Allerdings bietet der Mobile First Ansatz einige Vorteile, z.B. die Priorisierung wichtiger Inhalte und die damit verbundenen hierarchische Anordnung.
Nun ist das Responsive Webdesign allerdings nicht die einzige Lösung zur Bereitstellung von Smartphone-freundlichen Websites. Nachfolgend zwei weitere Ansätze.
In manchen Aspekten unterscheidet sich ein adaptives Layout gar nicht so sehr von einem responsiven Layout. Hier wird ebenfalls mit Media Queries gearbeitet und versucht, dass Design an die Bildschirmgröße anzupassen. Allerdings geschieht dies nicht fließend, sondern mit starren Umbrüchen. Das Adaptive Webdesign ist also eher anpassungsfähig als reaktionsfähig. Meist wird je eine Version für Desktops, Tablets und Smartphones erstellt, welche jeweils ein fixes Layout besitzen. Ein solch starres Raster ist zwar keine optimale Lösung, zumindest jedoch ein Anfang.
Vorteil dieser Methode ist eine recht schnelle und einfache Umsetzung, schließlich kann mit fest definierten Abmessungen gearbeitet werden und so das Design für jeden gewählten Viewport exakt gestaltet werden. Dies ist zugleich aber auch der größte Nachteil, denn bei der Vielzahl an unterschiedlichen Geräten ist es mit einer handvoll Viewports nicht getan. Idealerweise müsste also ein eigenes Design für jede neue Displaygröße festgelegt werden - ein Unterfangen, was so in der Realität wenig Sinn macht. Einen interessanten Artikel zu diesem Thema könnt ihr hier lesen.
Eine zweite Alternative zum Responsive Webdesign ist eine separate Website-Version für mobile Endgeräte. Diese steht losgelöst von der Desktop-Version und kann damit optimal für mobile Geräte optimiert werden. Möglich ist dies beispielsweise mittels einer dynamischen Bereitstellung (Dynamic Serving) oder einer eignen URL für die mobile Seite. Bei Dynamic Serving liefert der Server je nach User-Agent einen anderen Code. Zu beachten ist, dass eine eigene mobile Website-Version zu mehr Arbeitsaufwand führen und die Umsetzung von Änderungen länger dauern kann.
Letztlich geht es beim Responsive Webdesign darum, dem Nutzer - unabhängig vom Endgerät - eine optimierte Website mit maximaler User-Experience und Usability bereitzustellen. Ob ein responsives Layout dafür das richtige Vorgehen ist, hängt wohl auch stark davon ab, wie gut oder schlecht dieses umgesetzt wird.
Interessante Links:
Originalartikel von Ethan Marcotte zum Thema Responsive Webdesign: http://alistapart.com/article/responsive-web-design
Sebastian Lochbronner
86830 Schwabmünchen
Deutschland