Beim Responsive Webdesign (im Deutschen auch responsives Webdesign genannt oder kurz RWD, englisch responsive ‚reagierend‘) 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 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 (klicken, ĂŒberfahren) oder Touchscreen (tippen, 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, können die Blöcke variabel an die Breite des jeweiligen Viewports 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 – 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, 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 automatisch umbricht, ist eine spezielle Anpassung nicht nötig.


Abgrenzung zur mobilen Webseite


Umgangssprachlich gilt eine Website i. 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. u.). Der wesentliche Unterschied zu einer mobilen Webseite besteht dabei 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 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 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. VerĂ€ndert 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 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:


  • Breite und Höhe des Browserfensters

  • GrĂ¶ĂŸe des GerĂ€tes selbst

  • Bildschirmauflösung

  • Orientierung (Hoch- oder Querformat)

  • Eingabemöglichkeiten (Tastatur, Maus, Fingergeste , Sprache)

Verwendung in HTML

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.

Ä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.

Responsive Webseiten werden hĂ€ufig mit CSS-Frameworks 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. 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.

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 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 %).

Auch im deutschsprachigen Internet hat sich Responsive Webdesign bei eCommerce-Angeboten (z. B. Onlineshops, Reiseportale) bereits stark durchgesetzt. In anderen Branchen (z. 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

Erstmals verwendete Ethan Marcotte im Mai 2010 den Begriff „Responsive Webdesign“ in einem Artikel fĂŒr das Magazin A List Apart, in d































Ich stimme der Verwendung von Cookies fĂŒr die Zwecke der Webanalyse und digitaler Werbemaßnahmen zu. Auch wenn ich diese Website weiter nutze, gilt dies als Zustimmung. Meine Einwilligung kann ich jederzeit widerrufen. Weitere Informationen finde ich in der DatenschutzerklĂ€rung.

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close