# 18. April 2012

Fragen und Antworten zum Responsive Webdesign

Responsive Webdesign ermöglicht auf sämtlichen Endgeräten die bestmögliche Darstellung und Usability von Webinhalten. So können Internetauftritte im Browser, auf Tablets und Smartphones die volle Performance ausschöpfen.
 

 
In den letzten Wochen durften wir auf den Launch von gleich zwei neuen Responsive Webdesign Projekten anstoßen: Inverve und Julius Berger Nigeria. Da kam uns Robin Schönbächler gerade recht, denn er hat uns ein paar Fragen zum Thema Responsive Webdesign für seine Bachelorthesis gestellt.

Allgemeine Fragen

Wie ist Ihr Vorgehen in der Konzeption/Umsetzung einer Website, welche für Desktop, iPad und iPhone erstellt wird?
Mittlerweile haben wir schon einige Websites im “Responsive Design” umgesetzt. Unsere Designs basieren auf einem eigens entwickelten “Grid Raster”. Auf diesem aufbauend entwickeln wir unsere Designs nach einer ersten Grobkonzeptphase in Photoshop. Dabei gehen wir nicht unbedingt stur nach dem “Mobile First” Ansatz vor, sondern entwickeln zunächst anhand des Rasters ein Masterlayout der Seite – Ob Desktop oder Mobile First kommt bei uns auf den Einsatzzweck an, meist gibt aber noch die Desktop Version den Ton an, aus der Layouts für die mobilen Endgeräte abgeleitet werden. Wenn es der Projektumfang rechtfertigt, arbeiten wir auch gerne mit Klickdummys um unsere Entwicklung auf diversen Endgeräten zu testen und einen Eindruck für Look and Feel der Seite zu bekommen.

Gemäß meinen bisherigen Recherchen erkenne ich zwei geeignete Ansätze, um eine Website für unterschiedliche Endgeräte zu realisieren: Der eine ist die Umsetzung eines Projekts im Rahmen des “Responsive Webdesign” (Flexibles Layout/Bilder, CSS3 Media Queries). Der andere ist, drei komplett individualisierte Versionen für Desktop, iPad und iPhone zu erstellen. In der iPad und iPhone Version wird zudem, durch mobile Frameworks eine Bedienung umgesetzt, die derer einer nativen App ähnelt (“Tab Bar”).

Welche dieser Varianten sehen Sie als geeignet, um eine Website umzusetzen? Oder verfolgen Sie einen anderen Lösungsansatz?
Wir verfolgen eher die erstere Variante d.h. Responsive Design mittels Media Queries. Die Bildschirmbreite (korrekter der “Viewport”, quasi das “Loch im Browser”) wird ausgelesen, und dem Nutzer dann eine für seinen Viewport optimierte Version ausgeliefert. Dabei orientieren wir uns zwar maßgeblich an iPhone, iPad und Co, die Seiten werden aber auch auf mobilen Endgeräten anderer Hersteller optimiert dargestellt und dort erfolgreich getestet. Bei einigen Seiten optimieren wir dann zusätzlich noch die Bedienung. Wird beispielsweise ein iPad mittels User Agent Abfrage erkannt, werden zusätzliche “Touch” Bedienoptionen ausgeliefert. Zum Beispiel das “Wischen” in einer Bildergalerie, oder der Verzicht auf “Mouseover” Effekte.

Gibt es einen gemeinsamen Nenner / Kompromiss zwischen Qualität und Ladezeit für Bilder auf Desktop, iPad und iPhone? Welches ist die optimale Auflösung für Bildmaterial auf Websites, welche für die verschiedenen Plattformen erstellt wird?
Hierfür gibt es unseres Erachtens kein “Patentrezept”. Bei der Website ‚julius-berger.com’ werden die Bilder beispielsweise serverseitig in drei verschiedenen Größen konvertiert und dem entsprechenden Endgerät wird nur das jeweils passende Format ausgeliefert. Aufgrund der Bandbreitenproblematik im Heimatland von Julius Berger Nigeria ist das sicher eine gute Lösung. Bei einer Lösung, bei der es nicht so sehr auf Ladezeit und Performance ankommt, könnten die Bilder auch hochauflösend geladen, und dann auf dem Endgerät entsprechend per CSS verkleinert werden.

