Responsive Thinking � dran denken, es wird sich was �ndern

Detlev Hagemann Die Produk­tion für unterschiedliche Medien erfordert – wie in den beiden vorherigen Beiträgen beschrieben – weitere Fähigkeiten der Mitarbeiter und neue Organisationsformen, aber auch eine durchgängige Zentrierung auf die zu erzählende Story und die Fokussierung auf die Bedürfnisse und Wünsche der Nutzer. So weit, so gut. Nur: Wie kann die technische und gestalterische Umsetzung gelingen?

Um optimal crossmedial arbeiten zu können, muss man sich Klarheit über die Unterschiede und die Ähnlichkeiten der Medien verschaffen, damit fundierte Layoutentscheide getroffen werden können. Und die Konsequenzen dieser Entscheidungen beeinflussen wiederum die Art und Weise, wie die Story eigentlich erzählt und inszeniert werden soll.

Grobe Charakterisierung der momentanen Medien

Im Print wird typischerweise mit einer Seite gearbeitet – oder einer grösseren Anzahl, die idealerweise durch vier teilbar ist. Ausser bei Aufklappern ist das Seitenformat dabei fest vorgegeben und kann während der Produktion mit den herkömmlichen Layoutprogrammen nur in engen Grenzen skaliert werden. Als Navigationsunterstützung für den Nutzer – hier den Leser – kann man neben einer klaren Layoutgliederung ein Inhaltsverzeichnis und einen Index produzieren; aber auch Stanzungen und Farbflächen, die in den Seitenanschnitt gehen, können das Benutzen einer Drucksache vereinfachen.

Bei Websites, die am Computer bedient werden, erfolgt die Bedienung überwiegend mit der Maus. Für die Navigation werden momentan Menüs und Verlinkungen genutzt, die sich bei Annäherung mit der Maus durch von den Nutzern meist schnell erkannte optische Veränderungen als aktive Zonen zu erkennen geben. Die Anzahl der Seiten und die Pixelhöhe des Layouts sind bei Webseiten nicht begrenzt. Durch senkrechtes Scrollen nach unten kann der Nutzer den verdeckten Teil einer Seite erreichen. Die grundlegenden Bewegungen auf einer Website sind also Rauf- und Runterscrollen sowie Klicken zum Seitenwechsel.

Mit dem Wechsel auf ein Tablet oder ein Smartphone verhalten sich Web­sites (und auch PDFs) aber anders. Denn hier verändern die aktiven Zonen – die Links – nicht mehr ihr Aussehen, wenn ein Finger über ihnen schwebt. Websites∕PDFs, die für die Betrachtung auf dem Bildschirm konzipiert wurden, werden auf dem Smartphone oder Tablet meist mehr oder weniger stark verkleinert dargestellt und dabei in der Breite angepasst. Zoom-Gesten ermöglichen im Gegensatz zur Desktop-Bedienung immerhin das Ein- und Auszoomen.

Für Tablets gilt, dass sie von den meisten Nutzern mit einer Hand gehalten werden, während die andere Hand auch für aufwändige Mehrfingerges­ten benutzt wird. Neben den aktiven Zonen im Layout stehen oben und unten meist noch Navigationselemente der App und des Betriebssystems zur Verfügung. Weil die Finger auf dem Tablet schnell auch wichtige Teile des Layouts verdecken, sollte sich bei kleineren, reagierenden Elementen das sichtbare Ergebnis – die Reaktion – für die Mehrzahl der Rechtshänder links oder über der auslösenden Fingerkuppe befinden, ansonsten sollte die Veränderung zumindest fast das halbe Display betreffen. Ansonsten gelten für Tablet-Layouts ähnliche Regeln wie für Printprodukte: Gestaltung und Ausnutzen des vorhandenen Raums. Und möglichst nicht so gestalten, dass die ganze Seite wie bei Webseiten gescrollt werden muss.

