Responsive Design: Nur die Spitze des Eisbergs – Das Thema ist sehr komplex

Brad Frost ist mit Sicherheit einer der Webgurus zum Thema Responsive Design / Responsive Webdesign. in einem seiner zahlreichen Beiträge zu diesem spannenden und neuen Thema im Internet sagt er ganz deutlich, daß es neben dem Responsive Design noch sehr viele weitere Dinge zu bedenken gibt. So wird das Thema Responsive Design schnell zu einem Gesamtkonzept, daß es zu überdenken gilt. Ein weiterer sehr wichtiger Teil von in diesem Responsive Konzept ist unter anderem das Thema Responsive Content. Ich hatte in einem vergangenen Artikel bereits darauf hingewiesen nicht immer alles auf den Focus Smartphone User zu setzen, sondern sich auch auf die Reichweite von TV Geräten im Internet zu konzentrieren. In der oben abgebildeten Infografik sind noch viele weitere Punkte erwähnt, die den Responsive Eisberg ausmachen.

Feature Detection und Device APIs für Responsive Design:

Es ist sehr schwer das richtige Gerät zu bestimmen. In einem zukünftigen Artikel werde ich näher auf dieses Problem eingehen. Grundsätzlich kann man allerdings leider festhalten, dass man trotz verschiedener Methoden, sowohl serverseitig als auch clientseitig nicht zu 100% bestimmen kann mit welchem Endgerät man es zu tun hat. Je nach Endgerät stehen einem gerade in Bezug auf Smartphones natürlich unterschiedliche Möglichkeiten zur Verfügung. Es macht Sinn diese zur Verfügung stehenden Features zu erkennen und für seine Webseite zu nutzen. Dadurch kann man einen User einen gezielteren Service anbieten. In diesem Zusammenhang stehen natürlich auch die Bedürfnisse der unterschiedlichen Zielgruppen gerade wenn man nur die einfache Unterscheidung des Desktop Users und des Smartphon Users betrachtet.

RWD mit serverseitiger Unterstützung

Ladezeit und Performance sind natürlich gerade für Smartphone User ein absolut entscheidendes Kriterium. Serverseitig gibt es verschiedene Möglichkeiten die zu übertragene Datenmenge möglichst gering zu halten. Gerade Bilder und Grafiken stehen hier besonders im Fokus. Eine Möglichkeit, die jedoch sehr aufwändig und auch kostspieliges sein kann, ist es die Bilder immer die genaue Größe für den User zu generieren. So entstehen allerdings sehr viele Versionen von Bildern. Eine sehr große Herausforderung in diesem Zusammenhang ist dann eine Änderung an einem bestehenden Bild. Daher gibt es einige Konzepte, die nicht darauf aus sind für jede angefragte Größe ein exaktes Bild zu erstellen, sondern von einem Bild sagen wir fünf Versionen anbietet. Aber auch hier entstehen wiederum Schwierigkeiten. Logos oder Bannerwerbung ist eventuell gar nicht so groß, dass man sie ohne weiteres zum Beispiel für ein TV Format beliebig auf HD Qualität vergrößern kann. Generell ist das natürlich sehr schwierig Bilder aus einem Ausgangsformat zu vergrößern. Das bedeutet schließlich für den Webdesigner, daß er alle seine Grafiken auf größtmögliche Format in größtmöglicher Qualität als Ausgangsformat zur Verfügung stellen muss. Die Arbeitsprozesse werden hier nicht einfacher, abgesehen davon das man gegen die Macht der Gewohnheit kämpfen muss. Hier wurde jetzt nur das Thema der Bilddateien aufgeführt, auch in anderen Dateien wie Javascript oder CSS ist es natürlich möglich vieles, das nicht für den Smartphone Usern gebraucht wird ein Datenvolumen einzusparen.

Content Strategy Responsive Content für Responsive Design

