Webseiten im Responsive Design passen sich dem Bildschirm des Betrachters an. Manch einer hofft darum auf kontrollierte Layouts wie in einem gedruckten Magazin - daraus wird aber nichts und das ist auch gar nicht schlimm.
Websites im Responsive Design umzusetzen bedeutet, diese so aufzubereiten, dass sie auf jedem Endgerät – vom großen Bildschirm bis zum kleinen Smartphone – optimal nutzbar sind.
Mit Responsive Design verbinden viele die Erwartung, die volle Kontrolle über die Darstellung zu erhalten, ähnlich wie bei einem gedruckten Heft. Denn erfahrene (Print-)Magazingestalter hadern seit Anbeginn des Internets mit den unklaren Seitenabmessungen, der unverbindlichen Farbwiedergabe sowie den von Lesern selbst (!) veränderbaren Schriftgrößen.
Pustekuchen!
Hier lesen Sie in fünf Lektionen, warum das mit der vollen Kontrolle nicht klappt und wieso Responsive Design uns hilft, uns aufs Wesentliche zu konzentrieren 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 wunderschönes Gemälde in InDesign, Photoshop oder Filzstift. Es sieht gut aus und hat alles: Farbe, Charakter, ein schlüssiges Konzept und eben eine bestimmte Größe. Ob wir es wollen oder nicht, dieser erste Eindruck bleibt uns fortan im Gedächtnis als „die richtige Ansicht der Website“.
Für den Entwurf einer Website ist die anfängliche Festlegung auf nur eine Ansichtsgröße sicher hilfreich. Am besten orientiert sich der Gestalter dabei gleich an der Bildschirmgröße der Mehrheit der erwarteten Websitebesucher.
Ein Website-Design wird immer auf Basis von Strukturdiagrammen entwickelt, in denen die verschiedenen Inhaltsarten definiert sind. Bei Websites im Responsive Design werden diese einzelnen Inhaltsblöcke zusätzlich schon im Konzept in verschiedenen Anordnungen für die Ausgabe auf großen und kleinen Bildschirmen arrangiert.
Mit diesem modularen Aufbau im Hinterkopf kann der Entwurf in nur einer Größe entstehen. In der Ausarbeitung sind dann die verschiedenen Anordnungen nur noch zu überprüfen und gegebenenfalls nachzujustieren. Insgesamt konzentriert sich der Grafiker auf den grundsätzlichen Website-Charakter sowie ganz detaillierte Einzelelemente. Die Abbildung kompletter Seiten dagegen wird überflüssig. Christoph Zillgens hat den Designaspekt ausführlich im Design-Tagebuch diskutiert
2 „Das kann man jetzt nicht sehen, das müssen Sie sich einfach vorstellen“
Was beim Design im Hinterkopf des Gestalters passiert ist das eine, die Entwürfe und Zwischenschritte wollen aber auch mit dem Auftraggeber abgestimmt werden. Weil der Aufwand, alle möglichen Zustände der Website zu simulieren zu hoch wäre, erfolgt die Abstimmung anhand weniger Beispiele und Website-Ausschnitte. Alles andere muss sich der Kunde vorstellen und der weiteren Entwicklung vertrauen.
Was wie ein Kontrollverlust klingt, bietet dem Auftraggeber die Chance, sich auf die Kernfragen zu konzentrieren: Was ist das Wichtige an der Website? Sind die Inhalte gut lesbar? Finde ich mich zurecht? Bleibt der Charakter über die grundsätzlichen Varianten der Ausgabe konsistent? Stimmt die Gewichtung der einzelnen Elemente zueinander?
3„Und warum dauert die Umsetzung jetzt sooo lange?“
Dass der Umsetzungsaufwand durch die vielfältigen Ausgabe-Ansichten höher wird leuchtet ein. Wie hoch sie genau ausfallen hängt stark vom Grundentwurf, der Formate-Vielfalt sowie der Art und Anzahl von Sondereffekten ab. Wenn beispielsweise nicht nur verschiedene Spaltenbreiten im Spiel sind, sondern die Inhalte auch sortiert, gefiltert, über- und ausgeblendet werden können und das auch während der Betrachter gleichzeitig das iPad von der Horizontalen in die Vertikale dreht, dann führt das unweigerlich zu arbeitsintensiven Extra-Zeilen im Quellcode.
Grundsätzlich ist der Frontend-Entwickler mehr denn je gefordert. Er muss nicht nur sein technisches Handwerk mit HTML5, CSS3 und Javascript beherrschen. Er muss auch, gemeinsam mit der Grafik, Lösungen für zuvor nicht durchdeklinierte Varianten des Designs entwickeln oder gegebenenfalls dynamische Abläufe mit dem Auftraggeber abstimmen.
Insgesamt entsteht so ein produktiverer Projektverlauf, weg vom streng arbeitsteiligen Abarbeiten einer Anfangsidee, hin zur flexiblen zielgerichteten Projektentwicklung. Im Projektablauf entwickeln sich gemeinschaftlich erarbeitete, passgenaue Lösungen, und nebenbei werden die Zwischenschritte von alle Beteiligten kontinuierlich überprüft. Das Projekt bleibt durch die fachübergreifende Zusammenarbeit leichter auf Kurs, und am Ende haben alle mehr Einblick und damit Kontrolle – gerade weil am Anfang nicht alles durchgeplant war.
4„Es gibt keine Vorschau mehr!“
Auch nach dem Launch gibt es Veränderungen im Arbeitsablauf. Die meisten Redaktionssysteme bieten dem Redakteur eine Vorschau-Funktion: ein Klick und er weiß wie der künftige Artikel aussehen wird! Allerdings weiß er nur wie der Beitrag auf einem Bildschirm aussieht, der seinem exakt gleicht. Und auch nur dann, wenn der Computer des Lesers mit exakt der selben Browsersoftware und dem gleichen Betriebssystem läuft wie sein eigener. Neben den Aspekten des Responsive Designs spielen hier auch noch Unterschiede bei der Schriftendarstellung, Worttrennungen und Skalierungen verschiedener Systeme mit hinein. Insbesondere bei schlanken Spalten und kurzen Teasern können so unterschiedliche Darstellungen entstehen. Mark Boulton schrieb dazu:
‘How does this look?’
should change to:
‘How does this read?’
Die Vorschau hilft Tippfehler zu entdecken und die Strukturierung des Textes zu prüfen. Mit einem „Proof“ im drucktechnischen Sinne hat das aber wenig zu tun. Das stört aber nicht weiter, weil der geübte Redakteur die Knackpunkte seines Systems kennt und weiß, welche Stellen „in klein“ oder „in groß“ zu überprüfen sind. Der Rest sind marginale Darstellungsabweichungen die angesichts des Inhalts und Gesamtcharakters zu vernachlässigen sind.
5Die Erkenntnis am Ende: Locker bleiben
Allen Anstrengungen zum Trotz, wird es im Responsive Design auf bestimmten Bildschirmgrößen mit bestimmten Inhalten auch „suboptimale“ Darstellungen geben. Diese Ausnahmen waren früher ohne Responsive Design übrigens die Regel! Darum gilt: Locker bleiben!
„Locker bleiben“ bedeutet nicht „alles einfach passieren lassen“ – vielmehr begründen ein starker Grundcharakter, zusammen mit fein ausgearbeiteten Details, den Gesamteindruck einer Website. Haben sich alle Beteiligten auf diese Kernaufgaben in Konzept, Design und Funktion konzentriert, ergeben sich die folgerichtigen Ableitungen im Responsive Design ganz locker und wie von selbst.
Schon vor fast 14 Jahren hat John Allsopp eine lesenswerte Meditation über den vermeintlichen Kontrollverlust bei der Publikation im Web verfasst. Auf einer weit fortgeschrittenen Ebene gilt das heute noch immer – oder eben gerade wieder:
The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.
The journey begins by letting go of control, and becoming flexible.
Nachtrag 08.12.2014: Ganze 8 Herausforderungen zum Thema hat James Young in seinem Artikel The 8 biggest responsive web design problems (and how to avoid them) zusammengefasst – lesenswert!
Loading...
Die Magaziniker