Responsives Webdesign

Responsives Webdesign (oder „RWD“) ist eine Art von Webdesign, die für verschiedene Browser-Plattformen eine individuell angepasste Darstellung bietet. Eine mit RWD erstellte Website zeigt je nach verwendetem Gerät eine andere Benutzeroberfläche an. Beispielsweise kann eine responsive Website auf einem Laptop anders aussehen als auf einem Tablet oder einem Smartphone.

Heute greifen viele Menschen mit Mobilgeräten auf Websites zu und nicht mit Desktopcomputern oder Laptops. Zwar können die meisten Smartphones normale Websites anzeigen, doch sind deren Inhalte schwer zu lesen und noch schwieriger zu bedienen. Daher verwenden viele Webentwickler inzwischen responsives Webdesign, um auf kleinen Bildschirmen ein besseres Surferlebnis zu bieten.

Websites, die für Mobilgeräte wie iOS- und Android-Telefone entwickelt wurden, haben in der Regel eine größere Standardschriftgröße und eine vereinfachte Navigation. Einige Websites nutzen auch die Oberfläche von Touchscreens und bieten Unterstützung für Wischen, Drehen sowie Auf- und Zuziehen zum Vergrößern und Verkleinern. Eine für Mobilgeräte optimierte Website kann außerdem unnötige Inhalte entfernen, um den Bedarf an Scrollen zu verringern. Bild-Rollover und andere Funktionen, die beim Überfahren mit der Maus ausgelöst werden, werden häufig entfernt, da Touchscreens keinen Mauszeiger unterstützen.

Es gibt mehrere Möglichkeiten, responsives Webdesign umzusetzen. Eine Methode besteht darin, die Plattform des Benutzers, beispielsweise ein iPad oder iPhone, dynamisch zu erkennen und spezielles HTML und CSS für das entsprechende Gerät zu laden. Eine andere Möglichkeit besteht darin, Media Queries zu verwenden, die abhängig von der Größe des Browserfensters automatisch unterschiedliche CSS-Stile laden. Das Bootstrap-Paket, das mehrere vorgefertigte JavaScript- und CSS-Dateien enthält, basiert auf Media Queries und wird häufig im responsiven Webdesign eingesetzt.