Responsive Web Design – Teil 3: Herangehensweise

Teil 2 der Serie: Bei Responsive Web Design müssen die Bereiche Konzeption, Design und Programmierung stärker zusammenarbeiten als bei „üblichem“ Webdesign.

Nach Teil 1 (Warum RWD?) und Teil 2 (Lösungsansätze) jetzt der lange erwartete dritte Teil meiner Serie zu Responsive Web Design: Die Herangehensweise. Bei RWD müssen die Bereiche Konzeption, Design und Programmierung stärker zusammenarbeiten als bei „üblichem“ Webdesign.

Leg dir ein Content Inventory zu

Wer die klassischen Point-And-Click Adventures aus den späten 80ern und 90ern kennt, weiß, was ein Inventory ist: Eine Tasche, die man mit allerlei Krimskrams füllt, das man vielleicht später mal braucht. Diese Items kann man dann auf verschiedene Arten einsetzen und kombinieren.

Ähnlich ist es beim Content Inventory. In der Konzeption müssen Elemente gesammelt und aufgeschrieben werden, die (vielleicht) auf der Website vorkommen. Relativ klar sind Logo, Menü und Standard-Content (Überschrift + Text). Dann gibt’s aber noch News, Social Share Icons, Eyecatcher, Video, Sitemap usw. Das alles wird mal in den Rucksack geschmissen.

Sämtliche „Items“ im Inventory müssen in ihre Teile zerlegt werden

Anschließend betrachtet man die Items genauer. Eine News besteht z.B. aus Überschrift, Kategorie, Datum, Bild, Teasertext und Text, außerdem noch einem Social-Share-Bereich und der Anzahl der Kommentare. Für diese Elemente kann man sich gleich eine Wichtigkeit überlegen.

Weiters kann/soll auch festgelegt werden, wie die Items miteinander kombiniert werden können/müssen. Vor dem nächsten Schritt sollte man diese Eigenschaften der Items im Inventory kennen.

Warum das Ganze? Ausgestattet mit diesem Arsenal an Website-Elementen kann im Design nun festgelegt werden, was in welcher Auflösung (noch) angezeigt wird und was nicht.

Ein klassisches Beispiel ist das Menü, das auf dem Desktop horizontal mit hübschen Drop-Downs dargestellt wird und auf dem Smartphone als schickes Burger-Icon nach rechts oben wandert.

Besonders anschaulich wird’s aber bei Blogposts:

	Desktop	Tablet	Phone wide	Phone
Überschrift	Anzeigen	Anzeigen	Anzeigen	Anzeigen
Datum	Anzeigen	Anzeigen	Anzeigen	Anzeigen
Bild	Groß	Medium	Mini	Mini
Teasertext	400 Zeichen	200 Zeichen	Nicht anzeigen	Nicht anzeigen
Kategorie	Text + Icon	Nur Text	Nur Text	Nur Text

Wie werden die Inhalte umbrochen?

Breiten in Prozent helfen schon mal bei den größeren Auflösungen, spätestens am Smartphone muss dann aber die Anordnung umgestellt werden

Nachdem man sich für einen Lösungsansatz entschieden hat, muss definiert werden, wann und wie die Inhalte umbrochen werden. Spätestens hier führt ein Silodenken bei den Abteilungen Konzeption, Grafik und Programmierung zu heftigen Kopfschmerzen bei der Umsetzung: Ohne ständiges Abstimmen der drei Bereiche arbeitet man schnell in eine falsche Richtung und das Ergebnis ist entweder nicht so wie gedacht oder nicht zu gebrauchen.

Wichtig für das Design sind hier vor allem die Breitenmaße (üblicherweise scrollt man bei einer Website vertikal):

Big Screen: 1.280 px
Laptop: 1.024 px
Tablet: 768 px
Phone wide: 480 px
Phone: 320 px

Der Umbruch muss zwar nicht exakt bei diesen Werten erfolgen, sollte aber im Design berücksichtigt werden.

Beim „Mobile First“-Designansatz beginnt man das Design für Smartphones im Hochformat und arbeitet sich dann bis zur höchsten Auflösung bzw. Bildschirmbreite vor. Auf diese Weise läuft man nicht in die Falle, auf einer kleinen Auflösung zu viele Elemente reinzupacken, weil es sich bei der großen Auflösung ja so schön ausging. Dazu noch ein kleiner Tipp: Elemente gelten als finger-friendly, wenn sie eine Größe von mindestens 44x44px haben.

Damit die Anordnung der Elemente in den verschiedenen Auflösungen auch technisch realisierbar ist, empfiehlt es sich, den Designern HTML-Grundkenntnisse nahezubringen: Üblicherweise werden Inhalte von links oben zeilenweise nach rechts unten angeordnet und brechen auch entsprechend um. Und übrigens: schöne zweispaltige Anordnungen sind leider nicht immer so einfach umzusetzen wie zu designen.

Was ist above the fold?

Eine weitere wichtige Frage, die man sich bei der Konzeption stellen muss (und dann mit Design und Programmierung abklären), ist die nach den Elementen „above the fold“. Damit meint man den Bereich, der auf einer Website (egal auf welchem Gerät und unter welcher Auflösung) ohne Scrollen sichtbar ist. Dort sollte auf jeder Seite (nicht nur auf der Startseite) klar gemacht werden, worum es geht.

Welche Elemente der Website soll der Besucher sofort, also ohne Scrollen, sehen?

Besondere Aufmerksamkeit sollte hier Hintergrundbildern und Eyecatchern gewidmet werden. Da sie in Hoch- und Querformat funktionieren müssen, sollte beachtet werden, wo der Fokus liegt. Alternativ dazu können natürlich je nach Auflösung unterschiedliche Versionen eingesetzt werden, allerdings ist dies bei der Contentwartung mit höherem Aufwand verbunden.

Fazit zu Responsive Web Design und was kommt noch?

Ich hoffe, ich konnte einen guten Einblick in Responsive Web Design geben und Überlegungsansätze für das nächste Webprojekt einbringen. RWD ist nicht einfach nur eine weitere Checkbox auf der ToDo-List, sondern ein maßgeblicher Bestandteil für des Konzepts und eine einschneidende Veränderung für das Projekt.

Meine Serie ist damit beendet, aber unsere Entwickler haben angekündigt, sich aus der technischen Sicht dem Thema nochmals zu nähern. Da bin ich schon mal gespannt.