Respon­sive Design –
Locker bleiben in 5 Lektionen


Webseiten im Respon­sive Design passen sich dem Bild­schirm des jewei­ligen Betrach­ters optimal an. Manch einer hofft darum auf perfekt kontrol­lierte Layouts wie in einem gedruckten Magazin.
Lesen Sie hier warum daraus nichts wird und warum das auch gar nicht so schlimm ist.

Websites im Respon­sive Design umzu­setzen bedeutet, diese so aufzu­be­reiten, dass sie auf jedem Endgerät – vom großen Bild­schirm bis zum kleinen Smart­phone – optimal nutzbar sind.

Mit Respon­sive Design verbinden viele die Erwar­tung, die volle Kontrolle über die Darstel­lung zu erhalten, ähnlich wie bei einem gedruckten Heft. Denn erfah­rene (Print-)Magazingestalter hadern seit Anbe­ginn des Inter­nets mit den unklaren Seiten­ab­mes­sungen, der unver­bind­li­chen Farb­wie­der­gabe sowie den von Lesern selbst (!) verän­der­baren Schrift­größen.

Puste­ku­chen!

Hier lesen Sie in fünf Lektionen, warum das mit der vollen Kontrolle nicht klappt und wieso Respon­sive Design uns hilft, uns aufs Wesent­liche zu konzen­trieren und dabei am Ende etwas lockerer zu werden.

1„Und so sieht das Design aus“

Da ist er also, der erste Entwurf für die neue Website: ein wunder­schönes Gemälde in InDe­sign, Photo­shop oder Filz­stift. Es sieht gut aus und hat alles: Farbe, Charakter, ein schlüs­siges Konzept und eben eine bestimmte Größe. Ob wir es wollen oder nicht, dieser erste Eindruck bleibt uns fortan im Gedächtnis als „die rich­tige Ansicht der Website“.

Für den Entwurf einer Website ist die anfäng­liche Fest­le­gung auf nur eine Ansichts­größe sicher hilf­reich. Am besten orien­tiert sich der Gestalter dabei gleich an der Bild­schirm­größe der Mehr­heit der erwar­teten Website­be­su­cher.

Ein Website-Design wird immer auf Basis von Struk­tur­dia­grammen entwi­ckelt, in denen die verschie­denen Inhalts­arten defi­niert sind. Bei Websites im Respon­sive Design werden diese einzelnen Inhalts­blöcke zusätz­lich schon im Konzept in verschie­denen Anord­nungen für die Ausgabe auf großen und kleinen Bild­schirmen arran­giert.

Mit diesem modu­laren Aufbau im Hinter­kopf kann der Entwurf in nur einer Größe entstehen. In der Ausar­bei­tung sind dann die verschie­denen Anord­nungen nur noch zu über­prüfen und gege­be­nen­falls nach­zu­jus­tieren. Insge­samt konzen­triert sich der Grafiker auf den grund­sätz­li­chen Website-Charakter sowie ganz detail­lierte Einzel­ele­mente. Die Abbil­dung kompletter Seiten dagegen wird über­flüssig. Chris­toph Zill­gens hat den Desi­gnaspekt ausführ­lich im Design-Tage­buch disku­tiert

2 „Das kann man jetzt nicht sehen, das müssen Sie sich einfach vorstellen“

Was beim Design im Hinter­kopf des Gestal­ters passiert ist das eine, die Entwürfe und Zwischen­schritte wollen aber auch mit dem Auftrag­geber abge­stimmt werden. Weil der Aufwand, alle mögli­chen Zustände der Website zu simu­lieren zu hoch wäre, erfolgt die Abstim­mung anhand weniger Beispiele und Website-Ausschnitte. Alles andere muss sich der Kunde vorstellen und der weiteren Entwick­lung vertrauen.

Was wie ein Kontroll­ver­lust klingt, bietet dem Auftrag­geber die Chance, sich auf die Kern­fragen zu konzen­trieren: Was ist das Wich­tige an der Website? Sind die Inhalte gut lesbar? Finde ich mich zurecht? Bleibt der Charakter über die grund­sätz­li­chen Vari­anten der Ausgabe konsis­tent? Stimmt die Gewich­tung der einzelnen Elemente zuein­ander?

3„Und warum dauert die Umset­zung jetzt sooo lange?“

Dass der Umset­zungs­auf­wand durch die viel­fäl­tigen Ausgabe-Ansichten höher wird leuchtet ein. Wie hoch sie genau ausfallen hängt stark vom Grund­ent­wurf, der Formate-Viel­falt sowie der Art und Anzahl von Sonder­ef­fekten ab. Wenn beispiels­weise nicht nur verschie­dene Spal­ten­breiten im Spiel sind, sondern die Inhalte auch sortiert, gefil­tert, über- und ausge­blendet werden können und das auch während der Betrachter gleich­zeitig das iPad von der Hori­zon­talen in die Verti­kale dreht, dann führt das unwei­ger­lich zu arbeits­in­ten­siven Extra-Zeilen im Quell­code.

