4.2    Responsive Strategie – Mobile first und Content first 

Responsive Webdesign (abgekürzt gerne nur RWD genannt) ist also gekommen, um zu bleiben. Hinter diesem Kürzel stecken aber sehr unterschiedliche Vorgehensweisen und auch sehr unterschiedliche Vorstellungen, was denn responsiv überhaupt genau ist. Nicht jeder meint immer das Gleiche damit. Und vor allem das Ziel, eine responsive Webseite umzusetzen, kann sehr unterschiedliche Ergebnisse hervorbringen.

4.2.1    Adaptive Layout vs. Responsive Layout 

Eine Webseite kann man ganz allgemein unterscheiden zwischen responsiv (reaktionsfähig) und adaptiv (anpassungsfähig). Meist wird von responsiven Webseiten gesprochen, aber was genau bedeutet dies? Die erste und immer noch allgemeingültige Definition stammt von Ethan Marcotte: »Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design« (alistapart.com/article/responsive-web-design).

Responsive Webseiten setzen also auf ein flexibles Raster (oft auch Fluid Grid genannt, dazu später mehr). Im Zusammenhang mit Media Queries wird erreicht, dass der zur Verfügung stehende Platz optimal ausgenutzt wird, da sich das Layout über die volle Breite erstreckt. Einzige Ausnahme ist eine fixe Grenze bei sehr großen Auflösungen (max-width), sodass das Layout nicht zu breit wird.

Ein Umbruch des Layouts, also ein Breakpoint mit Media Queries, wird dann gesetzt, wenn das Design und die Inhalte danach verlangen. Die Hauptnavigation wird also dann »versteckt«, wenn der Platz nicht mehr ausreicht.

Abbildung 4.7    Die Webseite praxis-alex-berlin.com passt sich stufenlos jeder Auflösung an; getestet und mit Screenshot von ami.responsivedesign.is.

Ein adaptives Layout dagegen wird von Anfang an für bestimmte Bildschirmgrößen optimiert. Im Grunde sind es starre Gestaltungsraster wie früher das 960-Pixel-Raster, nur jetzt eben mehrere für unterschiedliche Auflösungen. Spezifische Ausgabegeräte stehen im Mittelpunkt und nicht der Inhalt bzw. die Inhaltsdarstellung. Meistens sind es häufig genutzte und beliebte Geräte wie das iPhone und iPad, deren Auflösungen für Breakpoints herhalten müssen. Für diese Geräte ist die Darstellung dann optimiert, aber nicht für Geräte, die eine etwas größere oder kleinere Auflösung haben. So wird häufig Platz verschwendet, der gerade bei kleineren Auflösungen nicht so reichlich vorhanden ist.

Das adaptive Vorgehen wird gerne eingesetzt, da es leichter und schneller umzusetzen ist als eine »richtige« responsive Webseite und durch die starren Raster das Aussehen auch besser kontrollierbar ist. In der Praxis werden aber auch adaptive Webseiten gerne responsiv genannt, sei es aus Unwissenheit oder aus verkaufstaktischen Gründen.

Abbildung 4.8    Das Raster des Frameworks getskeleton.com ist adaptiv und »springt« an den Breakpoints. So kann es passieren, dass bei einigen Auflösungen (viel) Platz verschenkt wird (rechter Screenshot).

Während reaktionsfähige (responsive) Layouts also stufenlos auf jede Größenänderung des Browsers reagieren können, sind anpassungsfähige (adaptive) Layouts nicht so flexibel und reagieren nur an bestimmten Punkten (Breakpoints).

4.2.2    Mobile oder Content – wer ist der Erste? 

Einhergehend mit dem Responsive Webdesign sind die Methoden des Mobile first und Content first aufgekommen. Mobile first bezeichnet ein Vorgehen, das von einer für Smartphones optimierten Darstellung ausgeht und sich dann nach und nach für die größeren Auflösungen anpasst (dazu gleich mehr). Daraus entwickelte sich ein Content first, weil man merkte, dass die Inhalte und deren Darstellung dabei relevant sind. Also zuerst müssen die Inhalte gefunden, sortiert und strukturiert werden (siehe Kapitel 5, »Informationsarchitektur«), bevor sie gestaltet und technisch umgesetzt werden können. Egal, wie man die Strategie nun nennt, eine Optimierung für kleine Auflösungen bringt folgende Fragestellungen mit sich:

