Responsive Webdesign

Anzeige einer responsiven Website auf verschiedenen Endgeräten

Beim Responsive Webdesign (im Deutschen auch responsives Webdesign genannt oder kurz RWD) handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können. Der grafische Aufbau einer „responsiven“ Website erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Site betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden von Maus (klicken, überfahren) oder Touchscreen (klicken, wischen). Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3 (hier insbesondere die Media Queries) und JavaScript.

Gestaltung

Die Größe und Auflösung der Displays auf Laptops, Desktop-PCs, Tablets, Smartphones, E-Book-Readern und Fernsehgeräten können erheblich variieren. Aus diesem Grund sind das Erscheinungsbild und die Bedienung einer Website stark abhängig vom Endgerät. Für Grafiker liegt eine Herausforderung in der konzeptionellen Abgrenzung zu klassischem Printdesign: Wo es einst noch gewohnt und gelernt war, dass das Ausgabemedium eine bestimmte und unveränderbare Größe hatte, muss nun akzeptiert werden, dass starre Gestaltungen für eine Website nicht mehr übertragbar sind. Websites, die mit einem reaktionsfähigen Design ausgestattet sind, berücksichtigen die unterschiedlichen Anforderungen der Endgeräte. Ziel dieser Praxis ist, dass Websites ihre Darstellung so anpassen, dass sie sich jedem Betrachter so übersichtlich und benutzerfreundlich wie möglich präsentieren. Kriterium für das angepasste Erscheinungsbild sind neben der Größe des Anzeigegerätes beispielsweise verfügbare Eingabemethoden (Touchscreen, Maus) oder die Bandbreite der Internetverbindung.

Vor allem Blockelemente müssen unterschiedlich behandelt werden. Nutzt das Gestaltungsraster mehrere Spalten, so können diese variabel an die Breite des jeweiligen Viewports angepasst werden und bei kleinen Auflösungen, wenn eine Darstellung nebeneinander nicht mehr passt, untereinander verschoben oder alternativ positioniert werden. Bilder sollten maximal auf ihr umgebendes Element, aber grundsätzlich nicht über ihre native Größe, skaliert werden. Texturen für Hintergründe können versteckt überfließen. Hintergründe mit Motiv werden bei kleinen Darstellungen auch weggelassen. Logos können wie Bilder verkleinert oder bei großen und detailreichen Grafiken durch ein kleineres Signet ersetzt werden. Vertikale Menüleisten brauchen oft viel Breite und können als Liste umpositioniert, zusätzlich eingeklappt und erst auf Klick oder Scrollposition eingeblendet werden.

Das Inlineelement "Text" darf nur wenig kleiner skaliert werden um die Lesbarkeit zu erhalten. Da Text aber automatisch umbricht ist eine spezielle Anpassung nicht nötig.

Abgrenzung zur mobilen Webseite

Der wesentliche Unterschied zwischen einer mobilen Webseite und einem responsiven Design besteht in der Anzahl der Templates. Aus historischer Sicht bildet die Desktop-Version die normale Ansicht der Website. Dieser wird nach der klassischen Methode ein zusätzliches, unabhängiges Template für mobile Endgeräte hinzugefügt.

Beim Responsive Webdesign wird nur eine einzige Version der Website erstellt. Diese passt sich selbstständig der verfügbaren Umgebung an. Besonders sichtbar wird dies beim Layout, das sich nach Breite des Browser-Fensters entsprechend verändert.

Die Entscheidung für ein responsives Webdesign oder nur ein separates mobiles Template hängen vom Sinn und Zweck der Website ab.

Abgrenzung zu einer adaptiven Website

Auch der grafische Aufbau einer adaptiven Website richtet sich nach dem Viewport des jeweiligen Endgeräts. Dabei beschränkt man sich jedoch auf eine feste Anzahl von Breakpoints zwischen denen das Layout jeweils statisch bleibt. Eine fluide Anpassung an alle Auflösungen wie beim responsive Webdesign findet nicht statt.

Abgrenzung zu einer liquiden Website

