Letztens – es war kurz nach Arbeitsschluss – gekonnt, weil gewohnt, bewegte ich mich mit meinem iPhone durch das mobile Netz. Mein Ziel: die Internetseite einer großen deutschen Kinokette. Auf meiner Agenda: das kurzfristige Ordern von Karten für eine abendliche Vorstellung. Zu meiner großen Verwunderung war der komplette Auftritt nicht für das Interagieren mit mobilen Devices konzipiert.
Wie kann das sein?
War dieser Kinokette etwa nicht bewusst, dass immer mehr Cineasten mit einem mobilen Gerät im Netz surfen und dementsprechend alle Services erwarten? War der Kinokette etwa nicht bewusst, welche Möglichkeiten einer überragenden User Experience ein auf mobile Nutzergewohnheiten optimierter Auftritt hat?
... Man weiß es nicht.
Möglicherweise schreckte die Kinokette die Vielzahl der mobilen Geräte ab oder die unterschiedlichen Browser und Auflösungen, die es zu berücksichtigen gilt. Vielleicht sorgten die flexiblen Benutzungsgewohnheiten, die man beachten müsste, für Kopfzerbrechen: Hält der User das Tablet hoch oder quer?
... Man weiß es nicht.
Die Kinokette kann jedoch aufatmen. Denn es gibt eine umfassende Lösung für all die zu berücksichtigenden Kriterien wie Bildschirmgröße, Eingabeart und Orientierung des Geräts. Anstatt die Website starr für beispielsweise das iPhone, das Galaxy Tab oder den Blackberry zu optimieren, müsste diese Website einfach intuitiv auf das darstellende Medium reagieren. Kurzum: Sie müsste responsive sein.
Oder um es mit Worten der Filmgeschichte zu sagen: Gutes zukunftsfähiges Webdesign sollte sich Rhett Butlers »Vom Winde verweht« Worte zu Herzen nehmen: »Ehrlich gesagt, meine Liebe, es ist mir egal.« – Responsive Web Design oder: one Web for all Media.
One Web for all media
Bisher lösten optimierte Auftritte für entsprechende Geräte das Reaktionsverhalten auf das wachsende Bedürfnis an mobile Websites. Dies oft nur mit speziellen und sehr reduzierten Inhalten. Dabei gerät man in ein Dilemma: Einerseits hält man dem Benutzer je nach seinem aktuellen Nutzungs-Kontext Informationen vor, andererseits fokussiert man die Seite auf den relevanten Content.
Findet der User den gesuchten Inhalt jedoch nicht auf der mobilen Version, ist er gezwungen – sofern möglich – auf die Desktop-Version zu wechseln. Und diese lässt sich auf einem kleinen Bildschirm meist nicht sehr elegant bedienen. Schlechte User Experience und gegebenfalls Frust sind dann die Folge.
Der wesentlich bessere Lösungsansatz ist es, je nach Ausgabemedium die gleichen Informationen (in HTML gefasst) abzubilden und nur die optische Präsentation der Informationen anzupassen. Dies geschieht einzig und allein über CSS.
Was ist Responsive Web Design?
Die Idee hinter Responsive Web Design agiert als adaptives Layout. Um mit diesem Begriff umgehen zu können, sollte man sich drei bisherige Layoutkonzepte vor Augen führen:
- Fixed-Layout
Die Seite hat eine feste Breite. Angaben über Größenverhältnisse werden fest über Pixelwerte definiert. - Liquid-Layout
Die Seite ist in der Breite flexibel, in der Regel mit einer minimal und maximal Breite begrenzt. Größen sind im Idealfall relativ, also in Prozentangaben. - Elastic-Layout
Eine Mischung aus Fixed- und Liquid-Layouts. Alle Größenangeben werden mit der relativen Angabe »em« gemacht.
Ein neuer Weg – Responsive Web Design – löst sich von alten Paradigmen, geht dabei neue Wege und führt zudem auch bestehende Konzepte fort.
Vorhandene Elemente passen sich nicht nur in Höhe und Breite der Screengröße an, sondern werden je nach Medium ausgeblendet oder differenzierter dargestellt. An dieser Stelle spricht man dann von einer adaptiven Lösung.
Da der Ausgangscode (HTML) dabei immer derselbe ist und die optischen Anpassungen ausschließlich über CSS (Präsentationsschicht) realisiert werden, ist es essenziell wichtig, eine klare und überlegte Trennung von Layout und Inhalt zu pflegen – entsprechendes Know-how vorausgesetzt.
