Webseiten mit einem Responsive Web Design passen ihre Inhalte automatisch an die Bildschirmgröße bzw. Auflösung des Ausgabegeräts an. Der gleiche Inhalt wird dadurch auf einem Desktop-Rechner, einem Tablet und einem Smartphone lesbar dargestellt. Wir erklären anhand des UXcite Blogs wie das funktioniert und wann das sinnvoll ist.

Da mittlerweile ungefähr 31 Millionen Deutsche ein Smartphone und 8,2 Millionen ein Tablet [1] nutzen, wird es immer wichtiger Internetauftritte für diese Geräte zu optimieren.

Das ist der Unterschied – Responsive Web Design vs. mobile Webseite

Mobile Webseite
Wollte man seinen Internetauftritt auch für mobile Endgeräte bereitstellen, hat man vor vor einiger Zeit noch eine separate Webseite entwickelt. Dies bedeutet einen nicht zu unterschätzenden Mehraufwand in der Entwicklung, der Qualitätssicherung und auch in der Wartung, da man anfallende Anpassungen oft mehrfach implementieren muss. Unter Umständen muss man auch den Inhalt der verschiedenen Versionen getrennt voneinander pflegen. Betrachtet man die Diversität an unterschiedlichen Displayauflösungen und Bildschirmgrößen bei mobilen Geräten, kommt man auch schnell zu dem Schluss, dass eine einzige mobile Version des Internetsauftritts nicht ausreicht um diesen auf allen Geräten optimal darzustellen. Darüber hinaus ist der Markt an Mobilgeräten sehr dynamisch: es werden immer weitere Auflösungen und Displaygrößen entwickelt und auf den Markt gebracht. Dies erschwert die Optimierung der mobilen Webseite ebenfalls.

Responsive Web Design
Mit einem Responsive Web Design versucht man diese Probleme so gering wie möglich zu halten bzw. zu umgehen. Man erstellt die Webseite von Anfang an so, dass technisch gesehen auf allen Geräten dieselbe Webseite und derselbe Inhalt angezeigt wird – lediglich das Layout wird über verschiedene Techniken abgeändert und angepasst. Die Vorteile, die sich daraus ergeben sind vielfältig. Zum einen wendet man erheblich weniger Zeit auf, als bei der parallelen Entwicklung verschiedener Versionen ein und derselben Webseite. Zum anderen sind funktionale Fehler (z.B. fehlerhafte Links) sofort auf allen Geräten behoben. Anpassungen an einzelnen Features wirken sich direkt auf alle Versionen der Webseite aus, sofern diese auch angezeigt werden.

Responsive Web Design – Der Entwicklungsprozess

Konzeption – “Think mobile first”
In vielen Artikeln über Responsive Web Design ist zu lesen, dass man zuerst an die mobile Ausprägung der Webseite denken und diese umsetzen soll. Für die Umsetzung gilt dies sicherlich als “best practice”, da man so verhindert unnötig Daten – z.B. speicherintensive Hintergrundgrafiken, die nur in hohen Auflösungen angezeigt werden sollen – an die Mobilgeräte zu übertragen. Das schont die Bandbreite, die im Vergleich zu den meisten Internetanschlüssen zu Hause, häufig ein limitierender Faktor ist. Bei der Konzeption der Webseite kann man diesen Weg sicherlich auch gehen, ich denke aber es ergibt hier auch durchaus Sinn einem anderen Ansatz zu folgen: Nachdem man sich überlegt hat welche Features und Inhalte die Webseite bereitstellen soll, sollte im folgenden Schritt der Layout-Konzeption sowohl die kleinste mobile Ausprägung, wie auch die größte für den Desktop angedachte Ausprägung betrachtet und ausgearbeitet werden.

UXcite Responsive Web Design Konzept - Desktop- und Mobilversion

Abb. 1: UXcite Responsive Web Design Konzept - Desktop- und Mobilversion

Die verschiedenen Versionen zwischen diesen beiden Konzepten kann man dann relativ einfach durch geschicktes Kombinieren bzw. Umgestaltung der Layoutelemente und Weglassen bzw. Hinzunehmen von Inhalten ableiten.

In der mobilen Version der Seite kann auf vieles verzichtet werden, was in der Komplettansicht noch angezeigt wird. In diesem Blog sieht man im kleinsten Auflösungsbereich lediglich noch Logo, Suche und Artikelnavigation – die zentralen Bestandteile um zu den Artikeln zu gelangen und um zu wissen wo man sich befindet. Auf zusätzliche Features, wie die “letzten Kommentare”, “Lesenswertes” oder “kommende Termine” wird hier bewusst verzichtet. Das Konzept Funktionen für mobile Geräte zu reduzieren kann auf zahlreiche Webseiten und -anwendungen übertragen werden. Dafür kann man sich auf die Hauptinhalte und -features der Webseite konzentrieren und diesen noch mehr Geltungsraum und somit Aufmerksamkeit geben. Im mobilen Nutzungskontext ist dies umso wichtiger, da der Nutzer häufig durch das Umfeld abgelenkt wird und gezielter nach Informationen sucht. Darüberhinaus gibt es zusätzliche Störfaktoren, wie zum Beispiel schlechte Lichtverhältnisse oder mangelnde Netzabdeckung, welche es dem Benutzer erschweren den Inhalt einer Webseite schnell und einfach zu erfassen.

