Fast 50 % des Web-Traffics läuft heute über mobile Endgeräte mit unterschiedlichsten Displaygrößen. Da die User erwarten, dass Webseiten mobil genauso schnell und gut bedienbar sind, kommt um Responsive Web Design (RWD) niemand herum.

Content-Strateginnen sind keine Webdesignerinnen oder Webentwicklerinnen. Warum sollten Sie trotzdem über ein eher technisches Thema wie Responsive Web Design (RWD) Bescheid wissen? Weil es die Basis jeder modernen Webseite ist und sich daraus einige Konsequenzen für den Inhalt ergeben. Schließlich ist es der Inhalt, der auf vielen verschiedenen Endgeräten mit unterschiedlichsten Displaygrößen und Seitenverhältnissen dargestellt wird. Damit das funktioniert, muss der Content darauf vorbereitet sein – nur dann kann der User diesen optimal konsumieren. Eric Eggert stellte deshalb in der Lehrveranstaltung “Accessibility & Multi-Screen Design” die RWD-Zauberwörter Mobile First, Media Queries, Grid und Progressive Enhancement vor.

Ohne RWD geht heute nichts mehr

Andrew Clarke drückte es 2012 so aus:

Anything that’s fixed and unresponsive isn’t web design anymore, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. Web design is responsive design. Responsive Web Design is web design, done right. – Andrew Clarke

An dieser Aussage, die mittlerweile mehr als vier Jahre alt ist, ist deutlich zu erkennen, wie unumgänglich das Thema RWD ist. Schon 93 % der Unternehmen im digitalen Bereich beschäftigen sich heute mit Responsive Web Design. Eine nicht-responsive Webseite funktioniert auf mobilen Geräten wie Smartphones, Tables oder sogar Smart-Watches einfach nicht, da Texte zu klein dargestellt werden bzw. horizontales Scrolling notwendig ist.1

