Die 3 Säulen des Responsive Webdesign

Ein Kunde nimmt sein Smartphone zur Hand und besucht eine beliebige Seite. Nach Öffnen der Seite stellt er nun fest, dass der Inhalt kaum lesbar und sonst optisch nicht ansprechend ist. Daraufhin muss er schwermütig anfangen, die Bereiche welche interessant sind, mit zwei Fingern zu vergrößern und verschieben. Dies ist nicht der Inbegriff von Usability! Ruckzuck ist der Besucher frustriert und hat schneller den Browser geschlossen als Sie „Wir haben doch interessante Themen!“ sagen können.

Folgende Fragen möchte ich beantworten:

• Was macht Responsive Webdesign so interessant?
• Wie können Seiteninhalte konform auf allen mobilen Geräten angezeigt werden?
• Welche Kriterien müssen Sie bei der Umsetzung beachten?

Status quo: Statisches Grid-Layout

Der Browser ist die leere Leinwand eines Webdesigners. Um diese mit kreativem Inhalt und Leben zu füllen nutzt er ein Grid-Layout. Basierend auf den gängigen Bildschirmauflösungen und den Zielgruppen wurde die feste Größe von 1024×768 Pixeln für die Gestaltung gewählt. In Ausnahmefällen traut er sich auch an die Auflösung von 1280×1024 Pixeln heran. Bei einem klassischen Screen-Design kommt ein 4-Spalten-Layout zum Einsatz. Kleine Displays können dies schon nicht mehr ansprechend darstellen. Eine Reduzierung und Anpassung des Grids ist notwendig.

Nun stürmen Hersteller mit Smartphones und Tablets den Markt. Subdomains mit vorangestelltem „m“ kennzeichnen, dass es sich um eine „optimierte“ Seite für mobile Geräte handelt. Doch in den wenigstens Fällen gelingt eine gute Umsetzung. Meist sind mobile Seiten nur rudimentär umgesetzt und bieten die nötigsten Funktionen sehr spartanisch an. Und die User Experience? Die hat das Nachsehen. Bedenken Sie bitte: Es gibt kein mobiles oder stationäres Internet. Es ist DAS Internet. So stellen Nutzer implizit die Anforderung, dass eine Seite automatisch auf jedem Gerät gut aussieht, vollen Funktionsumfang bietet und vor allem nutzbar ist.

Das Pflege-Aufwand-Dilemma

Da den Besuchern selbstverständlich alles geboten werden soll, was eine gute mobile Webseite ausmacht, erstellen Sie eine mobile Version Ihrer Seite. Genauer genommen sind es mindestens drei:

• iPhone-Größe: unter 480 Pixel
• iPad-Größe: unter 800 Pixel
• Bildschirm: über 800 Pixel

Darüber hinaus wird ein iPad beispielsweise nicht immer in der Portrait-Ansicht (hochkant) genutzt, sondern kann auch gedreht werden. Ebenso verhält es sich mit den kleineren Smartphone Kollegen. Sie ahnen worauf ich hinaus möchte? Richtig! Sie fangen an für jedes Gerät eine spezifisch optimierte Seite zu erstellen. Diese muss auch gepflegt werden. Also setzen Sie erneut bei allen Versionen erneut an, um diese zu optimieren. Das endet bei hohen Wartungskosten und in einem bald nicht mehr überschaubaren Pflege-Dilemma.

Wie hilft Responsive Webdesign Ordnung in das Chaos zu bringen?

Responsive bedeutet „auf jemanden einzugehen“ oder „reaktionsfähig“ zu bleiben. Klingt so, als ob diese Technik bei dem vorherrschenden Wust an Geräten Licht in das dunkle Webdesign Nirvana bringen könnte. Wie funktioniert das Ganze nun?

Einfach gesagt, reagiert das Design auf den Nutzer. Egal welche Auflösung er verwendet. Dazu benötigt man Konsistenz der Elemente, die sich auf der Seite befinden. Bilder, Tabellen, Logos, Texte, Videos… Alles muss sich flexibel anpassen. Flexibilität ist also das große Geheimnis.

Die erste Säule: Keine festen Layout-Grids

Für viele Designer ein graus! Haben sie sich doch an fest platzierte Bilder und angepasste Schriftgrößen gewöhnt. Nur so kann ihrer Meinung nach gewährleistet werden, dass die Seite gut aussieht und alles seine gewollte Position hat. Doch auch bei flexiblen Layouts wird nichts dem Zufall überlassen. Zugegeben: In der Planungs- und Konzeptionsphase kostet das Responsive-Modell mehr Schweiss und Arbeit. Dafür ist die Pflege einer Seite bei steigender Anzahl verschiedener Geräte deutlich geringer. Für die Planung empfiehlt sich die „Mobile first“ Maxime. Ein Bottom-Up Vorgehen, bei dem die kleinste Konstante zuerst betrachtet wird. In diesem Fall das Smartphone. Hier werden die wichtigsten Informationen festgelegt und wie diese dargestellt werden sollen. Es ist deutlich einfacher, Details hinzuzufügen als diese später entfernen zu müssen. Außerdem wird die Entwicklung der Seite ganzheitlich betrachtet.