UXcite Responsive Web Design - Konzept Zwischenauflösungen

Abb. 2: UXcite Responsive Web Design - Konzept Zwischenauflösungen

Bei der Konzeption dieses Blogs sind wir wie beschreiben vorgegangen und haben Features in den mobilen Versionen bewusst weggelassen. In Abbildung 1 sieht man die ersten Mockups für diesen Blog, aus denen sich dann weitere Versionen für die Auflösungsbereiche dazwischen ergeben haben (siehe Abbildung 2).

Breakpoints – Wie viele Auflösungsbereiche sollte ein Responsive Web Design haben?
Eine wichtige Entscheidung, die man beim Erstellen einer Webseite mit Responsive Web Design treffen muss, ist, wie viele verschiedene Auflösungsbereiche man überhaupt bedienen möchte. Wo die einzelnen Breakpoints, also die Übergänge zwischen den verschiedenen Bereichen, sind ist sowohl eine Aufwandsfrage, wie auch eine Frage nach dem Nutzen. Man sollte mindestens für Smartphone, Tablet und Desktop Monitore, einen eigenen Bereich definieren. Ja nachdem wie viel liebe zum Detail man in sein Responsive Webdesign investieren möchte, macht es noch Sinn Tablets und Monitoren in mehrere Bereiche zu unterteilen. Wir haben uns zum Beispiel dafür entschieden nochmals zwischen Tablets mit kleiner und großer Auflösung und Monitoren mit kleinerer und größerer Auflösung zu unterscheiden. Die einzelnen Bereiche sind in der Bildschirmbreite für UXcite:

 Auflösungsbereiche des UXcite Responsive Web Designs.

Auflösungsbereiche des UXcite Responsive Web Designs.


Wie ändert sich das Layout auf UXcite?
Viele Webseiten, wie auch UXcite, haben ein Spaltenlayout – sind also in mehrere Bereiche, die nebeneinander liegen, aufgeteilt. Für UXcite sind es drei – eine Spalte für die Artikelnavigation, eine für zusätzliche Features und Angebote (Widgets) und eine für den eigentlichen Inhalt, unsere Artikel. Im Folgenden werde ich vereinfacht von Seitenbereichen und Inhaltsbereich sprechen.

In der größten Version sind zwei Seitenbereiche links und rechts vom Inhalt angeordnet und haben eine feste Größe, der Inhaltsbereich hingegen passt sich dynamisch an die Breite des Bildschirms an.

UXcite - Layout der Desktop Version

Abb. 3: Die Desktop Variante von UXcite. Links und rechts befinden sich zwei Seitenbereiche und in der Mitte der Inhaltsbereich.


Wird der zur Verfügung stehende Platz kleiner werden die Widgets des rechten Seitenbereichs unterhalb der Artikelnavigation im linken Seitenbereich angezeigt. Das Layout ist nun also nicht mehr drei- sondern zweispaltig. Mit diesem einfachen Trick gewinnt man für den Inhaltsbereich wieder mehr Platz zur Darstellung.

Für Tablets mit großer Aufflösung wird dieses Layout beibehalten, der verbleibende Seitenbereich wird lediglich etwas schmaler. So ist immer noch genügen Platz für das Kernstück des Blogs – die Artikel.

UXcite - Layout kleine Desktop- und Tablet-Version

Abb. 4: Uxcite Layout für kleine Desktop-Bildschirme und Tablets. Auf der linken Seite befindet sich nun nur noch ein Seitenbereich, rechts davon der Inhalt.


Ist die Auflösung noch geringer – also bei kleineren Tablets oder Smartphones – räumen wir der Artikelnavigation den vollen Platz in der Breite ein und blenden Widgets und die Artikelübersicht im Inhaltsbereich komplett aus. Im Fall eines Blogs ist dieser Ansatz sehr gut machbar. Das Layout ähnelt dann Nachrichten-Apps wie der SPON- oder Kicker-App auf dem iPhone, bei denen sich dieses Konzept sehr gut bewährt hat. Die Artikelnavigation kann außerdem noch mit Vorschaubildern oder Teasern ergänzt werden, um etwas einladender und interessanter zu wirken.

UXcite - Layout für kleinere Tablets und Smartphones

Abb. 5: UXcite Layout für kleinere Tablets (links) und Smartphones(rechts). Hauptaugenmerk wird auf die Artikelnavigation gelenkt.


Für die Tablet- und Smartphone-Varianten sollten Links und interaktive Element außerdem groß genug sein, damit man sie mit dem Finger bedienen kann.

Hast du die mobile Version von UXcite schon gesehen (zum Ansehen kannst du dein Browserfenster einfach kleiner ziehen) oder schon selbst eine responsive Webseite erstellt? Teile uns deine Meinung und Erfahrung doch einfach mit.

Quellen:
[1] Bundesverbandes Digitale Wirtschaft: BVDW: Mobile Internetnutzung steht bei den Deutschen hoch im Kurs vom 19.11.2012

Weiterführende Literatur:
Mashable: 7 Responsive Design Tips to Revamp Your Workflow
copyblogger: Mobile Responsive Design 101
Smashing Magazine: Responsive Web Design Guidelines and Tutorials
t3n Tag: Responsive Webdesign