Grund­sätz­lich ist der Frontend-Entwickler mehr denn je gefor­dert. Er muss nicht nur sein tech­ni­sches Hand­werk mit HTML5, CSS3 und Java­script beherr­schen. Er muss auch, gemeinsam mit der Grafik, Lösungen für zuvor nicht durch­de­kli­nierte Vari­anten des Designs entwi­ckeln oder gege­be­nen­falls dyna­mi­sche Abläufe mit dem Auftrag­geber abstimmen.

Insge­samt entsteht so ein produk­ti­verer Projekt­ver­lauf, weg vom streng arbeits­tei­ligen Abar­beiten einer Anfangs­idee, hin zur flexi­blen ziel­ge­rich­teten Projekt­ent­wick­lung. Im Projekt­ab­lauf entwi­ckeln sich gemein­schaft­lich erar­bei­tete, pass­ge­naue Lösungen, und nebenbei werden die Zwischen­schritte von alle Betei­ligten konti­nu­ier­lich über­prüft. Das Projekt bleibt durch die fach­über­grei­fende Zusam­men­ar­beit leichter auf Kurs, und am Ende haben alle mehr Einblick und damit Kontrolle – gerade weil am Anfang nicht alles durch­ge­plant war.

pr+co Website Development im Responsive Design

4„Es gibt keine Vorschau mehr!“

Auch nach dem Launch gibt es Verän­de­rungen im Arbeits­ab­lauf. Die meisten Redak­ti­ons­sys­teme bieten dem Redak­teur eine Vorschau-Funk­tion: ein Klick und er weiß wie der künf­tige Artikel aussehen wird! Aller­dings weiß er nur wie der Beitrag auf einem Bild­schirm aussieht, der seinem exakt gleicht. Und auch nur dann, wenn der Computer des Lesers mit exakt der selben Brow­ser­soft­ware und dem glei­chen Betriebs­system läuft wie sein eigener. Neben den Aspekten des Respon­sive Designs spielen hier auch noch Unter­schiede bei der Schrif­ten­dar­stel­lung, Wort­tren­nungen und Skalie­rungen verschie­dener Systeme mit hinein. Insbe­son­dere bei schlanken Spalten und kurzen Teasern können so unter­schied­liche Darstel­lungen entstehen. Mark Boulton schrieb dazu:

‘How does this look?’
should change to:
‘How does this read?’

Die Vorschau hilft Tipp­fehler zu entde­cken und die Struk­tu­rie­rung des Textes zu prüfen. Mit einem „Proof“ im druck­tech­ni­schen Sinne hat das aber wenig zu tun. Das stört aber nicht weiter, weil der geübte Redak­teur die Knack­punkte seines Systems kennt und weiß, welche Stellen „in klein“ oder „in groß“ zu über­prüfen sind. Der Rest sind margi­nale Darstellungs­abweichungen die ange­sichts des Inhalts und Gesamt­cha­rak­ters zu vernach­läs­sigen sind.

5Die Erkenntnis am Ende: Locker bleiben

Allen Anstren­gungen zum Trotz, wird es im Respon­sive Design auf bestimmten Bild­schirm­größen mit bestimmten Inhalten auch „subop­ti­male“ Darstel­lungen geben. Diese Ausnahmen waren früher ohne Respon­sive Design übri­gens die Regel! Darum gilt: Locker bleiben!

„Locker bleiben“ bedeutet nicht „alles einfach passieren lassen“ – viel­mehr begründen ein starker Grund­cha­rakter, zusammen mit fein ausge­ar­bei­teten Details, den Gesamt­ein­druck einer Website. Haben sich alle Betei­ligten auf diese Kern­auf­gaben in Konzept, Design und Funk­tion konzen­triert, ergeben sich die folge­rich­tigen Ablei­tungen im Respon­sive Design ganz locker und wie von selbst.

Schon vor fast 14 Jahren hat John Allsopp eine lesens­werte Medi­ta­tion über den vermeint­li­chen Kontroll­ver­lust bei der Publi­ka­tion im Web verfasst. Auf einer weit fort­ge­schrit­tenen Ebene gilt das heute noch immer – oder eben gerade wieder:

The web’s grea­test strength, I believe, is often seen as a limi­ta­tion, as a defect. It is the nature of the web to be flexible, and it should be our role as desi­gners and deve­lo­pers to embrace this flexi­bi­lity, and produce pages which, by being flexible, are acces­sible to all.
 
The journey begins by letting go of control, and beco­ming flexible.


Nach­trag 08.12.2014: Ganze 8 Heraus­for­de­rungen zum Thema hat James Young in seinem Artikel The 8 biggest respon­sive web design problems (and how to avoid them) zusam­men­ge­fasst – lesens­wert!

Claus Schöffel

Artikel bewerten:

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...