Responsive Design Day 1 auf der IPC 2013

Responsive Design besser machen
Kommentare

Responsive Web Design (RWD) wurde 2010 in einem Artikel von Ethan Marcotte erstmals als Begriff benannt. Dabei ist es ein Irrglaube, dass es nur für schönes Design sorgt. Viel mehr soll es eine optimale User Experience auf möglichst vielen verschiedenen Gerätetypen ermöglichen. Aber das ein oder andere Manko kann einem da einen dicken Strich durch die Rechnung machen.

Responsivität ist gerade in den letzten Jahren ein großes Thema geworden, weil die Flut an Mobile Devices sie quasi einfordert. Das Internet hat sich verändert durch die Art und Weise, wie wir es konsumieren – und das findet immer häufiger auf Smartphones oder Tablets und immer weniger auf dem klassischen Desktop oder Laptop statt. RWD hat das Ziel, Content bestmöglich an die Gegebenheiten anzupassen. Aber woher weiß man heute, wie, wo und womit User das Web aufrufen? Klar, es gibt verbreitete Breakpoints, aber die Hersteller halten sich nicht unbedingt daran und lassen sich erst recht nicht vereinheitlichen. Die Auflösungen explodieren, Stichwort Quad-HD, und neue Gerätearten kommen auf den Markt, wie Johannes Brosi (Mayflower), bei der IPC 2013 zu bedenken gab: „Es ist gigantisch, was da alles auf uns zukommt.“

User wollen bestmögliche UX

Dabei sei den Usern vor allem die UX wichtig: Seitenaufrufe sollen schnell und flüssig passieren, Anwendungen perfekt ins OS integriert sein. Sinnvoller ist es daher, das RWD am Content auszurichten: „Der Content gibt die Breakpoints vor.“

Dabei sollte aber auch das Vorgehen überdacht werden: Den Königsweg sieht Brosi in Planung – Prototyping – Prüfen – Korrigieren. Außerdem gilt die Devise „Mobile first“.

Polyfills, kleine JavaScript-Bibliotheken, rüsten fehlende Features in älteren Browsern nach, zum Beispiel Respond.js für Media Queries in älteren IEs. CSS Sprites sind zusammengefügte Bilder, die http-Request verringern und besser gecached werden können.

Für (fast) jedes Problem eine Lösung

Hinzu kommen weitere Umstände, wie etwa die Tatsache, dass Responsive Images noch keinem Standard unterliegen, das Script Loading Behaviour ist ein einziges Durcheinander und und und. Doch zumindest teilweise gibt es Lösungsansätze und Techniken, von denen Anselm Hannemann, Freiberuflicher Web-Entwickler, einige vorstellte, z.B.:

  • Web Components: Polymer Projects
  • Responsive Images: picture/srcsetfill + Imager.js
  • Resource Priorities: Bisher nur require.js
  • Touch/Pointer: Pointer.js

Man sieht, RWD ist zwar nicht perfekt, aber das richtige Verständnis und die richtigen Lösungsansätze an richtiger Stelle können die User Experience erheblich verbessern. Um RWD noch besser zu machen, rät Hannemanns jedem dabei mitzuhelfen, das Web voran zu treiben, indem man testet und Feedback gibt.

Wer mehr zu RWD erfahren möchte, der sollte die anderen Berichte und Interviews zu dem Thema von der IPC 2013 nicht verpassen! Ihr findet Links dazu unter diesem Bericht. 

Aufmacherbild: responsive web design, elements are displayed on different devices von Shutterstock / Urheberrecht: SONCHAI JONGPOR

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -