Responsive Design

Lange galt die Bildschirmauflösung von 1024 x 768 Pixel als gute Standard-Orientierung. Seit der Erfindung der Netbooks gilt diese Regel nicht mehr. Einige Netbook-Modelle sind zwar breiter, aber weniger hoch. Außerdem nehmen Bedienelemente wie Browser-Menüs und Taskleiste ebenso Bildschirmplatz in Anspruch – so können mitunter weniger als 600 Pixel Höhe verfügbar bleiben. Auf Tablets und Smartphones kann der Bildschirm noch kleiner sein. Auf einem großen Monitor stehen dagegen über 2.000 Pixel in der Breite und vielleicht 1.600 Pixel in der Höhe zur Verfügung. Da wirkt die selbe Webseite schnell verloren. Auch wenn sich Groß-Monitor-Benutzer daran gewöhnt haben, dass viele Webseiten die Breite nicht optimal nutzen, so ist doch ihr Webseitenausschnitt fast dreimal so hoch wie auf einem Netbook. Dadurch ergibt sich teilweise eine ganz andere optische Dynamik und Nutzerführung.

Daher zahlt es sich aus, für Webseiten die Zielgruppe gut zu definieren. Dadurch lassen sich Rückschlüsse über die verwendete Monitorgröße ziehen. Eine Shopping-Webseite für Privatkunden wird beispielsweise tendenziell oft auf Tablets oder Netbooks genutzt. Eine Shopping-Webseite für Büro-Zubehör dagegen öfter im Büro-Umfeld, wo größere Monitore vorhanden sind.

Verschiedene Arten von Anpassung

Webseiten gehen unterschiedlich mit den potenziell unterschiedlichen Monitorgrößen um:

  • Ein sogenanntes Responsive Design passt sich flexibel der jeweiligen Bildschirmgröße an. Dabei wird die eigentliche HTML-Datei nicht verändert, sondern nur die Darstellung und Platzierung der Elemente mittels CSS. Der Begriff „Responsive Design“ fungiert als Oberbegriff für alle Seiten, die sich flexibel der Bildschirmgröße anpassen. Als Basis dient ein Fluid Grid, dessen Bereiche je nach Bildschirmgröße verschoben, vergrößert oder verkleinert werden.
  • Bei einem Fluid Design werden nur die Proportionen verschoben, die Blöcke haben beispielsweise 20 Prozent Bildschirmbreite, erscheinen also auf kleinen Monitoren lediglich schmaler als auf breiten.
  • Beim Template-Ansatz werden für jede relevante Bildschirmgröße werden separate HTML-Vorlagen angelegt, um eine jeweils optimale Bildschirmnutzung zu erreichen. Je nachdem, an welches Gerät eine Webseite ausgeliefert wird, sendet der Webserver eine andere HTML-Variante der Webseite.
  • Ein Adaptives Design ist eine Zwischenvariante. Dabei werden Zwischenstufen definiert, zwischen denen die Darstellung mittels CSS umgeschaltet wird. Die Anpassung erfolgt nicht stufenlos, sondern je nach Bildschirmgröße wird eine von beispielsweise drei oder vier Darstellungsvarianten verwendet. Dies lässt sich mit dem Fluid Design kombinieren, indem sich bestimmte Blöcke dynamisch an die verfügbare Breite anpassen.
  • Es ist auch legitim, nur eine Variante zu erstellen, die sich an einer geeigneten Standardgröße orientiert. Dann können die Besucher die Zoomfunktionen ihrer Smartphones, Tablets oder Browser verwenden, um auf der Webseite zu navigieren.

Alle vier Optionen haben ihre jeweiligen Vor- und Nachteile. Für Responsive und Adaptives Design muss die HTML-Datei optimal auf alle verschiedenen Bildschirmgrößen vorbereitet sein, also die Bildschirmelemente so anordnen und strukturieren, dass mittels CSS die Formatierungen und Platzierungen funktionieren. Bei allen Veränderungen zwischen den verschiedenen Darstellungen muss der Nutzer die Webseite in allen Größen immer noch als die selbe erkennen können – und alle benötigten Funktionen stets an der üblichen Stelle vorfinden. Auf einem Smartphone-Bildschirm erwartet man diese mitunter an anderen Positionen.

Dafür stellt auf Smartphones das Scrollen keine Hürde dar; da es fast nie möglich ist, alle Informationen auf einer Bildschirmseite unterzubringen, gehört es zur Nutzererwartung, dass Scrollen nötig ist. Die Inhaltspflege ist für Webseiten mit Responsive oder Adaptive Design meist unaufwändiger, dafür muss im Vorfeld mehr geplant und berücksichtigt werden, damit in jeder Ansicht alle benötigten Elemente sichtbar und bedienbar sind.

Entwicklung eines Responsive Design: Mobile First

Ein responsive Design entwickelt sich am besten von der kleinsten hin zur größten Ansicht, „Mobile first“. Für das Smartphone werden alle Inhalte in die richtige Reihenfolge gebracht, denn aufgrund des kleinen Monitors kann kaum mehrspaltig gearbeitet werden. Die Inhalte und Funktionen werden also linearisiert, vom Wichtigen (zuerst) zum Unwichtigen oder Ergänzenden (am Ende).

Im nächsten Schritt wird die Ansicht gedanklich verbreitert, spätestens bei der Laptop-Ansicht ist der sichtbare Bereich mehr als doppelt so breit wie auf einem Smartphone. Daher ist es selten sinnvoll, die eine Textspalte einfach nur den zusätzlichen Platz ausfüllen zu lassen und die Schrift dabei zu vergrößern. Durch die zusätzliche Breite können Elemente aus den unteren Smartphone-Bereichen nach oben geholt und neben anderen platziert werden.

Ein responsive Design besitzt meist sogenannte Breakpoints, an denen die Darstellung umgeschaltet wird, beispielsweise wird aus einem dreispaltigen Basislayout ein vierspaltiges. Zwischen diesen Umschaltungen wachsen bzw. schrumpfen die Spalten jeweils stufenlos bis zum nächsten Breakpoint. Diese werden als sogenannte Media-Query in der CSS-Datei definiert. Javascript sollte aus Performance-Gründen nur dann verwendet werden, wenn mit CSS eine wichtige Umsortierung partout nicht zu realisieren ist.

Damit eine Webseite gut geplant werden kann, wird sie in Blöcke aufgeteilt. Solche Blöcke (beispielsweise für Hauptinhalt, Navigation, Teaserflächen, Social-Media-Buttons, Kommentare, ergänzende Informationen) entsprechen den Kästen, die in Layout-Programmen auf der Seite angeordnet und verschoben werden. Mittels CSS kann jeder dieser Blöcke dann beeinflusst werden.

An den Breakpoints sind vielfältige Umgestaltungen möglich:

  • Umsortierung oder andere Anordnung der Inhaltsblöcke
  • Ein- oder Ausblenden von Blöcken oder Elementen
  • Menü umbauen: auf Smartphones meist ausklappbare Menü (mit sogenanntem „Burger“-Symbol), auf Laptop oder PC dagegen Menüzeile
  • andere Größen für Elemente, z.B. Bilder, Grafiken, Bedienelemente
  • Schriftgrößen und Abstände vergrößern oder verkleinern
  • andere Farbigkeiten, Ränder, Schattenwürfe
  • Hover-Effekte bei Mausberührung

Für jedes Gerät gelten besondere Anforderungen.

Smartphone

  • große Bedienelemente
  • Bildschirmtastatur und Eingabeelemente verdecken oft den halben Bildschirm
  • nur Klicken (kein Zeigen vor Klick, also keine Hover-Effekte) möglich
  • lineare Anordnung der Inhaltsblöcke
  • Scrollen (vertikal) ist üblich und kein Hindernis
  • Seitenkopf (das beim Seitenaufruf als erstes ohne Scrollen Sichtbare) enthält jeweils die wichtigsten Informationen und Aktionen/Funktionen
  • Menüs/Buttons zum Aufrufen weiterer Funktionen sind üblich, um Bildschirmplatz zu sparen; diese Elemente müssen deutlich als solche erkennbar sein

Tablet

  • große Bedienelemente
  • Bildschirmtastatur und Eingabeelemente verdecken oft ein Drittel des Bildschirms
  • nur Klicken (kein Zeigen vor Klick, also keine Hover-Effekte) möglich, daher andere Feedback-Lösungen für einige Bedienelemente nötig
  • begrenzt räumliche Anordnung der Inhaltsblöcke möglich
  • im Hochformat oft recht schmal (teilweise weniger als 700 Pixel breit), daher Mehrspaltigkeit im Hochformat selten optimal
  • im Querformat wird gleiche Darstellung wie auf Laptop erwartet
  • Scrollen (in alle Richtungen) ist üblich und kein Hindernis

