Responsive Webdesign in 7 Schritten erklärt

Vom scheinbaren Trend hin zur Selbstverständlichkeit – und dennoch häufig falsch zitiert: Responsive Webdesign. Seit geraumer Zeit ist diese Methode fester Bestandteil meiner täglichen Arbeit. Und gehört zu den Grundwerkzeugen eines Designers im Web-Business. Doch wo genau beginnt “Responsiveness” und wo endet sie?

Die Antwort darauf ist nicht mehr dieselbe wie noch vor ein paar Jahren. Ursprünglich ging es darum, auch mobilen Endgeräten – wie Tablets oder Smartphones – eine optimierte Variante einer Website zu liefern. Heute geht der Ansatz dieser Technik allerdings wesentlich weiter und hat ihren Schwerpunkt von der Umsetzung über das Erstellen des Web-Designs immer weiter in die Konzeption verlagert.

Die grundlegende Idee hinter Responsive Web-Design ist – im Gegensatz zu einer separat programmierten, mobilen Variante – dass sich ein und dieselbe Seite in ihrer Darstellung allen Endgeräten flexibel anpasst. Das impliziert auch, dass die Webseite auf eine spätere Änderung reagieren kann – dreht man beispielsweise sein Smartphone in die Horizontale, nachdem die Seite geladen wurde, passt sich die Darstellung dem neuen Format an

Natürlich kostet es Zeit, eine sauber skallierende Web-Lösung zu planen und umzusetzen, doch es zahlt sich aus:

• Gleicher Code (und gleiches Design!) über alle mobilen Endgeräte hinweg erlaubt eine schnellere und einfachere Wartung aller Darstellungen.
• Die Fragmentierung des Designs wird eingedämmt und garantiert, dass sich auch kleine Anpassungen auf allen Varianten auswirken. 
• Designer und Entwickler sind gezwungen, bei jeder Maßnahme alle Varianten zu berücksichtigen – davon profitiert die Qualität und Persistenz deiner Webpräsenz. Das gilt besonders bei größeren Eingriffen, bei denen keine Gerätekategorie “ausgespart” werden kann. 
• Es sind nahezu beliebig viele Zwischenschritte möglich, die teilweise nur marginale Auswirkungen haben – ohne dafür die Seite komplett neu aufbauen zu müssen. 
  • Speziell bei der Vielfalt an Endgeräten und Auflösungen ist das ein wichtiges Argument. Vom kleinen Smartphone mit 3” bis hin zu großen Desktop Rechnern mit 27” und mehr – alle Endnutzer wollen heute eine gleichwertige Erfahrung genießen und nicht das Gefühl haben, einen Kompromiss zu sehen. Mit getrennten Seiten wäre dieser Spagat extrem zeit- und kostenintensiv. 
• Eine komplette Trennung des Codes setzt die “Erkennung” und Einordnung des Endgerätes voraus. Dies ist angesichts der heutigen Bandbreite schlicht nicht mehr zuverlässig möglich.

Es hat sich als praktisch erwiesen, die Breite des Browserfensters als Referenz zu verwenden. Beim Smartphone wird zum Beispiel eine Seite im Querformat anders ausgenutzt als im Hochformat. Wenn das Browserfenster auf einem sehr großen Monitor sehr schmal gezogen wird, bewirkt das ebenfalls eine angepasste Ansicht.

Neue Technologien bedeuten auch immer neue Anforderungen an das Design. Und das hat sich besonders in den letzten zehn Jahren massiv geändert.

Während wir früher mit festen Verhältnissen rechnen konnten, gilt es heute jede Eventualität zu berücksichtigen. Das bedeutet auch, dass wir für unsere Designs die nötigen Abweichungen gleich mit liefern müssen. Wir haben abzuschätzen gelernt, wann ein Element beginnt das Design zu stören oder schlichtweg nicht mehr funktioniert. Heute liegt die Herausforderung darin, ein Design zu schaffen, dass bei jeder erdenklichen Auflösung so aussieht, als ob der Designer es genau dafür geschaffen hat.

