Quelltext der Seite Responsive Webdesign

[[Datei:Complete.png|mini|klasse=skin-invert-image|Beispieldarstellungen von Elementen auf einer responsiven Website, welche sich an die unterschiedlichen Bildschirm&shy;auflösungen der Endgeräte anpassen.]]
Das '''Responsive Webdesign''' (im Deutschen auch ''responsives Webdesign'' genannt oder kurz ''RWD'', {{enS|responsive|de=reagierend}}) ist ein gestalterisches und technisches [[Paradigma]] zur Erstellung von [[Website]]s, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem [[Smartphone]]s und [[Tabletcomputer]], reagieren können.

Der grafische Aufbau einer „responsiven“ Website erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Website betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die Nutzung unterschiedlicher Eingabemethoden von [[Maus (Computer)|Maus]] (klicken, überfahren) oder [[Touchscreen]] (tippen, wischen). Technische Basis hierfür sind die neueren Webstandards [[HTML5]], [[Cascading Style Sheets|CSS3]] (hier insbesondere die [[Cascading Style Sheets#Eigenschaftsspezifische Stylesheets (Media Queries)|Media Queries]]) und [[JavaScript]].

== Gestaltung ==
Die Größe und Auflösung der [[Computermonitor|Displays]] auf [[Laptop]]s, [[Personal Computer|Desktop-PCs]], [[Tabletcomputer|Tablets]], [[Smartphone]]s, [[E-Book-Reader]]n und [[Fernseher|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ät]]e. Ziel dieser Praxis ist es, Websites ihre Darstellung so anpassen zu lassen, 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.

[[Datei:VE toolbar more settings.png|mini|klasse=skin-invert-image|Hamburger-Menü-Icon]]
Vor allem Blockelemente müssen unterschiedlich behandelt werden: Nutzt das [[Gestaltungsraster]] mehrere Spalten, können die Blöcke variabel an die Breite des jeweiligen [[Viewport]]s angepasst werden, bei kleinen Auflösungen, wenn eine Darstellung nebeneinander nicht mehr passt, untereinander verschoben oder alternativ positioniert werden.
Bilder sollten maximal auf ihr umgebendes Element –&nbsp;aber grundsätzlich nicht über ihre native Größe&nbsp;– skaliert werden. [[Textur (Computergrafik)|Texturen]] für Hintergründe können versteckt überfließen. Hintergründe mit Motiv werden bei kleinen Darstellungen auch weggelassen. [[Logo (Zeichen)|Logos]] können wie Bilder verkleinert oder bei großen und detailreichen Grafiken durch ein kleineres [[Signet]] ersetzt werden. Vertikale [[Menü (Computer)|Menüleisten]] brauchen oft viel Breite und können als Liste umpositioniert, zusätzlich eingeklappt und erst auf Klick, dann oft auf das [[Hamburger-Menü-Icon]], oder Scrollposition eingeblendet werden.

Das Inlineelement „Text“ darf nur wenig kleiner skaliert werden, um die Lesbarkeit zu erhalten. Da Text aber [[Automatischer Zeilenumbruch|automatisch umbricht]], ist eine spezielle Anpassung nicht nötig.

=== Abgrenzung zur mobilen Webseite ===
Umgangssprachlich gilt eine Website i.&nbsp;A. bereits als responsiv, wenn sie Breakpoints nutzt, zum Beispiel um Navigationsmenüs zu verkleinern –, auch wenn sie ansonsten nicht nur responsive, sondern ganz oder teilweise adaptive oder liquide Techniken einsetzt (s.&nbsp;u.). Der wesentliche Unterschied zu einer [[Mobile Webseite|mobilen Webseite]] besteht dabei in der Anzahl der [[Vorlage (Datenverarbeitung)|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 [[Mobilgerät|mobile Endgeräte]] hinzugefügt. Beim Responsive Webdesign dagegen 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.

=== Abgrenzung zu einer adaptiven Website ===
Auch der grafische Aufbau einer [[Webdesign-Layouttyp#Adaptives Layout|adaptiven Website]] richtet sich nach dem Viewport des jeweiligen Endgeräts. Dabei beschränkt man sich jedoch auf eine feste Anzahl von [[Breakpoint (CSS)|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 [[Webdesign-Layouttyp#Fluides Layout|liquiden Layout]] der zur Verfügung stehende Platz immer im gleichen prozentualen Verhältnis genutzt. Verkleinert 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 charakterisiert werden.

== Technik ==
Eine für responsives Webdesign wesentliche Voraussetzung sind sogenannte [[Cascading Style Sheets#Eigenschaftsspezifische Stylesheets (Media Queries)|Media Queries]], ein [[Cascading Style Sheets|CSS3]]-Konzept, welches unterschiedliche Designs in Abhängigkeit von bestimmten Eigenschaften des Ausgabemediums erlaubt.

Beispielsweise können folgende Eigenschaften als Kriterien herangezogen werden:
* Breite und Höhe des Browserfensters
* Größe des Gerätes selbst
* Bildschirmauflösung
* Orientierung (Hoch- oder Querformat)
* Eingabemöglichkeiten (Tastatur, Maus, Fingergeste [Touch], Sprache)

=== Verwendung in HTML ===
<syntaxhighlight lang="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>
</syntaxhighlight>

Hier wird das Stylesheet <code>smartphones.css</code> geladen, wenn die maximale Bildschirmbreite des betrachtenden Gerätes 480&nbsp;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 <code>all.css</code> anwenden. Bei der Verwendung von Media Queries in HTML ist zu beachten, dass [[Webbrowser|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.

<syntaxhighlight lang="css">
div {
  display:inline-block;
  width: 33%;
}

@media(max-device-width: 480px){
  div {
    display:block;
    width: 100%;
  }
}
</syntaxhighlight>

Ältere Browser, wie der [[Internet Explorer]] unter Version&nbsp;9 können CSS3 und insbesondere Media-Queries nicht interpretieren. In solchen Fällen kann durch [[Polyfill]]s Abhilfe geleistet werden, mit deren Hilfe eine fehlende Browser-Funktionalität durch JavaScript nachgerüstet wird.<ref>[https://github.com/scottjehl/Respond Respond.js] (auch für andere Browser: Kompatibilität ist dem Link zu entnehmen, englisch).</ref>

Responsive Webseiten werden häufig mit [[CSS-Framework]]s umgesetzt, die zahlreiche Funktionen für variierende Größen und Auflösungen mitliefern.

== Verbreitung ==
Vor 2011 existierten Internetseiten für Mobilgeräte meist nur als design- und funktionsreduzierte Versionen einer Desktop-Seite z.&nbsp;B. unter einer Subdomain (etwa „m.domain.de“). Der Wechsel zu responsivem Design unter einer einzigen Adresse vollzieht sich seit etwa 2013 spürbar beschleunigt im Rahmen von „Responsive Relaunches“ quer durch fast alle Branchen kommerzieller Internetangebote.

Der Gesamtanteil responsiver Seiten an heute insg. über 1 Milliarde weltweiter Websites ist nicht messbar und vermutlich verschwindend gering. Für die „Top 100.000“ wurde er 2014 jedoch bereits auf 11 % geschätzt – indem aber pauschal alle Seiten mit nicht-statischen Layouts berücksichtigt wurden.<ref>Guy’s Pod: {{Webarchiv|url=http://www.guypo.com/rwd-ratio-in-top-100000-websites-refined/ |wayback=20161114083708 |text=''RWD Ratio in Top 100,000 websites – refined.''}}</ref>

Definiert man Responsivität über die Präsenz von Viewport-Metatags, Einhaltung mobiler Bildschirmbreiten und Verzicht auf Mobil-Weiterleitungen, so gilt heute für kommerziell relevante Angebote: Die Hälfte ist bereits responsiv. Im Jahr 2016 besaßen laut Restive Insights in den USA bereits 63 % der 5.000 wachstumsstärksten [[Kleine und mittlere Unternehmen|KMU]] sowie 49 % der 1.000 umsatzstärksten Unternehmen responsive Internetauftritte. In derselben Größenordnung liegt auch der weltweite Anteil bei den 1.000 wichtigsten Universitäten (50 %) und den 500 meistbesuchten eCommerce-Seiten (48 %).<ref>Restive Insights: [http://restive.io/insights/ ''State of the Mobile Web'']</ref>

Auch im deutschsprachigen Internet hat sich Responsive Webdesign bei eCommerce-Angeboten (z.&nbsp;B. Onlineshops, Reiseportale) bereits stark durchgesetzt. In anderen Branchen (z.&nbsp;B. Preisvergleiche, Wetter, Börsenportale) findet man es dagegen nach wie vor selten. Aktuell basieren nahezu alle Relaunches im Internet auf Responsive Webdesign, monatlich verkünden mehrere führende deutschsprachige Onlinedienste einen entsprechenden Neustart.

== Begriffsgeschichte ==
[[Datei:MK12356 BeyondTellerand Ethan Marcotte.jpg|mini|hochkant|Ethan Marcotte etablierte 2010 den Begriff „Responsive Webdesign“]]
Erstmals verwendete [[Ethan Marcotte]] im Mai 2010 den Begriff „Responsive Webdesign“ in einem Artikel für das Magazin ''A&nbsp;List Apart''<ref>Ethan Marcotte: [https://alistapart.com/article/responsive-web-design ''Responsive Webdesign.''] In: ''A List Apart.''</ref>, in dem er Bezug zur ''responsiven Architektur'' nahm. 2011 griff Marcotte den Begriff in seinem Buch ''Responsive Webdesign'' 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 (Zeitschrift)|Forbes]]'' rät in einem Artikel zur Verwendung der neuen Darstellungsform.

== Literatur ==
* {{Literatur
   |Autor=Ethan Marcotte
   |Titel=Responsive Webdesign
   |Auflage=1.
   |Verlag=A Book Apart|Ort= New York
   |Datum=2011
   |ISBN=978-0-9844425-7-7}}
* {{Literatur
   |Autor=Christoph Zillgens
   |Titel=Responsive Webdesign – Reaktionsfähige Websites gestalten und umsetzen
   |Auflage=1.
   |Verlag=Carl Hanser Verlag
   |Datum=2012
   |ISBN=978-3-446-43015-0}}
* ''CSS3: HTML5 and CSS3: Develop with Tomorrow’s Standards Today.'' Pragmatic Programmers, ISBN 1-934356-68-9.
* ''The Mobile Book.'' In: ''Smashing Magazine.'' Smashing Media, 2012.

== Einzelnachweise ==
<references />

{{Normdaten|TYP=s|GND=1035443651}}

[[Kategorie:Interaktionsdesign]]
[[Kategorie:Cascading Style Sheets]]