Im Gegensatz zur 'adaptiven Website' wird bei einem liquiden Layout der zur Verfügung stehende Platz immer im gleichen prozentualen Verhältnis genutzt. Verschiebt man beispielsweise bei einer liquiden Website auf einem Desktop-PC die Breite des Browserfensters, so fließen die Inhalte zwar schmaler, da aber ein rein liquides Layout keine Breakpoints besitzt, bleibt die Anordnung der Layoutelemente dabei unverändert.

Zusammenfassend kann ein Responsive Webdesign deshalb als eine adaptive Reihe verschiedener liquider Layouts charaktisiert werden.

Technik

Eine für responsives Webdesign wesentliche Voraussetzung sind sogenannte Media Queries, ein CSS3-Konzept, welches unterschiedliche Designs in Abhängigkeit von bestimmten Eigenschaften des Ausgabemediums erlaubt.

Beispielsweise können folgende Eigenschaften als Kriterien herangezogen werden:

• Größe des Gerätes selbst
• Bildschirmauflösung
• Orientierung (Hoch- oder Querformat)
• Eingabemöglichkeiten (Tastatur, Fingergeste [Touch], Sprache)

Verwendung in HTML

<head>
  <link rel="stylesheet" type="text/css" href="css/all.css" />
  <link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px)" href="css/smartphones.css" />
</head>

Hier wird das Stylesheet smartphones.css geladen, wenn die maximale Bildschirmbreite des betrachtenden Gerätes 480 Pixel nicht überschreitet. In dieser Ressource können Entwickler nun spezielle Anpassungen für entsprechende Geräte vornehmen. Geräte mit einer höheren Auflösung bleiben davon unberührt. Sie bekommen die Website also beispielsweise in voller Größe angezeigt, da sie die Festlegungen aus dem Stylesheet all.css anwenden. Bei der Verwendung von Media Queries in HTML ist zu beachten, dass Browser grundsätzlich alle verfügbaren Stylesheets herunterladen, auch wenn sie den angegebenen Bedingungen nicht entsprechen.

Verwendung in CSS

Verbreitet ist die Einbettung von Media Queries direkt in das Stylesheet. So werden bestimmte Regeln vom Browser nur dann in Betracht gezogen, wenn die definierten Bedingungen erfüllt sind.

a {
  color: pink;
}

@media(max-device-width: 480px){
  a {
    color: blue;
  }
}

Ältere Browser, wie der Internet Explorer unter Version 9 können CSS3 und insbesondere Media-Queries nicht interpretieren. In solchen Fällen kann durch Polyfills Abhilfe geleistet werden, mit deren Hilfe eine fehlende Browser-Funktionalität durch JavaScript nachgerüstet wird.

Meist werden Responsive Webseiten mit CSS frameworks umgesetzt, da diese zahlreiche Funktionen für variierende Größen und Auflösungen mitliefern.

Begriffsgeschichte

Ethan Marcotte etablierte 2010 den Begriff „Responsive Webdesign“

Der Begriff „Responsive Webdesign“ wurde erstmals von Ethan Marcotte im Mai 2010 in einem Artikel für das Magazin „A List Apart“ verwendet, wobei er Bezug zur responsiven Architektur nahm. Außerdem griff er den Begriff in seinem Buch „Responsive Webdesign“ aus dem Jahr 2011 wieder auf. 2012 bezeichneten Branchendienste wie das .net magazine oder Mashable die neue Form der Onlinedarstellung als eine der wichtigsten Entwicklungen des Jahres und auch das Magazin Forbes rät in einem Artikel zur Verwendung der neuen Darstellungsform.

Literatur

• Ethan Marcotte: Responsive Webdesign. 1. Auflage. A Book Apart, New York, 2011, ISBN 978-0-9844425-7-7. 
• Christoph Zillgens: Responsive Webdesign – Reaktionsfähige Websites gestalten und umsetzen. 1. Auflage. Carl Hanser Verlag, 2012, ISBN 978-3-446-43015-0. 
• CSS3: HTML5 and CSS3: Develop with Tomorrow’s Standards Today (Pragmatic Programmers) ISBN 1-934356-68-9
• Smashing Magazine: The Mobile Book. Smashing Media 2012

Weblinks

• Media Queries Beispiele von Webseiten in Responsive Webdesign (englisch)
• Responsive Patterns Sammlung von Modulen für responsive Webdesign.
• liquidapsive.com Darstellung einer Website in Adaptive, Liquid, Responsive und Static Webdesign