en
de

Herausforderungen beim Responsive Design

13 Februar 2014
| |
Lesezeit: 3 Minutes

Ein responsiver Webauftritt besticht. Es entspricht der steigenden Kundenerwartung, Seiten übers Mobiltelefon und Tablet von Unterwegs zu verwenden. Der Benutzerkreis wird vergrössert ohne plattform-bedingte Code-Vervielfachung wie z.B. bei nativer Entwicklung. Doch der Weg zum Ziel birgt mehr Herausforderungen, als zu Beginn angenommen.

Eine naheliegende Herausforderung ist die geringere und fluktuierende Bandbreite. Der mobile Benutzer will auch von Unterwegs die Seiten bedienen. Dies bedeutet, dass die Seiten entschlackt werden müssen. Es bringt aber nichts, Teile einer Seite über CSS auszublenden und sie somit nicht anzuzeigen, damit der Inhalt Platz auf dem kleinen Bildschirm findet. Die überflüssigen Inhalte sollten erst gar nicht ans mobile Gerät  gesendet werden, damit die Seite schnell auf dem Mobiltelefon angezeigt wird. Es stellt sich ausserdem die Frage, wieso ein Inhalt, der auf dem Mobiltelefon nicht angezeigt wird, überhaupt für den Desktop-Anwender relevant ist. Dies bedeutet folgerichtig, dass im Zuge eines responsive Projekts der gesamte Online-Content überdenkt werden muss. Die Desktop-Seiten müssen auch angepasst werden. Ein weiterer Aspekt: Netzwerk- resp. Verbindungsfehler sind nicht mehr die Ausnahme. Denken Sie nur an Fahrten durch Tunnels oder das Benutzen von Aufzügen innerhalb von Gebäuden. Wurde früher „grosszügiges Exception-Handling“ für Desktops  betreffend Verbindungsfehler betrieben, rächt sich dies jetzt vor allem bei asynchronen Aufrufen.

Die geringere und fluktuierende Bandbreite hat aber auch einen grossen Einfluss auf die Bilder einer Webseite. Hochauflösende grosse Bilder gehören zum guten Design von Desktop-Webseiten. Werbung ist allgegenwärtig. Auf einem Mobiltelefon will niemand grosse Bilder herunterladen. Sie kosten nur Zeit und Fläche. Doch wie wird das Problem der benötigten Bilder gelöst? Ein möglicher Ansatz ist, Bildern pro Device-Klasse anzubieten. Das W3C schlägt das <picture>-Tag vor, welches erlaubt, zu einem Bild mehrere Quellen mit unterschiedlicher Auflösung anzugeben. (Stichwort: Responsive Images). In meinem aktuellen Projekt haben wir das Retournieren des richtigen Bildes mittels server-seitiger Device-Detection selbst implementiert. Es gibt aber auch Open-Source-Lösungen wie Adaptive Images oder das Picture-Polyfill picturefill.

Auf dem Mobiltelefon ist sich der Anwender eine andere Interaktion und Visualisierung mit Effekten gewohnt. Die Herausforderung: Es braucht Entwickler und Designer mit Affinität für mobile Entwicklung und es müssen  Styleguides erarbeitet werden, die den mobilen Kontext berücksichtigen. Beim Entwickeln von Styles wird im responsiven Umfeld immer mehr auf Style Tiles — ein agiles Vorgehen zum Erstellen von Styleguides — gesetzt. Das Resultat: Styleguides sind heute im Intranet selbst als responsive Seiten umgesetzt. Pixelgenaue Styleguides gehören immer mehr der Vergangenheit an.

Der Trend zu Style Tiles zeigt, dass Responsive auch eine Prozess-Änderung bedeutet. Ohne ein agiles Vorgehen funktioniert Resposive nicht. Designer, Requirements-Engineer, Product-Owner, Entwickler und Tester sind im gleichen Team und sitzen zwecks schnellem Austausch und Sicherung der Konsistenz im gleichen Büro. Es gilt also, die Herausforderung betreffend Agilität und interdisziplinären Teams anzupacken. Dies gilt für Responsive Design Projekte in gleichem Masse wie auch für die App-Entwicklung

Apropos Tester: Testing ist auch eine infrastrukturelle Herausforderung. Manuelles Testen auf echten mobilen Geräten ist essenziell. Zum Beispiel langsame oder nicht funktionierende Animationen und verschobene Ausrichtungen sowie ganz seltsame, unerklärliche Bugs konnten wir in unserem Projekt nur dank des Testens auf echten Geräten finden. Der Testpark sollte dabei auch alte, noch weit verbreitete Smartphones und Tablets umfassen.

Zusammengefasst:

Eine gute Zusammenarbeit von Entscheidungsträgern, Designern, technischen Spezialisten und Testern, sowie der agile Prozess und das Testen auf echten mobilen Geräten sind die entscheidenden Faktoren, um die genannten Herausforderungen zu meistern. Bestehende Inhalte und Darstellungen müssen gründlich überdacht und Spezialitäten von mobilen Anwendungsfällen berücksichtigt werden.

Kommentare (0)

×

Updates

Schreiben Sie sich jetzt ein für unsere zwei-wöchentlichen Updates per E-Mail.

This field is required
This field is required
This field is required

Mich interessiert

Select at least one category
You were signed up successfully.