Laptop und Computermonitor

  • kleine Bedienelemente möglich
  • Unterscheidung zwischen Zeigen und Klicken (Hover-Feedback bei Berührung mit Mauszeigerberührung werden erwartet)
  • räumliche Gestaltung in zwei Dimensionen (Mehrspaltigkeit) wird erwartet, beispielsweise als Haupt-Inhaltsspalte und Navigations- oder Teaserspalte
  • Text nicht zu breit laufen lassen (maximal 80 Zeichen pro Zeile für Texte zum Lesen)

Als Ausgangsmaterial empfiehlt sich eine Spaltenskizze (analog zum Satzspiegel im Drucklayout):

  • 2 Spalten für Smartphone hochkant
  • 3 Spalten für Tablet hochkant oder Smartphone Querformat
  • 4 Spalten für Tablet Querformat und Laptop
  • 5 Spalten für Computermonitor
  • ggf. 6 Spalten für sehr große Computermonitore

Die Spalten gewährleisten ein gewisses Grundraster, damit entsteht ein Baukasten aus Seitenelementen, sodass sich neue Seitentypen daraus schnell zusammenstellen lassen. Das reduziert zwar den Erstellungs- und Pflegeaufwand gemäß dem Widget-Modell, verpflichtet aber zu guter Planung.

Es kann sich in einigen Fällen anbieten, nicht alle Spalten gleichmäßig mitwachsen zu lassen, sondern eine „Gummi-Spalte“ einzufügen. Diese wächst bis zum nächsten Breakpoint mit, während alle anderen gleichbreit bleiben. Üblicherweise enthält dann diese Gummi-Spalte den Hauptinhalt. Dabei sollten ihr auch Maximalgrenzen gesetzt werden, denn zu breite Textspalten sind schwer lesbar.

In diesen Spalten werden dann die Blöcke verteilt. Dabei kann ein Block mehrere Spalten umfassen. Die zwei Smartphone-Spalten werden als eine behandelt und sind insgesamt etwa halb so breit wie das Tablet-Querformat. Auf diese Weise wird jede Seitenansicht in allen Formaten skizziert und werden die Blöcke angeordnet. So erhält man sein Layout. Anschließend sind die wiederkehrenden Blöcke zu identifizieren, beispielsweise ein Block mit Angaben zu einem Autor oder Produkt, ein bestimmtes Formular oder ein Textbereich. Für diese werden dann die Designs entwickelt, die für jedes Geräteformat angewendet werden.

Umsetzung eines Responsive Design

Achtung: Der HTML-Code ist stets der gleiche – also sind die Designs von der Reihenfolge der Elemente im HTML-Code abhängig, und die Gestaltung via CSS von der korrekten Auszeichnung aller HTML-Elemente. Dadurch wird die Planung einer solchen Seite recht komplex, und man bekommt schnell Knoten im Gehirn. Dagegen hilft nur das praktische Üben und das Studium des Quellcodes anderer Webseiten (der Quellcode lässt sich in jedem Browser untersuchen und so einiges lernen).

Es gibt bislang kaum Tools, mit denen sich ein responsive Design adäquat entwickeln lässt. Also werden die wesentlichen Ansichten (vor jedem Breakpoint) mit dem Design-Programm der Wahl erstellt. An Prototyping mittels echtem HTML und CSS führt jedoch kein Weg vorbei. Dabei wird zuerst das Layout als HTML-Dummy umgesetzt. So lassen sich die korrekte Verschiebung der Blöcke sowie deren sinnvolles Skalieren zwischen den Breakpoints prüfen und anpassen. Auch Bilder können dank CSS mitwachsen oder mitschrumpfen, dabei werden diese vom Browser skaliert, was nicht bei allen Bildern gut funktioniert.

Da die verschiedenen Browser und Geräte immer noch einige CSS-Tricks unterschiedlich umsetzen, ist Testen unumgänglich und sollte möglichst zeitig beginnen. Als Faustregel sollte jeder Browser der letzten drei Jahre getestet werden. Wem Statistiken über die Browserverteilung seiner Besucher vorliegen, kann daraus die zu testenden Geräte und Browser ableiten: alle mit mindestens 0,5-Prozent-Anteil sowie alle sehr neuen Browser oder Browserversionen.

