Responsive Webdesign (RWD) am Beispiel der Website der zeroseven design studios

Was bedeutet eigentlich Responsive Webdesign (kurz: RWD genannt) und welche Grundlagen sind für die Entscheidung, ob eine Seite Responsive Webdesign unterstützen soll oder nicht, erforderlich? Mit Responsive Webdesign ist das ansprechbare oder auch reaktionsfähige Webdesign gemeint. Das bedeutet, dass sich das Design und die Inhalte einer Website auf die mögliche Größe des Browsers anpassen. Dies wird über sogenannte „Media Queries“ erreicht. Der Inhalt der Website passt sich hierbei vom mobilen Browser bis zum 27″ entsprechend an. Sogenannte „Breakpoints“, die durch die Media Queries definiert werden, erlauben, dass gewisse Eigenschaften bei zutreffen bestimmter Voraussetzungen eintreten. Ein Beispiel dafür wäre, dass die Navigation bei einer bestimmten Displaygröße zusammenrückt und ein anderes Design erhält und das Firmenlogo auch an eine andere Position rückt.

Welche alternativen Möglichkeiten gibt es noch? Wir beleuchten erst, welche Unterschiede es gibt und zeigen Ihnen dann, was für unsere Entscheidungsgrundlage war.

Grundsätzlich gibt es bei der Planung einer Website zwei wesentliche Möglichkeiten. Die erste Überlegung sollte sein, ob die Website vorrangig für die mobile Nutzung konzipiert wird oder für eine Desktop-Anwendung. Ist die Herangehensweise so, dass die Website für den mobilen Nutzen eine höhere Relevanz hat und speziell hierfür konzipiert wird, spricht man auch gerne von „Mobile First“ und es wird meistens damit Responsive Webdesign gemeint. Das bedeutet, wie das Wort schon sagt, zuerst die mobile Variante. Bei dieser Variante handelt es sich um eine unabhängig konzipierte und programmierte Website. Das setzt aber voraus, dass zuerst überprüft wird, ob für das anstehende Webprojekt die entsprechende Zielgruppe, sowie die dafür notwendigen Inhalte vorliegen. Es nützt nichts, eine Website unbedingt auf Responsive Webdesign aufzubauen, wenn weder die Zielgruppe Mobile Devices einsetzt, noch der Inhalt dafür geeignet ist. Bei der Planung und Konzeption unterscheidet man dann nochmals zwischen „Progressive Enhancement“ und „Graceful Degradation“. Progressive Enhancement ist die Variante von Mobile First. Das bedeutet, dass die mobile Seite zuerst konzipiert wird. Bei Graceful Degradation wird erst die Desktop-Variante konzipiert und umgesetzt – und im Nachgang dann die mobile Website angepasst. Dabei kann die mobile Website gegebenenfalls noch abgespeckt und auch inhaltlich angepasst werden. Umgekehrt wird erst die mobile Website konzipiert und dann im Nachgang die Desktop-Variante.

Grundsätzlich gilt auch zu berücksichtigen, dass bei mobilen Websites der Progressive Enhancement ein grundsätzlich anderes Navigationskonzept herangezogen werden muss, als bei Graceful Degradation. Über die Bedienung von Touchscreen Displays sind Rollover-Effekte wie bei einer klassischen Website nicht einzusetzen. Auch die Bandbreite spielt dann eine wichtige Rolle.