Zum Glück gibt es Werkzeug, das uns diese Arbeit erleichtert. Ein entsprechendes technisches Knowhow ist natürlich auch ein großer Vorteil. Der Königsweg liegt aber in der engen Zusammenarbeit zwischen Designer und Entwickler – und letztendlich dem Willen und den starken Nerven, während der Frontend-Entwicklung noch Anpassungen vorzunehmen. Regelmäßige und gründliche Reviews und Tests in allen Phasen sind heute selbstverständlich,vom Prototyp bis hin zum fertigen Produkt.

Wie die Planung von komplexer Software zunehmend agil verläuft, so muss auch das Design einem agilen Ansatz folgen. Das Dogma des festen und fertigen Design-Masters als PSD- oder Sketch-Datei gilt in dieser neuen Welt nicht mehr. Erst das fertige Design ist die fertige Website.

Die Herausforderung liegt darin, Schnittstellen für diese neuen Prozesse zu schaffen und Möglichkeiten zu finden, wie wir die Informationen und Konzepte definieren und über den ganzen Prozess tragen können.

Während wir früher dem Entwickler einen genauen Plan – eine Anleitung – geliefert haben, an dem er immer wieder gemessen wurde, geben wir heute Richtungen vor. Das Ergebnis gestalten wir in einem zyklischen Prozess mit. Diese Vorgehensweise verlangt sowohl vom Designer als auch vom Entwickler ein hohes Maß an Vertrauen und Vorstellungskraft – und auch der Kunde ist gefordert. Heutzutage ist es zunehmend schwieriger im Vorfeld ein exaktes Bild des Endergebnisses zu schaffen.

Ab dem 21. April 2015 werden Websites, die nicht für mobile Endgeräte optimiert sind, von Google benachteiligt. Vorerst gilt diese Änderung ausschließlich für die mobile Suche, allerdings ist es nur eine Frage der Zeit, bis dieser Filter ein Teil des allgemeinen Algorithmus wird.

Nicht nur die Darstellung, sondern auch der Inhalt (beziehungsweise sein Umfang) spielen dabei eine wichtige Rolle. Verzichtet man bei Übersichten auf zu lange Beschreibungen und stellt zum Beispiel bei langen Texten zuerst einen Auszug dar, kann das die User Experience positiv beeinflussen. Und keine Angst vor Cloaking Strafen: Google durchschaut schnell, ob eine Maßnahme die Nutzererfahrung steigert, oder man nur versucht den Bots der Suchmaschinen etwas vorzumachen.

In Zukunft wird die Vielzahl an Sensoren in den Endgeräten eine immer wichtigere Rolle spielen. In nicht allzu ferner Zeit reagieren Web-Präsenzen auf Helligkeit, Umgebungsgeräusche und Außentemperatur. Die GPS-Daten werden heute schon für viele Funktionen genutzt – bald könnte auch die gemessene Bewegung relevant werden. Die technischen Möglichkeiten sind noch lange nicht ausgeschöpft und wir werden in dieser Hinsicht noch viel Spannendes sehen.

Nicht nur technisch, sondern auch konzeptionell ist der Zenit noch lange nicht erreicht. Der dargestellte Inhalt wird zunehmend auf das Endgerät und dessen Umgebung reagieren – die Priorisierung der Telefonnummer auf Smartphones und der E-Mail auf Desktop-Rechnern sind da nur ein einfaches Beispiel.

Es geht nicht darum, Inhalt zu verstecken, aber genauer und bewusster zu entscheiden, für wen welcher Inhalt relevant ist. Wir werden Konzepte sehen, die unsere, teilweise noch sehr technoiden, Lösungen von heute weit in den Schatten stellen. Und wenn ich an dynamischen Content denke, dann erwarte ich Frontends, die wiederum stark auf diesen Content reagieren.

Umso mehr wir über den Nutzer und seine Situation wissen, umso besser muss seine Erfahrung mit unserem Produkt sein. Die nötigen Daten liegen häufig bereits vor – Tracking-Codes und diversen Online Marketing Maßnahmen sei Dank. Stellen wir uns also eine News-Seite vor, die einem depressiven Nutzer positive Nachrichten aufzeigt. Und schon werden wir dank Google und Co. zum digitalen Lebensberater.