Die Smartphone-Apps hingegen werden meist mit einem oder beiden Daumen von unten her bedient. Das Wischen und das einfache Tippen sind dabei die Hauptmöglichkeiten der Bedienung – komplexe Drei- oder Mehrfingergesten sind bei der typischen Handhaltung am Smartphone aber nur schwer möglich. Und welche Vorlieben werden die Nutzer bei der Bedienung von Mini-Tablets und Maxi-Smartphones oder bei neuen Geräteklassen entwickeln ?

Zusammengefasst: Die Geräte werden jeweils unterschiedlich bedient und der Benutzer erwartet die Navigations- und Aktivitätszonen an unterschiedlichen Positionen. Dass sich die Grösse und die Anordnung der Bedienelemente für die Geräteklassen unterscheiden sollten, sei hier nur abschliessend ergänzt.

Formatfragen – wie beantworten?

Die notwendigen Anpassungen betreffen nicht nur die Anordnung und die Reaktion der Bedienelemente. Um dem Benutzer auf dem jeweiligen Gerät und in seiner vermeintlichen Umgebung eine angepasste Webseite auf das Display zu liefern, kann bei Webseiten durch eine Geräteabfrage (Weiche) eine andere oder auch nur eine geänderte Webseite gesendet werden: andere Inhalte und∕oder ein anderes Arrangement. Mit dieser Technik – adaptiv genannt – werden heute in grossem Masse Websites für Monitor und Tablet einerseits und für Smartphones andererseits bereitgestellt: Der Webserver liefert aufgrund von benutzten Browserinformationen den unterschiedlichen Inhalt an die Geräte aus.

Bis hierher standen nur die Unterschiede und Gemeinsamkeiten der Geräteklassen im Mittelpunkt unserer Betrachtung. Doch Smartphone ist nicht gleich Smartphone: Sehr unterschiedliche Breite-Höhe-Verhältnisse führen noch immer zu sehr unterschiedlichem Aussehen auf den Displays der Nutzer.

Mit sich anpassenden Techniken, die auf verschiedenen Regelwerken basieren, kann hier ein besseres Ergebnis erzielt werden. Ein Ansatz könnte ein Regelwerk sein, wie es heute schon industriell für Printanzeigen angewendet wird: Hier gibt es oftmals sehr ausgefeilte Regeln für Schutzräume und Mindest- und Maximalabstände. Diese Regeln selbst sind dynamisch und machen das Layout flüssig – liquid. Die entstehenden Instanzen werden in einem Regelinterpreter (Server) abgearbeitet. Die so entstandenen Layouts sind aber nicht mehr liquid: Sie können sich also nicht mehr flexibel – zur Laufzeit – an ihre Umwelt anpassen.

Übertragen wir dieses Beispiel auf digitale Medien, stösst der liquide Ansatz schnell an Grenzen: Wir haben es hier mit unzähligen und einer ständig wachsenden Anzahl von Interpolationsstufen in zwei Dimensionen zu tun: Sollen diese alle im Vorfeld interpretiert und dann über Weichen statisch ausgeliefert werden?

Die Interpolation kann auch direkt im Webbrowser des Nutzers stattfinden. Solche Layouts passen sich dynamisch – responsiv – an ihre Umwelt an. Die Qualität von Responsive Layouts hängt von der Qualität des Regelwerks ab, das in ihnen steckt. Im Idealfall werden Bilder immer ideal angeordnet, Schriften grösser oder kleiner je nach Betrachtungsabstand, die Navigationsmöglichkeiten neu zusammengesetzt oder Inhalte sogar ein- oder ausgeblendet.

Ob eine Website responsiv ist, kann man im Browser schnell testen: Passen sich Inhalte, Spaltenraster und Grafiken an, wenn das Browserfenster grösser oder kleiner gezogen wird, dann liegt ein responsives Design vor. Warum? Weil sich die Darstellung zur Laufzeit – das heisst sofort – anpasst, wenn sich die äusseren Umstände wie die Grösse des Browserfensters ändern.

Abgrenzungen