Für die Umsetzung werden für Seiten und deren Elemente prozentuale statt fest vorgegebene Pixelwerte verwendet. Der Vorteil liegt auf der Hand: die Seite passt sich den Gegebenheiten an, unter denen sie verwendet wird und reagiert so auf ihren Nutzer.

Die zweite Säule: Keine festen Schriftgrößen

Ob Headline oder Fließtext, auch diese müssen angepasst werden und selbst auf Smartphones lesbar sein. Ist dies nicht der Fall, entsteht hier ein großer Konversionskiller. Informationen sollen auf kleinstem Raum auch gut und ohne Aufwand zu entschlüssen sein. So kann eine Schriftgröße von 14pt  auf dem Bildschirm gut gelesen werden. Auf dem iPhone hingegen bedeutet das Augenschmerzen. Hier muss der zu lesende Artikel schon sehr interessant sein, dass sich der Leser durch quält.

Eine feste Schriftgröße ist demnach tabu. Es kann mit prozentualen Werten gearbeitet oder auf alternative Maße wie em zurück gegriffen werden. JavaScript Plugins wie FitText skalieren dabei eigenständig die Größe von Headlines.

Die dritte Säule: Keine festen Bildgrößen

Auch Bilder müssen entsprechend skaliert werden. Zusätzlich sollen sie auf den hochauflösenden Displays gut aussehen und scharf dargestellt werden. Eine Zwickmühle. Werden sie auf dem stationären PC mit großen Bildschirm und schnellem Internet flott geladen und gestochen scharf dargestellt, kann ein zu großes Bild zu langen Wartezeiten führen, wenn man mobil unterwegs ist. Abhängig von der Bildschirmauflösung lädt beispielsweise ein JavaScript Plugin der Filament Group die gewünschte Grafik. So wird Ladezeit und die Nerven des Nutzers geschont. Eine weitere Option über HTML die korrekte Bildgröße auszuliefern bietet Adaptive Images.

Das Headerbild verschwindet bei kleineren Auflösungen komplett. Sehr Ressourcenschonend!

Wie wird die richtige Seite ausgeliefert?

Soll der Inhalt einer Seite für einen Ausdruck auf Papier formatiert werden, muss die entsprechende CSS Datei mitgeliefert werden. Der Browser fragt ab, wie er die Seite nun darzustellen hat. Für mobile Seiten wird ihm dies durch den „viewport“ mitgeteilt. Er vermittelt die Information, dass es sich zum Beispiel um ein iPad handelt. Ist diese Information ausgewertet, lassen sich über CSS3 Media Queries bequem die Inhalte anpassen. So wird der Content auf dem iPad nicht mehr auf 100% angezeigt, sondern skaliert auf 65%. Auch Schriftgröße und Bereiche wie Header und Footer lassen sich auf diese Weise komfortabel steuern. Seitenleisten für die Darstellung einer Navigation oder Kategorien können neu positioniert oder komplett ausgeblendet werden.

Der Inhalt wird also nicht automatisch korrekt in Position gerückt. Planung ist bei Responsive Webdesign extrem wichtig. Nur so kann eine perfekte Seite entstehen, die sich auf jede beliebige Größe einlässt.

Vorsicht Stolperfallen:

Worauf müssen Sie achten, wenn Sie planen eine Response Webseite zu entwerfen?

• Der Browser muss CSS3 Media Queries beherrschen und mit diesen umgehen können.
• Achten Sie auf die Ladezeiten der Seite. Passen Sie mediale Inhalte entsprechend an.
• JavaScript hilft bei der Entwicklung, kann aber auch zu langen Ladezeiten führen.
• Navigation ist nicht gleich Navigation! Ein Touchscreen reagiert nicht auf Mouseover Menüs.
• Der Content der Seite muss gut bemessen sein. Andernfalls können Seiten lang werden und weit unter Fold führen.

Mehr Inspirationen für Responsive Webdesigns:

50 Best Practices auf Design Modo

Sehr gute Beispiele auf MediaQueries

Fazit

Responsive Webdesign ist definitiv ein Trend der zukunftsweisend ist. Vor allem wenn Sie ihre Seite allen mobilen Plattformen zugänglich machen wollen. Denken Sie allerdings an genügend Zeit für die Planung, das Testing und die Umsetzung.

Wie sehen Sie die Zukunft für Response Webdesign? Können Sie sich eine Umsetzung auch in Onlineshops vorstellen oder haben Sie dies bereits getan? Lassen Sie es mich wissen. Ich freue mich auf Ihre Kommentare.

Als Consultant bei der Web Arts AG hat sich Dennis Herzberger der Usability und User Experience von Webseiten gewidmet. Sein leidenschaftlicher Fokus liegt auf der Konzeption und Optimierung von mobilen Commerce Portalen. Folgen Sie ihm auf Twitter.

Hat Ihnen der Artikel gefallen? Helfen Sie mit

Tags | mobile webseiten, responsive webdesign, Trends, User-Experience