Dieses Jahr wird es schwer sein, eine Organisation zu finden, die die Überführung ihrer Websites in responsives Design nicht ganz oben auf der Tagesordnung zu stehen hat. Doch als wir mit Unternehmen über den Weg in diese Richtung gesprochen haben, fanden wir schnell heraus, dass sie sich bislang noch gar keine Strategie dafür zurechtgelegt hatten.
Die Kerntaktik
Fast alles, was Sie über responsives Webdesign lesen, beginnt mit etwas, was ich Kerntaktik nenne – Basiselemente, die responsive Websites responsiv machen. Sie können sie nicht ignorieren, sie bilden die Grundlage der Gesamtstrategie.
Die erste Kerntaktik besteht darin, die Breakpoints aufzudecken. Das sind die Seitenbreiten, an denen sich die Designobjekte neu ordnen. Zwischen diesen Breakpoints ändern sich die Größe oder der Flow der Dinge, aber an den Breakpoints selbst ändert sich schlagartig die Konfiguration.
Ein responsives Design kann mehrere Breakpoints haben, sagen wir für ein Telefon mit kleinem Bildschirm, dann ein Tablet, dann ein Laptop bzw. Desktop. Viele Teams versuchen, sich für Breakpoints zu entscheiden, indem sie mit Durchschnittsgrößen für Bildschirme arbeiten.
Allerdings ist es besser zu schauen, wie Inhalt und Navigation sein wollen. Wenn sie Content und Navigation die Breakpoints passieren lassen, stellen Teams oft fest, dass sie weniger Screen-Konfigurationen brauchen als angenommen. Zum Beispiel könnte sich ein hochauflösendes Retina-iPad eine Konfiguration mit einem gut konstruierten Laptop-Display teilen, während Tablets mit geringerer Auflösung dieselbe Konfiguration mit ein paar Anpassungen nutzen.
Die zweite Kerntaktik ist die, Seitenladezeiten kurz zu halten. Zu oft stellen Teams beim Ansturm auf responsives Design fest, dass sie CSS geschrieben haben, das ihre Seiten über die Endgeräte hinweg verlangsamt.
Die kluge Platzierung von Media Queries und Progressive Enhancement können den Footprint der CSS-Dateien auf kleineren, langsameren Geräten dramatisch reduzieren, was wiederum die Usability dramatisch verbessert. Machen Teams das auf dem Weg zum responsiven Design frühzeitig, kommen sie nicht in die Situation, später großflächige Ausbesserungen mit hohen QS-Kosten vornehmen zu müssen, wenn sie am Ende merken, wie lang ihre Ladezeiten sind.
Die dritte Kerntaktik ist die Optimierung der Bildgrößen. In der Tat ist das am schwierigsten unter Kontrolle zu bekommen, weil es keine soliden Best Practices gibt, denen man folgen könnte. Retina- und andere hochauflösende Display-Technologien stellen Teams vor das Problem, dass große Bilder nötig sind, damit sie gut aussehen, doch diese Bilder erhöhen die Ladezeiten auf niedriger auflösenden Bildschirmen.
Es gibt haufenweise Diskussionen in der Community, wie man mit dieser Sache umgehen soll. Leider bieten sie einem Team, das sich jetzt gerade mit dieser Herausforderung befasst, allesamt keine eindeutige Hilfestellung, denn die Best Practices scheinen sich fast im Wochenrhythmus zu ändern. Wenn sich die Dinge irgendwann mal eingependelt haben, sollte es einfacher sein, damit umzugehen.
Was weglassen?
Ist ein Team über die Kerntaktik hinaus, findet es sich dabei wieder, die größeren Folgen handhaben zu müssen, die mit responsivem Webdesign einhergehen. Die erste dieser größeren Folgen besteht darin herauszufinden, wie sie den ganzen Kram, der in der Desktop-Version vorhanden ist, dazu bekommen, auf einen kleineren Bildschirm zu passen.
Natürlich dauert es nicht allzu lange, bis sie merken, dass nicht alles reinpasst. An dieser Stelle erkennen sie, dass eine Strategie zum Einsparen nötig ist.
Mobile First
Vor ein paar Jahren hat Luke Wroblewski Teams beobachtet, die damit kämpften. Er fing an, eine Idee auszuarbeiten, die er Mobile First nannte. Der Gedanke hinter Mobile First ist der, dass das Team ganz von vorne beginnt und die Frage stellt: "Was ist die kleinste Menge an Content und Navigation, die wir brauchen, um das Design nutzbar zu machen?" Von hier aus beginnen sie, die Minimalkonfiguration zu definieren, und arbeiten sich dann den Weg zurück zum Maximalfall.
Im Kern geht das Mobile-First-Prinzip davon aus, dass es einfacher ist, Designelemente hinzuzufügen als welche wegzunehmen. Sie starten mit einer Minimalkonfiguration und können nach und nach weitere Elemente aufnehmen, sobald größere Bildschirme und Auflösungen Ihnen mehr Platz zur Verfügung stellen.
Luke rät allerdings, langsam und mit Bedacht hinzuzufügen. Es ist möglich, dass es im gegenwärtigen Design Dinge gibt, die in gar keiner responsiven Konfiguration gebraucht werden, weil sie für die User überhaupt nicht nützlich sind.
Nutzerforschung zuerst
Versteht das Team wirklich, wer seine Nutzer sind? Weiß es, was diese User vom bestehenden Design wollen? Ob das Team nun der Mobile-First-Route folgt oder die bestehende Oberfläche herunterreduziert – es bekommt Schwierigkeiten, wenn es diese Fragen nicht beantworten kann. Zuerst müssen die Hausaufgaben gemacht werden.
Das Team kann Feldstudien, Usability-Analysen und andere Forschungsmethoden anwenden, um zu verstehen, welche Funktionen wichtig und welche nice-to-have sind. Die Nutzung eines gut verstandenen Sets an Szenarien kann die Grundlage für die Diskussionen darüber bilden, was weggeschnitten und was beibehalten werden soll.
Ohne diese Nutzerforschung und diese Szenarien finden sich Teams wahrscheinlich schnell dabei wieder, wie sie Meinungsstreits führen und mit jeder Design-Entscheidung Probleme haben. Eine Beschneidung der Nutzerforschung mag eine kurzfristig kostengünstige Strategie sein, aber langfristig schadet sie dem Design, und zwar spätestens, wenn die Meinungskriege anfangen.
Einen Prozess der Content-Anpassung etablieren
Die Chancen stehen gut, dass sich all diese Wörter und Bilder, die jetzt im Design leben, zum Kampf erheben, wenn das Team versucht, sie in eine kleinere Konfiguration zu zwängen. Einige Teams kommen damit davon, ihren Content zu kondensieren und zu stutzen, doch die meisten werden sich mit unterschiedlichen Inhalten über die verschiedenen Konfigurationen hinweg auseinandersetzen müssen.
Nicht gänzlich unterschiedlicher Content wohlgemerkt. Content, der sich den richtigen Plattformen anpasst. Beispielsweise sieht eine Überschrift in einer Laptop-Auflösung toll aus, funktioniert aber nicht auf einem mobilen Bildschirm. Wie Karen McGrane gerne sagt: "Truncation is not a content strategy ..."
Eine adaptive Content-Strategie begleitet die Responsive-Design-Strategie, indem sie modelliert, welche verschiedenen Formen der Website-Content in den vorgesehenen Konfigurationen annehmen wird. Ist die Strategie einmal durchdacht, kann das Team einen unterstützenden Redaktionsprozess mit Content-Management-Tools zusammenbringen. Die Alternative ist, mit Inhalten zu hadern, die sich Konfigurationen anzupassen versuchen, für die sie nicht gemacht sind.
Von Information zu Interaktion übergehen
Eine Menge an sogenanntem Screen Real Estate gibt dem Designer Bewegungsfreiheit, und gerade bei der Darstellung von Informationen kann er in die Vollen gehen. Es ist zum Beispiel einfach, eine Produktvergleichstabelle mitsamt der ganzen Features und all den glorreichen Spalten und Zeilen für alle direkt sichtbar hinzusetzen. Auf einem kleinen Bildschirm mit einer geringeren Auflösung aber wird so eine Tabelle mit ihren hilfreichen Informationen trotz der Möglichkeiten des Zwei-Finger-Zooms exponentiell unnutzbar.
Teams, die sich dem responsiven Design zuwenden, brauchen eine Strategie dafür, wie sie Interaktionen integrieren, wo einst die Informationen ohne Umwege einsehbar waren. Verwendet man eine interaktive Oberfläche, können die Nutzer Filter direkt manipulieren, um in die Daten einzusteigen, die sie brauchen.
Sogar die Website-Navigation, die zuvor möglicherweise mithilfe von Megamenüs gelöst wurde (oder zumindest dachte das Team, dies wäre eine Lösung), muss nun behutsam interaktiv gestaltet werden. Kleinere Bildschirme brauchen Daten als Startpunkte für Interaktionen – mit offensichtlichen Aktionen für die wichtigsten Funktionen und ausgeklügelten Berührungsgesten für Shortcuts.
Was sollen wir mit diesem Bild machen?
Die gesamte Strategie kommt bei den Bildern zusammen. Mit einer guten Responsive-Strategie weiß man bei jedem Bild, was zu tun ist, während eine schlechte das Team zwingt, sich mit suboptimalen Ergebnissen und langen Produktionszeiten herumzuschlagen.
Nehmen wir einen Online-Nachrichtenartikel mit unterstützenden Fotos und Diagrammen. Für jedes Grafikelement müssen Sie über den richtigen Kurs entscheiden und wissen, was zu tun ist. Skalieren Sie das Bild runter auf eine niedrigere Auflösung? Beschneiden Sie es? Oder skalieren und beschneiden? Sollte es eine Touch-to-Zoom-Funktion geben? Oder vielleicht können Sie das Bild ganz weglassen, da es zwar recht nett, aber nicht unbedingt notwendig für die Story ist?
Wenn Sie an einer News-Seite arbeiten, kann eine langfristige Strategie für den Umgang mit Bildern ungemein helfen. Haben Sie eine solche, wissen Sie, wie Sie sich bei jedem Bild für die beste Alternative entscheiden, und können dem Redaktionsteam einen einfachen Weg vorgeben, um den besten Output zu indizieren. Da die meisten Websites auf dieser oder jener Ebene Grafiken nutzen, müssen diese Teams eine einheitliche Strategie zur Hand haben.
Ihre Strategie zeigt, wie Sie hingelangen
Wenn Sie dem Management gerade verkaufen wollen, warum Responsive Design so wichtig ist, passiert es schnell, dass die weitreichenden Effekte übersehen werden, die mit ihm einhergehen. Ein Ja zum responsiven Design verändert den Redaktionsprozess, die Herangehensweise an visuelles Design und Interaktionsdesign und das Denken über den User und seine Ziele. Wer vorbereitet ist und eine solide Strategie hat, wird es beim Übergang zu responsiven Websites leichter haben und auf dem Weg dahin weniger Überraschungen erleben.
Dieser Artikel wurde im Original am 29. Januar 2013 unter dem Titel Devising a Strategy for Responsive Design