Inhalt und Aussehen

Sollte die iPad Version der Website optisch und inhaltlich eher der Desktop Website ent-sprechen oder ist eine eigenständige Version zu bevorzugen?
Wie eingangs schon erwähnt orientieren wir uns zwar an den Apple Endgeräten, aber ich würde diese Zwischengröße gerne generisch als “Tablett” bezeichnen. Selbst die bisher erschienen iPads unterscheiden sich ja gerade im Display deutlich. Unseren Ansatz kann man mit einem Tablett in der Hand gut anhand von Julius Berger oder Inverve nachvollziehen. Während im “Landscape Modus” noch die Desktop Variante darge-boten wird, wandert die Navigation – hält man das iPad horizontal – an den linken Bildschirmrand, ansonsten ist die Tablett Variante stark an der Desktop Version angelehnt.

Welche Informationen einer Website sollen auf dem iPhone abrufbar sein?
Das ist Konzeptspezifisch. Im Grunde ist dies auch nicht mehr Frage des Responsive Designs, sondern des inhaltlichen Konzepts. Es ist aber denkbar, dass man Interessenten verwirrt und frustet, wenn Informationen nur auf dem Desktop verfügbar sind. Nehmen wir an, Sie surfen zuhause am Rechner auf die Seite eines Unternehmens und sehen ein interessantes Jobprofil. Am nächsten Tag treffen Sie einen Kommilitonen und wollen Ihm die Stelle zeigen, aber mit dem iPhone wird Ihnen die Stellenbörse nicht angezeigt.

Ist es demnach sinnvoll, in den mobilen Versionen der Website, eine Möglichkeit zum Wechsel in Form eines Links auf die “normale” Desktop Version zu stellen?
Falls relevante Inhalte vorenthalten werden, würde ich das für sinnvoll erachten.

Um Platz zu gewinnen kann der Safari Browser mittels des Meta Tags “apple-mobile-web-app-capable” ausgeblendet werden.

Ist dieser zusätzlich gewonnene Platz, hauptsächlich im Bezug auf das iPhone, für die Website von Vorteil oder wird die Usability (kein Browserfenster mehr) zu sehr eingeschränkt?
Das führt meines Erachtens etwas weg vom Thema Responsive Design, da ich da gerade ja nicht Herstellerspezifische Dinge in den Code packen will. Die beschriebene Vorgehensweise halte ich nur bei Web-Apps für sinnvoll.

Testing

Welches Vorgehen beim Testing für mobile Websites verwenden Sie? (Browser? Emulatoren? Simulatoren?). Erstellen Sie einen sogenannten “Mobile Testing Plan” für ein Webprojekt, um alle Eventualitäten abzudecken?
Hier haben wir mittlerweile unseren eigenen kleinen Testparcour zudem auch Emulatoren gehören. Wenn sich die Entwicklung einem finalen Stand nähert, oder ein Klickdummy vorliegt, testen wir aber am liebsten direkt mit den unterschiedlichsten Gerätschaften.

Worin sehen Sie die Vorteile einer mobilen Website im Vergleich zu einer nativen App?
Entschuldigung, aber das wäre jetzt noch einmal ein ganzes Interview…

Aber kurz gesagt: Mobile Website = 1x Programmieren für alle Endgeräte, Native App = 1x Programmieren für 1 Endgerät. Wenn man ein ganz bestimmtes Gerät adressiert und auf dessen Gerätefunktionen (Kamera, GPS) angewiesen ist, dann braucht man eine auf das Gerät optimierte Web App, oder eine native App.



Tobias Hurrle
Geschäftsleitung Kreation
0 71 31 - 642 90 40
Tobias Hurrle