Responsive Webdesign

Beim Responsive Webdesign (kurz RWD) handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Webseiten, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tablets, reagieren können. Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3 und insbesondere Media Queries.

Im Jahre 2010 stelle Ethan Marcotte erstmals im Webmagazin „A List Apart“ einen Artikel unter dem Titel „Responsive Webdesign“ eine Idee und Umsetzung einer sich der Bildschirmbreite anpassenden Webseite vor. Im Mittelpunkt dabei stand die Technik der „Media Queries“ mit denen man den unterschiedlichen Bildschirm- / Browserauflösungen CSS Definitionen zuweisen konnte. Dies ist eine Technik welche einiges revolutionierte und immer noch revolutioniert.

Eine Webseite kann man ganz allgemein unterscheiden zwischen responsive (reaktionsfähig) und adaptiv (anpassungsfähig). Responsive Webseiten setzten also auf ein flexibles Raster (oft Fluid Grid genannt). In 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), so dass 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“ bzw. anders umgesetzt, wenn der Platz nicht mehr ausreicht.

Ein adaptives Layout dagegen wird von Anfang an für bestimmte Bildschirmgrößen optimiert. Im Grunde sind es starre Gestaltungsraster wie früher mit dem 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.

Auf der Seite von Brad Frost (This is responsive) findet man eine Vielzahl an Quellen, Themen, Tips und Tools rund um das Thema responsive web design.

  • Trackbacks geschlossen
  • Kommentare (0)
  1. Noch keine Kommentare vorhanden.

Sie müssen eingelogged sein um Kommentare schreiben zu können.