Responsive Web Design

A B O S T U W

oder abgekürzt RWD ins eine Technik, dass Web Design einer Webseite an unterschiedliche Displaygrößen anzupassen. Bei der Erstellung einer Webseite stehen einem Webdesigner drei Optionen zur Auswahl.

  1. Responsive
  2. Adaptive
  3. Statisches

Soll das Web Design für die Darstellung auf mobilen Endgeräten mit kleineren Displaygrößen optimiert sein, beschränkt sich die Auswahl auf zwei Optionen. Bei einem Relaunch oder einer neuen Webseite wird häufig die Erstellung eines responsive Design bevorzugt. Ein responsive Design reagiert „fließend“ auf unterschiedliche Displaygrößen und bedarf im weiteren Verlauf einen weniger großen Pflegeaufwand.

Sowohl die mobile- als auch die Desktop Version sind über die gleiche URL zu erreichen, was zusätzlich einen gewissen Vorteil bei der Suchmaschinenoptimierung mit sich bring und Unterscheiden sich nur durch die Anordnung der Elemente.

Gibt es bereits eine fertige statische Webseite, ist es in den meisten Fällen aus kostengründen sinnvoller, für diese das bestehende Sytlesheet (CSS) mit den benötigten Regeln für die gewünschten Displaygrößen, z.B. iPad, iPhone etc., zu erweitern um eine adaptive (Anpassungsfähige) Webseite zu erhalten.

In beiden Fällen kommen im CSS sog. Media Queries zum Einsatz. Dadurch lassen sich im CSS größenspezifische Punkte, sog. Breakpoints definieren, mit deren Hilfe die Inhalte für die unterschiedlichen Displaygrößen korrekt dargestellt werden können.