Responsive Web Design – Teil 1: Warum RWD?

Da das Internet nicht mehr nur auf einem Screen konsumiert wird, muss Design und Inhalt mit Responsive Web Design entsprechend optimiert dargestellt werden.

Vor beinahe einem Jahr habe ich eine interne Schulung (PulpAcademy) zum Thema Responsive Web Design (RWD) gehalten. Deren Inhalt war damals schon nicht mehr neu (viele sehen diesen Blogpost von A List Apart aus 2010 als Ursprung von RWD), aber dennoch brandaktuell. Das ist er meiner Meinung nach noch immer, da nach wie vor Relaunches von Websites vorgenommen werden, ohne auf die verschiedenen Endgeräte Rücksicht zu nehmen.

Was ist Responsive Web Design?

RWD ist im Wesentlichen ein Webdesign, das sich automatisch jenem Endgerät anpasst, auf dem es angezeigt wird. Dabei werden Elemente unterschiedlich angeordnet, anders dargestellt oder auch aus- bzw. eingeblendet.

Wichtig ist es, die Begriffsdefinition des RWD von jener der „Responsive Website“ zu unterscheiden, da es sich bei dieser um eine Website handelt, die schnell Response liefert – es geht also um Ladezeiten und Programmcode-Optimierung.

Mit der Einführung des iPhones wurde Webdesign nachhaltig verändert.

Wieso braucht man Responsive Web Design?

Seit der Einführung des iPhones 2007 oder spätestens seit der Vorstellung des iPads 2010 und dem damit eingeläuteten Siegesfeldzug der Mobile Devices ist klar, dass das WWW nicht mehr nur auf e i n e m Screen konsumiert wird. Das bringt natürlich einige Herausforderungen mit sich:

Es muss darauf Rücksicht genommen werden, dass MD im Hoch- und Querformat gehalten werden können.
Gerade mit Touch-Screens müssen Devices Finger-Friendly sein, denn sie erlauben kein Mouse-Over.
Im Gegenzug können Bildschirme, auf denen Websites angezeigt werden auch riesig und extrem hochauflösend sein.

Doppeltippen ist auch keine Lösung

Smartphones haben üblicherweise die Möglichkeit, durch Doppeltippen einen Inhaltsblock heranzuzoomen, was das Problem der unterschiedlichen Bildschirmgrößen zumindest teilweise löst. Dies ist aber wenig benutzerfreundlich und spätestens beim Scrolling auch nicht mehr das Gelbe vom Ei. Des Weiteren ist die Navigation ein großes Problem bei der Darstellung einer Website auf Smartphones. Mit einem Mauszeiger kann ich relativ einfach auch kleinere Objekte anklicken, die Finger versagen dabei oft.

Lösungsansatz 1: Der kleinste gemeinsame Nenner

Als ich begonnen habe, Websites zu kreieren, war eine Auflösung von 800×600 Standard. Bei der Gründung von Pulpmedia 2005 wurde gerade auf 1024×768 umgestellt. Man nahm dies als die kleinste Auflösung an und entwickelte dafür auch das Design.

Der kleinste gemeinsame Nenner wäre heute das Smartphone, aber bald vielleicht die Smartwatch.

Natürlich gab es auch damals schon Websurfer, die auf Geräten mit hoher Auflösung im Internet unterwegs waren. Für diese Nutzer war eine kleine Website nicht ausgelegt, denn sie wurde hier klein angezeigt, entweder seitlich oder in der Mitte des Screens ausgerichtet.

Lösungsansatz 2: Der Designer-Ansatz

Eventuell tue ich mit dieser Bezeichnung einigen Designern Unrecht, aber de facto ist es leider so, dass viele von ihnen – vor allem, wenn sie aus dem klassischen Design kommen – eine Website für ihren eigenen Screen entwickeln. Wenn das ein 27“ iMac ist, können die Schriften – aufgrund der Kombination Auflösung/Bildschirmgröße – durchaus sehr klein ausfallen.

Schöne Designs, die nur auf einem großen, hochauflösenden Device gut aussehen, verlieren auf kleineren Screens viel von ihrem Glanz.

Lösungsansatz 3: Jedem das seine

Eine Zeit lang galt es als die richtige Lösung, eine mobile Version und eine Desktopvariante der Website zu machen. Prominentes Beispiel hierfür ist nach wie vor Facebook, denn auf Smartphones wird m.facebook.com aufgerufen. Wer diesen Blogpost nun aber auf einem Desktop liest und auf den angeführten Link klickt, sieht auch schon das Problem dieses Ansatzes: Weitergeleitete Links führen dazu, dass eine Website als hässlich wahrgenommen wird.

Besonders krass: Die Darstellung von Bildern der mobilen Facebook-Variante, wenn diese auf Desktops betrachtet wird.

Wählt man diese Lösung stellt sich die Frage, ob man nicht auch eine für Tablets optimierte Version der Seite programmiert. Und dann eine für Smart-TVs und eine für das Galaxy Note und und und. Letzten Endes sieht man den Wald vor lauter Bäume nicht mehr.

Lösungsansatz 4: Anpassung

Was uns zur wohl besten Lösung bringt: Responsive Web Design. Hier richtet sich das Design dynamisch nach der verfügbaren Auflösung und stellt den Inhalt entsprechend optimiert dar.

Die dynamische Anpassung an die verschiedenen Devicegrößen und –auflösungen, ist die schönste und effektivste Lösung.

Wie geht die Serie weiter?

Welche Variationen es gibt und wie man das Ganze angeht, werde ich in den nächsten Teilen dieser Serie erläutern.