Das heisst aber nicht, dass responsives Design immer das Mittel erster Wahl ist: Wollen wir etwa unseren mobilen Nutzern komplett anders aufbereitete Inhalte zeigen als den Desktop-Nutzern, ist eine adaptive Lösung oft viel sinnvoller. Umgekehrt ist aber auch klar, dass der Aufwand, um immer mehr Geräte und Displaygrössen zu unterstützen, immer noch grösser wird, wenn wir statische Layouts (auch wenn diese liquid hergestellt werden) produzieren.

Daher sind in den meisten Fällen responsive Ansätze der einzige ökonomische Weg, um alle Geräte einer Geräteklasse angepasst beliefern zu können. Alles andere führt meist zu hohen finanziellen und zeitlichen Anstrengungen. Machen wir also unsere Layouts für das Web grundsätzlich responsiv – und entscheiden wir situativ über die adaptive Belieferung von einzelnen Geräteklassen.

Und nun die Einschränkung: Wir können nicht beliebig mit den verschiedenen Anpassungsformen jonglieren. Je nach eingesetzter Inhaltstechnologie stehen nur einzelne Formen zur Verfügung. HTML kann für adaptive und (!) für responsive Ansätze verwendet werden. Liquide Formen eignen sich eher für Print-Layouts. Herkömmliche Overlay-Formate, wie sie in vielen Tablet-Magazinen zum Einsatz kommen, funktionieren leider nur adaptiv und liquid.

Responsive Thinking

HTML, CSS und JavaScript sind die Trägertechnologien im Web – und können es für Apps auch sein. Wie im Webdesign responsive Konzepte umgesetzt werden, sollte deshalb beispielgebend für viele Projekte sein.

Der wesentliche Unterschied zur klassischen statischen Webentwicklung liegt darin, dass im responsiven Webdesign meist mit Prozentwerten anstatt mit Pixelwerten gearbeitet wird. Webdesigns basieren dabei auf vertikalen Rastern, in denen die Elemente platziert werden. Die einzelnen Spalten im Raster haben dann Breitenangaben in Prozent. Texte und Bilder, die auf der Seite platziert werden, füllen einzelne oder mehrere Spalten dann mit jeweils 100 Prozent oder weniger aus. Je nach Breite des aktuellen Browserfensters werden die Prozentangaben dann interpretiert.

Dieser Ansatz des Skalierens stösst natürlich bei zu grossen Unterschieden der Displaygrössen an Grenzen: Ein zehnspaltiges Raster könnte zwar beim Desktop-Bildschirm sinnvoll sein, auf einem kleinen Smartphone lässt es sich aber nicht mehr abbilden. Deshalb muss hier das ganze Layout anders aufgebaut werden: Dafür gibt es in CSS die so genannten Media Queries, die es ermöglichen, andere Grundlayouts anzuzeigen – hier in Abhängigkeit von der vorhandenen Displaygrös­se. So kann etwa auf dem Desktop mit zehn Spalten gearbeitet werden, auf dem Tablet mit acht und auf dem Smartphone mit vier. Mit Media Queries lässt sich das Layout einteilen: Bis wohin sieht es noch gut aus? Ab wann muss anders gearbeitet werden? Mit diesen so genannten Breakpoints wird definiert, wie sich die Elemente verändern sollen:

• Veränderte Schriftgrössen und Abstände, andere Bildausschnitte;
• Objekte werden untereinander statt nebeneinander angeordnet;
• Inhalte werden neu priorisiert, je nach Zielmedium;
• Manche Inhalte verschwinden komplett, andere kommen hinzu.

Responsives Web- und Appdesign ist also keinesfalls auf die Gestaltung beschränkt: Es greift tief in die Content-Strategie ein. Welche Inhalte soll der Nutzer eigentlich in welcher Umgebung sehen? Media Queries sind dabei ein sehr mächtiges Werkzeug, das nicht nur Bildschirmgrössen abfragen kann, sondern auch die aktuelle Bandbreite, die Farbigkeit und die Auflösung des Gerätes.

Es lohnt sich, ein «Responsive Thinker» zu werden. Denn so ist es möglich, heute und in Zukunft agil und schnell auf sich ändernde Anforderungen reagieren zu können.