Graceful Degradation
Die Entscheidung der zeroseven design studios fiel eindeutig auf Graceful Degradation bezüglich der neuen, unternehmenseigenen Website. Durch die Anforderung der Zielgruppe als auch durch die aktuellen Zahlen der Statistik ist die mobile Website für uns wichtig – die Desktop-Variante ging aber eindeutig vor. Wie hoch die Zugriffszahlen über mobile Endgeräte auf eine Seite sind, hängt natürlich auch immer von der Beschaffenheit der Seite ab. Wir sind auf jeden Fall gespannt, wie sich die Zugriffszahlen im Nachgang verändern.
In der Planung und Vorgehensweise wurde bei unserem Relaunch die Desktop-Variante im vollen Umfang geplant, konzipiert und umgesetzt. Im Nachgang hatten wir uns dann überlegt, wie wir die mobile Website aufbauen wollen. Hier war schnell klar, dass wir ein anderes Navigationskonzept benötigen als bei der Desktop-Variante. Die Filterfunktion der Desktop-Variante war in diesem Umfang für die mobile Website nicht umsetzbar. So haben wir uns dann gegen die Filterfunktion entschieden und zeigen jeweils nur die fünf Hauptpunkte der Filterfunktion als Navigationspunkte an. Hier hat sich unser Konzept nochmals bewährt. Die Darstellung der Boxen die wir auf der Website abbilden, konnte perfekt auf das Layout der Mobilgeräte modifiziert werden. Hier hatten wir im Gegensatz zur Website die Anordnung auf zwei Beiträge in einer Zeile reduziert und die Zeilenanzahl ist wiederum abhängig von der Anzahl der Artikel die angezeigt werden. Im Headbereich haben wir ebenfalls das gleiche Konzept wie auf der Desktop-Variante verfolgt. Lediglich die Leitmotive mit dem jeweiligen Erklärungstext werden nicht nebeneinander positioniert sondern untereinander. Das Rastersystem und die Aufteilung der Website in einzelne Content-Boxen hat sich hier als sehr flexibel und anlassbar herausgestellt. Wählt der User nun einen der Artikel aus, erhält er auf der Folgeseite die Referenzen-Bilder wie auf der Desktop-Variante zum durchblättern angezeigt. Die Bildgröße der Referenzbilder wurde hier gleich von TYPO3 auf die richtige Größe der mobilen Website skaliert. Alternativ wäre wie bei einem Beispiel von Progressive Enhancement die Lösung gewesen, dass die Bilder immer abhängig von der Browserauflösung auf die richtige Größe skaliert werden.
Hierbei müssen, bei der Konzeption und Planung der Website, die Vor- und Nachteile zwischen Progressive Enhancement und Graceful Degradation abgewogen werden. Je nach Wahl des CMS-Systems und deren Möglichkeit kann es von einem größeren Vorteil sein, zentral die Bilder jeweils für das entsprechende Ausgabegerät gleich auf die richtige Größe zu skalieren. Vor allem im Hinblick auf die Bandbreite des mobilen Internets ist jeder KB von Bedeutung. Die Inhalte der Website sind in unserem Beispiel im gleichen Umfang wie bei der Desktop-Variante. Hier wäre natürlich noch die Möglichkeit, dass für die mobile Website gekürzte Texte angeboten werden. Das hätte aber dann konsequenter Weise zur Folge, dass zwei unterschiedliche Texte gepflegt werden müssten. Natürlich ist der Text-Ursprung jeweils der gleiche. Es macht aber kein Sinn, dass der Text auf der mobilen Website dann bei einer bestimmten Anzahl von Zeichen einfach abgeschnitten wird.
Der Footer-Bereich der Website ist im Großen und Ganzen ähnlich aufgebaut wie der, der Desktop-Variante. Die Adressen der jeweiligen Niederlassungen werden hier nochmals sauber im Footer angezeigt. Hier sollte vor allem in der Planung darauf geachtet werden, dass eine Vielzahl der User einen schnellen Zugriff auf die Telefon-Nummer und Adresse des Unternehmens suchen. Daher ist es immer ratsam, die Informationen an einer prominenten Stelle zu positionieren.

Sie sehen, dass je nach Anforderung und Ausgangsposition von Fall zu Fall unterschieden werden muss, welche Vorgehensweise die Richtige ist. An unserem Beispiel fiel eindeutig die Wahl zu Graceful Degradation. Das kann in einem anderen Fall aber auch von Nachteil sein.

Die Basis jeder Entwicklung
Die Basis jeder Entwicklung einer guten Website sollte ein flexibles Rastersystem sein. Anhand des Rastersystems können dann je nach Endgerät die Inhalte sauber positioniert werden, oder die Inhalte passen sich entsprechend der Browsergröße automatisch an. Wenn Sie sich zum Beispiel die Website „by by Bonus“ von PistenBully anschauen und Ihr Browserfenster rechts unten größer oder kleiner schieben, dann werden Sie sehen, wie sich der Inhalt an die Größe des Bildschirms anpasst. Das ist ein klassisches Beispiel, welches über ein Grid-Rastersystem von …. umgesetzt wurde. Ein weiteres passendes Beispiel für eine Responsive Website finden Sie bei RedBull. Hier passt sich der Inhalt ebenfalls entsprechend der Browsergröße an. Die Bilder werden beim Ändern der Browsergröße auf das richtige Format skaliert.
Beide Beispiel haben hier eine unterschiedliche Herangehensweise. So passt sich zum Beispiel die Bildgröße der RedBull-Seite automatisch der Browsergröße an, so ist am Beispiel der PistenBully-Seite nur die Anordnung der Inhalte anders. Bei der Lösung von RedBull bedeutet das, dass die entsprechenden Bilder in einer deutlich höheren Auflösung vorgehalten werden, als diese tatsächlich auf dem Monitor angezeigt werden. Das hat den Nachteil, dass die tatsächliche Datenmenge teilweise höher ist als die, die tatsächlich gerade am Monitor benötigt wird.

Links zum Artikel:
PistenBully Gebrauchtfahrzeuge
RedBull Media House
Golden Grid System

Veröffentlicht von

thomass

Thomas Seruset, Geschäftsführender Gesellschafter der zeroseven design studios in Ulm.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.