Die Lösung dafür ist jedoch nicht, wie vor einigen Jahren noch, eine eigene Version einer Webseite für Smartphones zu erstellen (erkennbar an Adressen wie http://m.meinedomain.xyz). Diese Smartphone-Varianten hatten den gravierenden Nachteil, dass die Inhalte zumeist getrennt von der Desktop-Variante gepflegt werden mussten und oft auch nur einen Teil des Contents anboten. Damit geben sich heute weder Webseiten-Betreiber noch deren Besucher zufrieden.

Mit Hilfe der technischen Entwicklung der Browser in den letzten Jahren setzt das Responsive Web Design dem ein Ende. Mit Hilfe von neuen Features in modernem CSS (Cascading Style Sheets) kann die Darstellung einer Webseite an die jeweilige Anzeigegerät angepasst werden. Anstelle von pixelgenauem Design heißt es heute “embrace the fluidity”.

Das 1×1 des Responsive Web Design

Wie bereits erwähnt basiert RWD vor allem auf neuen Techniken in CSS, insbesondere den sogenannten media queries. Diese ermöglichen es, CSS-Regeln nur in bestimmten Situationen (z. B. die Anzeigebreite einer Webseite ist größer als x Pixel) anzuwenden, indem man die Eigenschaften des Anzeigegeräts abfragt.

Beispiel:

.container { width: 300px; }
@media screen and (min-width: 750px) {
   .container { width: 600px; }
}

Das (vereinfachte) Beispiel zeigt, wie ein container (z. B. ein HTML div Block) standardmäßig auf eine Breite von 300 Pixeln gesetzt wird. Falls jedoch die Seite auf einem Bildschirm angezeigt wird (d. h. diese Regel gilt nicht für die Druckansicht) und dieser Bildschirm bzw. das Browserfenster zumindest 750 Pixel breit ist, wird dem container eine Breite von 600 Pixel zugeordnet. Er passt sich somit an die Bildschirmgröße an.

Ein sogenanntes Grid (Gitter) wird dann verwendet, wenn der Content in Spalten und Zeilen aufgeteilt bzw. angezeigt werden soll. Was früher mittels (Layout-)Tabellen erledigt wurde (die nicht responsive sind), realisiert man im RWD mit Hilfe von div-Blöcken und Media Queries.
Logisch gesehen wird die Seite dabei in eine festgelegte Anzahl von Spalten (z. B. 12) eingeteilt. Ein Inhaltsblock (z. B. eine Sidebar) erstreckt sich dann über eine definierte Spaltenanzahl (ähnlich wie verbundene Spalten in einer Tabelle). Diese Spaltenanzahl wird jedoch abhängig von der Gerätegröße definiert, sodass der Inhalt immer genügend Platz findet.
Beispiel:

rwd-visualisierung-desktoprwd-visualisierung-mobil

Abb. 1: Einteilung der Blöcke auf einem Desktop-Browser und auf einem Smartphone. Mittels media queries werden die Breiten der einzelnen Blöcke angepasst.

Von Klein nach Groß

Beim Erstellen von mehreren Versionen einer Webseite für verschiedene Anzeigegrößen gibt es prinzipiell zwei Möglichkeiten:

  1. Von Groß nach Klein – man startet mit der Desktop-Variante und lässt nach und nach Elemente weg, die auf kleinen Geräte nicht funktionieren (auch genannt graceful degradation – fortschreitende Verschlechterung)

  2. Von Klein nach Groß – man startet mit der mobilen Variante und fügt nach und nach Verbesserungen hinzu und nützt den zusätzlichen Platz auf größeren Geräten aus. Man nennt dies auch progressive enhancement – schrittweise Verbesserung.

Bei der ersten Variante fallen während des Prozesses neben Design-Elementen oft auch wichtige Funktionen weg, sodass der User nicht mehr den vollen Funktionsumfang erhält. Bei der zweiten Variante hingegen legt man von Beginn an die Energie in eine voll funktionsfähige mobile Variante (deswegen auch “mobile first” genannt) und fügt Schritt für Schritt Features hinzu, welche die Bedienbarkeit auf größeren Geräten verbessern. 2

Auch aus content-strategischer Sicht ist die zweite Vorgehensweise zu bevorzugen. Wenn Inhalte für mobile Endgeräte optimiert werden, kann es nicht passieren, dass beim Skalieren plötzlich Probleme auftreten (z. B. zu große Tabellen die horizontales Scrollen erfordern, Text in Bildern ist plötzlich nicht mehr lesbar, usw.).

Eric Eggert ist vollkommen von diesem Ansatz überzeugt, indem er in der Lehrveranstaltung nochmals betont: „Mobile First ist die einzig wahre Methode, eine neue Website zu planen. Es hilft auch dabei, sich auf das wesentliche zu konzentrieren und ist für viele Kunden einfacher greifbar als Content First – was dann aber die logische Konsequenz aus Mobile First ist.“

Was RWD für Content-Strateginnen bedeutet

Mit ein wenig Grundkenntnissen in HTML und CSS sind auch Content-Strateginnen in der Lage, Zauberwörter wie Media Queries, Grid, Mobile First und Progressive Enhancement zu entschlüsseln. Damit ist klar, was heutzutage möglich und auch State-of-the-Art ist, und wie Web-Content optimal an die Bedürfnisse der User auf unterschiedlichen Endgeräten angepasst werden kann – auch wenn wir vielleicht nicht wissen, welche Geräte uns nach Smart-TVs, Smart-Watches und Datenbrillen noch erwarten.

Wie Inhalt, Marketing und große Marken mit diesem Thema umgehen, zeigt uns kürzlich Diesel3 in der Kampagne für Joggjeans vom 6. Juli 2016.

Referenzen


  1. http://www.huffingtonpost.com/julie-ask/responsive-web-design-is-_b_10861340.html 
  2. https://codemyviews.com/blog/mobilefirst 
  3. http://www.thedrum.com/news/2016/07/08/diesel-puts-responsive-web-design-test-using-contortionist 

Related Posts