Das Surfverhalten eines Desktop Users unterscheidet sich sehr von dem eines Smartphone Users. Die Klickrate und auch die Zeit auf einer Seite ist bei einem Smartphone User deutlich geringer. Ein Desktop User ist auch damit verwöhnt sich zusätzlichen hochwertigen Webdesign Content in Form von Bildergalerien oder Videos, weiterführenden Links und Kommentaren anzuschauen. Das ist gar nicht der eigentliche Content, um den es in der Seite geht. Eine erfolgreiche Content Strategie stellt also den Fokus des eigentlichen Contents nach vorne. Wenn man nur diesen Content betrachtet kann man diesen auch gezielt für den Smartphone User aufbereiten. Die Texte können gekürzt werden und vor allem die Headlines können natürlich auch wesentlich verkürzt werden, damit ein Text schneller erfasst werden kann. In einer Contentstrategie für eine Internetseite gibt es viele Contenttypen, die im einzelnen für den jeweiligen User betrachtet werden müssen.

Touch Feature kein Mouseover für Responsive Webdesign

Der Smartphone User benutzt keine Maus. Das mag jetzt keine neue Erkenntnis sein, aber es muss dennoch immer wieder betrachtet werden. Die gesamte Mouseover Funktion fällt also für den Smartphone User weg. Das betrifft Navigationen, Tool Tipps zum Beispiel aus Glossar Funktionen uns natürlich auch Animationen oder sonstige Spielereien, die ein Desktop User sehr gerne hat. Das ist ein sehr kritischer Punkt, der gerade bei Webdesign Relaunches von bestehenden Internetseiten auf Response Design Schwierigkeiten macht. Konzeptionell ist es also sehr wichtig diese beiden User zu unterscheiden. Genau an diesem Punkt kommt der dritte User ins Spiel. Der Tablet User. Er hat die volle Bandbreite zur Verfügung, betrachtet die Internetseite auf einer sehr hohen Auflösung und hat trotzdem keine Maus. Hier spielt also auch wieder das Thema Device Detection eine große Rolle. Einer der ersten Schritte, die man auf jeden Fall machen sollte, ist bei der Frontend Programmierung Mouseover und onClick-Events zu verbinden. Aber hier liegt auch der Teufel im Detail. Bei Navigation in ist das onClick-Event mit einem Link verbunden. Das ist der Desktop User so gewohnt. Er möchte keine zwei Klicks in der Navigation gebrauchen. Das ist hier bei der Verbindung gewährleistet. Der Smartphone-User hingegen möchte sich die geöffnete Navigation gerne anschauen, ohne jedes Mal direkt die Seite zu wechseln. Er kommt sonst garnicht auf eine Unterseite. Auch an diesem einfachen und elementaren Beispiel einer Navigation sieht man die Komplexität des Themas Responsive Design.

Fazit zum Thema Responsive Design

Responsive Design ist für uns alle Neuland. Die Techniken, die hinter den einzelnen Komponenten, die für Webdesign zusammen spielen, erleben gerade rasante Weiterentwicklungen. Zum Teil sind Konzepte schon sehr ausgereift, insgesamt ist das Thema allerdings noch sehr experimentell. Jeden Tag sammeln wir neue Erfahrungswerte und lassen diese in unsere tägliche Arbeit einfließen. Das gesamte Thema ist allerdings noch lange nicht ausgereift und bleibt weiter spannend. Wichtig ist erst einmal die Erkenntnis das nur eine flexible Darstellung von Webdesign nicht gleichzeitig Responsive Design ist. Das gesamte Thema ist sehr komplex und wird leider zum Teil von Agenturen sehr unseriös behandelt. Den ahnungslosen Kunden werden hier zum Teil Dinge verkauft, die ihm keinen zusätzlichen Mehrwert für sein Webdesign bringen. In Zukunft werde ich hier über einige Beispiele berichten.

Weiterführende Links zum Thema Response Design von Brad Frost:
http://bradfrostweb.com/  

Twitter Web20 Link zum Thema Responsive Design
https://twitter.com/RWD

Präsentation zum Thema Responsive Design von Brad Frost

Bildergalerie zum Thema Responsive Design von Brad Frost auf Slideshare