Erst im zweiten Schritt wird dann Stück für Stück das Design aufgetragen. Da sich die Ansicht für jede Fensterbreite verändert, ist auch die Gesamtwirkung stets eine andere. Da sich inzwischen die Erkenntnis durchgesetzt hat, dass ein pixelgenaues Nachbauen von Grafik-Entwürfen unmöglich ist, bleibt als wichtigste Entscheidungsbasis die Ansicht in einem Browser.

Übrigens ist es nie sinnvoll, Webseiten-Entwürfe auf einem Beamer oder als Bild-Datei zu begutachten. Der Beamer verfälscht die Farben, Kontraste und Lesbarkeit, und die körperliche Verfassung des Betrachters ist eine völlig andere als vor einem Monitor. Die Bilddatei (als jpg oder png) in einem Browserfenster anzuzeigen, ist die effektivste Möglichkeit. Der Entwurf wirkt in seinem natürlichen Umfeld. Die Wirkung, Klickwege und Nutzeraktionen lassen sich so realistischer abschätzen.

Für welche Webseiten ist ein responsive Design geeignet?

  • Seiten zur Wahrnehmung mit wenig Interaktion
  • Textbasierte Content-Webseiten: News, Nachrichten, Berichte, Texte
  • immer wenn Text im Vordergrund steht, denn dieser skaliert am ungefährlichsten
  • wenn mit wenig Entwicklerressourcen eine Zielgruppe erreicht werden muss, für die Smartphones und Tablet entweder häufige Nutzungsgeräte sind oder der Nutzungszweck die Verwendung von Smartphone oder Tablet nahelegt

Für welche Webseiten ist ein responsive Design wenig geeignet?

  • Seiten mit viel Interaktion und vielen Funktionen (Ausnahme: Facebook, die eine größere Entwicklungs- und Testabteilung haben als die meisten)
  • Webshops mit Fokus auf Bildern und Funktionalitäten (Ausnahme: Amazon, deren mitwachsendes Design bei großer Breite nicht überzeugt)
  • komplexe Navigation, Filtermöglichkeiten
  • der Nutzungszweck lässt eher eine Nutzung am Monitor erwarten bzw. die Zielgruppe nutzt vorwiegend Computer

Separate Ansichten je Monitorgröße/Adaptives Design

Vereinfacht ist ein adaptives Design genauso aufgebaut wie ein responsive Design~– der Unterschied besteht darin, dass nur die Darstellungen der Breakpoints existieren, also keine Skalierung zwischen diesen stattfindet. Damit lässt sich die Darstellung und Wirkung wesentlich präziser steuern. Durch die prozentuale Skalierung im responsive Design können Rundungsfehler in bestimmten Zwischengrößen entstehen, oder manche Gestaltungen sind in der Skalierung nur aufwändig umzusetzen und umständlich zu testen.

Als Nachteil bleibt zwischen den Breakpoints dann leerer Raum (meist links und rechts vom Inhalt). Da die wenigsten Nutzer ihre Browserfenster ständig vergrößern oder verkleinern, empfinden diese das als weniger schlimm als die Designer. Ist das Browserfenster breit genug, wird ja die nächstgrößere Version angezeigt.

Als pragmatisch hat es sich erwiesen, die kleinste Größe bis zum ersten Breakpoint zu skalieren. Die kleinste Größe besteht nur aus einer Spalte, da gibt es wenig Nebenwirkungen, und der Nutzen für die Seitenbesucher ist gegeben, da gerade auf kleinen Geräten stets der gesamte Platz genutzt wird.

Autor:  bei LinkedIn

Übrigens ist die Webseite www.axin.de als responsive Design umgesetzt. Zur Begutachtung das Browserfenster verschmälern oder verbreitern.

Link-Tipps

Google berät zu SEO-Strategien für Mobilseiten

Google-Test zur Mobil-Eignung

Überblick zu Mobile SEO (englisch)

Video-Workshop zum Responsive Design

Die htmlworld hat ein gut verständliches Video zur Erstellung eines Responsive Designs zusammengestellt.

Teil 1: Anlegen einer HTML-Basis-Datei mit allen benötigten Elementen. Dabei werden beispielsweise die HTML5-Elemente <section>, <header> und <footer> genutzt. Diese HTML-Dummy-Datei lässt sich in einem nächsten Schritt als Template für ein CMS übertragen, indem die jeweiligen Elemente gegen die entsprechenden Platzhaltervariablen ersetzt werden.

Teil 2: Mittels CSS wird der HTML-Code formatiert und die dynamische Anpassung an die Bildschirmbreite umgesetzt.