• Was sind die Hauptbotschaften der Webseite?

• Welche zentralen Inhalte ergeben sich daraus?

• Welche Inhalte müssen auf allen Geräten und Auflösungen immer dargestellt werden und einwandfrei funktionieren?

Dies führt unweigerlich zu der Frage, was die Anwender eigentlich wollen. Daher könnte man dieses Vorgehen auch User first nennen. Egal, wie es denn später genannt wird, entscheidend ist, die Inhalte zu erarbeiten, die immer präsent sein sollten, und sich dann zu fragen, ob größere Bildschirme auch zwingend (viel) mehr Inhalte brauchen. Eventuell reicht dieser kleinste gemeinsame Nenner, da er die richtigen Schwerpunkte setzt und auf Überflüssiges verzichtet. Was auch immer first ist, also ein strategischer Ansatz bei der Webseitenerstellung, der nicht allein das Design oder die Technik betrifft, sondern den Kern einer Webseite: die Inhalte, ihre Darstellung und ihre Bedienbarkeit.

»Statt Content first oder Mobile first heißt es für viele Webdesigner am Morgen erst einmal ›Coffee first‹.«

4.2.3    Graceful Degradation vs. Progressive Enhancement 

Bei der Erstellung einer responsiven Webseite gibt es im Grunde zwei Wege: von groß nach klein oder umgekehrt.

Graceful Degradation | Der typische Webdesigner entwickelt an einem modernen Arbeitsplatz mit großem Bildschirm und modernem Browser. Von diesen Voraussetzungen ausgehend, wird die neue Seite erstellt, optimiert und dann nach und nach für kleinere Auflösungen und auch ältere Browser angepasst. Dieses Vorgehen nennt sich Graceful Degradation (deutsch etwa »würdevolle Herabstufung«).

Abbildung 4.10    Eine schematische Darstellung von Graceful Degradation. Zuerst wird für große Bildschirme und moderne Browser entwickelt.

Dieses Vorgehen mutet zuerst einmal logisch an. Die neuesten Technologien und Effekte werden eingesetzt, und das Design sieht bei viel Platz (also auf großen Bildschirmen) wunderbar aus. Je kleiner die Auflösung und je älter der Browser, desto eher kommt es zu Kompatibilitätsproblemen. Moderne Techniken werden nicht mehr oder nicht vollständig unterstützt (z. B. bestimmte CSS3-Anweisungen), und auf kleineren Auflösungen funktioniert das Layout nicht mehr.

Entweder werden dann Inhalte ausgeblendet (mit der CSS-Eigenschaft display:none), per JavaScript funktionstüchtig gemacht, oder sie funktionieren ganz einfach gar nicht mehr. Inhalte und Funktionalitäten werden so allmählich »abgespeckt«. Für die Zugänglichkeit einer Webseite ist dieses Vorgehen denkbar schlecht. Ältere Browser (z. B. Internet Explorer 7 und älter), kleine Bildschirme und langsame Geräte/Verbindungen werden bei diesem Vorgehen abgestraft (hör ich da etwa einen sagen, der IE zu Recht?).

Progressive Enhancement | Den umgekehrten Weg beschreitet die progressive Verbesserung (englisch: Progressive Enhancement). Die Idee ist, eine Webseite auch für Endgeräte nutzbar zu machen, die nur über eingeschränkte Funktionalitäten verfügen (z. B. keine vollständige Unterstützung von CSS3 oder JavaScript). Eine Webseite soll mit jedem Browser und jedem Gerät bedienbar und zugänglich sein. Das klingt schon so, als ob Progressive Enhancement die bessere Variante ist und damit auch die modernere.

Abbildung 4.11    Eine schematische Darstellung von Progressive Enhancement. Von Mobile first wird die Seite nach und nach für größere und auch modernere Geräte erweitert.

Dabei wird meistens von einer möglichst kleinen Auflösung und einem »schwachen« System ausgegangen und die Seite hierfür optimiert. Dies klingt passenderweise sehr nach den Ansätzen Mobile first und Content first. Schrittweise wird die Seite dann für größere Auflösungen und »stärkere« Systeme erweitert. Hier können dann auch komplexere Technologien und Layouteigenschaften zum Einsatz kommen.