« Zurück zur Übersicht
Themenbild mit Notebook und Smartphone auf dem Tisch

Was ist Responsive Webdesign?

Responsive Webdesign, zu Deutsch sinngemäß „reagierendes Webdesign“ ist eine aktuelle Technik, die es uns mit Hilfe von HTML5 und CSS3 Media-Queries erlaubt, flexible Websites zu entwickeln welche sich der Bildschirmauflösung des mobilen Endgeräts des Seitenbesuchers anpassen.
Oder kurz: Die Website passt sich der Auflösung des Geräts an, mit dem die Site aufgerufen wurde.

Wieso Responsive Webdesign?
Der Trend geht zum Surfen mit dem Tablet oder mit dem Smartphone. Immer öfter werden Websites mit den praktischen mobilen Geräten aufgerufen. Durch die stetige Zunahme der Verkäufe von mobilen Endgeräten spielt geräteübergreifende Flexibilität eine immer wichtiger werdende Rolle. Bereits heute gibt es über eine Milliarden mobile Geräte!
Ein Vorteil des Responsive Webdesigns ist die einfache Pflege des Contents. Bei separaten Mobile-Sites muss oft zweimal gepflegt werden, was schnell zu Inkonsistenzen führen kann.

Mobile first – weniger ist mehr
Durch die Optimierung auf mobile Endgeräte wird inzwischen häufig zuerst das Layout für Smartphones und von dort zur breiteren Ansicht bis hin zur Desktopansicht gestaltet. Man hält sich dabei für gewöhnlich an den Grundsatz „weniger ist mehr“, da auf dem Bildschirm eines Smartphones nicht sehr viel Platz ist. Oft wird dieser Grundsatz bis in das Desktop-Layout mitgenommen, mit der Begründung, dass die Desktop-User ebenso die auf das Wesentliche konzentrierte Information erhalten sollen.

Schaubild: Layoutgestaltung zuerst für Smartphone, dann Tablet und danach Desktop
Layoutgestaltung bei mobile first startet bei der Smartphone-Darstellung

Beispiel für Responsive Webdesign aus unserem Portfolio (kieswerk-hardt.de):

Beispiel einer Responsive Website auf Desktop, Tablet und Smartphone