Konzeptionelle und technische Umsetzung von Responsive Web Design

RWD – Best Practices
Kommentare

Responsive Web Design (RWD) wurde dank CSS und HTML5 möglich und stellt eine Reaktion auf die  steigende Nutzung von Mobile Devices und damit des mobilen Internetkonsums (2013 waren es 70 Prozent) sowie die steigende Gerätevielfalt und deren unterschiedlichen Auflösungen dar. Aber RWD ergibt nicht unter allen Umständen Sinn, wie die häufigsten genutzten Smartphone-Apps 2013 verdeutlichen: Diese waren zu 37 Prozent Instant-Messaging-Apps, zu 27 Prozent Community- und Social-Network-Apps und zu 26 Prozent Nachrichten-Apps auf den ersten drei Plätzen. Im Vergleich dazu machten Shopping- und Presivergleich-Apps zum Beispiel nur 5 Prozent aus. Man muss sich bei RWD also immer erst fragen, ob sich der Aufwand wirtschaftlich überhaupt rentiert.

RWD hat klare Vor- aber auch Nachteile. Zu den Vorteilen gehört, dass RWD sich auf das Wesentliche beschränkt – der User erhält nur die Infos, die er primär braucht. Gleichzeitig ist das aber auch ein Nachteil, denn viele Randinformationen, die sich auf dem Desktop schön präsentieren lassen, fallen unter Umständen weg. Aufgrund der verbreiteten Nutzung mobiler Devices kann man mit RWD die Zielgruppe deutlich erweitern und außerdem plattformübergreifend präsent sein. RWD bietet darüber hinaus eine günstigere Alternative zu Mobilen Apps. Negativ zu werten sind, dass die Erstellung und Optimierung eines RWD durchaus aufwendig sind, die Browserunterstützung mitunter eingeschränkt sein kann und man keinen Zugriff auf die gerätespezifischen Funktionen hat.

Sollte man zu dem Schluss kommen „Ja, eine Responsive-Lösung ist für mein Projekt sinnvoll“, ist es ratsam, den Umsetzungsprozess nach Best Practices zu gestalten.

Karl-J. Wack und Philipp Mürder haben solche Best Practices auf der MobileTech Con 2014 in München in ihrer Session „Responsive Web Design – Best Practice Approach“ vorgestellt.

Die Frage danach, wie man vorgeht, um ein RWD umzusetzen, lässt sich auf einer konzeptionellen und einer technischen Ebene beantworten

Responsive Web Design: Konzeption

  1. Layout spezifizieren Es gibt generell 4 Layout-Typen: Fixed, Fluid (skaliert entsprechend Seitenverhältnis), Adaptive (fest definierte Stufen) und Responsive (eine Mischung aus Fluid und Adaptive, die flexible Layouts erzeugt)
  2. Ziel-Content definieren Allseits bekannt ist ja der Mobile-first-Ansatz. Wack sagt dazu: „ Das ist aus unserer Sicht Geschmackssache, denn minimalistischen Content für den Desktop nachträglich anreichern, ist auch Aufwand. Die Frage ist: Was fällt mir leichter – etwas hinzufügen oder wegmachen?“ Besser sei der Content-first-Ansatz, der mit der Frage verbunden ist, was den Nutzer interessiert. Demnach sollte man Inhalte priorisieren, die Zielplattform beachten und daraus Anforderungen definieren.
  3. Module definieren
  4. Wireframes erstellen Dabei ist z.B. die Nutzung von Bildern zu beachten: Wie will man je nach Auflösung skalieren? Nimmt man ein Hintergrundbild oder img-Tags? Will man Retina unterstützen? Wie sieht es mit der Ladezeit aus? etc.
  5. Design
  6. Style Guide Der Style Guide erleichtert die Implementierung. Wack dazu: „Der RWD-Prozess wäre vielfach einfacher, wenn Designer auch ein wenig Entwickler sind und umgekehrt“

Responsive Web Design: Technische Umsetzung

  1. Responsive Framework auswählen Zur verfügen steht eine Vielzahl an Frameworks, wie etwa Bootstrap, Foundation, HTML5 Boilerplate, HTML KickStart, Skeleton – es gibt aber weit über 100.
  2. JavaScript-Framework auswählen Die üblichen Verdächtigen, die sich bewährt haben heißen etwa jQuery, Prototype, Ext.JS, Dojo etc.
  3. Komponentenbasierte Umsetzung Komponenten sind Slider, Form, Navigation, Lightbox, Ads, Table (alles wird aus HTML, JS und CSS geschrieben.) Mürder rät: Wenn man Komponenten ordentlich wegpackt, sind sie wiederverwendbar und wiederauffindbar.
  4. HTML-Grundgerüst aufbauen Hier werden die Komponenten eingefügt. Wichtig: „Gut kommentieren, damit sie klar erkennbar bleiben.“
  5. Media Queries
  6. Analyse und Optimierung Die Analyse der Downloadzeit, der Websitengröße (wie viel wird geladen und in welcher Reihenfolge?) und Anzahl der Requests kann man z.B über die Chrome Developer Tools durchführen. Man sollte Images in verschiedenen Auflösungen und Formaten bereitstellen (z.B mit Modernizer), Icon Fonts verwenden, um Request zu verringern, und Minifying von JS und CSS anstreben, sprich etwa unnötige Leerzeichen und Formatierungen vermeiden und somit die Ladezeit verkürzen (dazu am besten Build Tools, wie z.B Apache Ant verwenden).
  7. Tests & Dokumentation Hier gibt es ebenfalls bewährte Tools, wie Junit Tests, JSLint etc. Eine HTML-Dokumentation mit Beispielseiten für die definierten Module dient der Nachvollziehbarkeit.

Unterm Strich bekräftigt der mobile Internetkonsum den Bedarf an Cross-Device-Unterstützung, und RWD ist eine mögliche Lösung, dem zu entsprechen. Erfolgreiches RWD beginnt aus Wacks und Mürders Sicht in der Konzeption: Content first und Use case einbeziehen, Grafiken und Images effizient erstellen, modulbasierte Konzeption, Style Guide und Modulbeschreibung für leichtere Implementierung. Frameworks bieten eine gute Ausgangssituation, aber es gilt hier und im Responsive Web Design insgesamt: „Weniger ist manchmal mehr, oder: nicht mit Kanonen auf Spatzen schießen!“

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -