Responsive Design (vom englischen responsive, „reagierend“) passt die Anzeige einer Website auf das aktuell genutzte Anzeigegerät und die Größe des Bildschirms an. Das Webdesign reagiert also darauf, wenn eine Website einmal vom heimischen PC mit großem Monitor und ein anderes Mal unterwegs vom Smartphone aufgerufen wird.


Responsives Webdesign ist nach und nach immer wichtiger geworden und heute unerlässlich. Denn es sind immer mehr internetfähige Geräte mit kleineren Displays im Einsatz, und außerdem werden die Übertragungsgeschwindigkeit und Verfügbarkeit von mobilen Internetverbindungen immer besser.

Was macht Responsive Design so besonders?

Eine nicht responsive Website wird auf jedem Gerät und jedem Bildschirm gleich dargestellt. Auf einem großem Monitor mit einer Diagonale von 20 Zoll oder mehr sieht sie genauso aus wie auf einem Smartphone mit einem 3,5 Zoll-Display. Was auf dem großen Monitor toll wirkt und angenehm lesbar ist, wird für das Smartphone einfach verkleinert – Texte, Bilder und Videos ebenso wie Menüs und Links für die interne und externe Navigation.

Ist die Website allerdings nach dem Resonsive Design-Paradigma entwickelt, reagiert sie dynamisch auf das Gerät, von dem aus sie aufgerufen wird. Die Seite passt sich an die Bildschirmauflösung des Endgerätes an. Inhalts- und Navigationselemente sowie der strukturelle Aufbau der Seite werden auf jedem Bildschirm so angezeigt, dass mit der Maus oder dem Touchscreen einfach zu bedienen sind. Responsive Websites sind damit „mobile friendly“, was seit einigen Jahren auch ein wichtiger Ranking-Faktor bei Google ist.

Was gibt es für Alternativen zum Responsive Design?

Eine mögliche, aber nicht besonders empfehlenswerte Alternative ist der Verzicht auf responsives Webdesign. Allerdings wirst du mit einer nicht responsiven Seite schlechter in den Suchergebnissen von Google und Co. gefunden. Und wer deine Website oder deinen Webshop mit dem Smartphone von unterwegs aus besucht, wird das vermutlich kein zweites Mal probieren. Sondern sich entweder auf den Weg zum nächsten Desktop-PC mit Monitor machen oder eben bei deinem Wettbewerber vorbeisurfen. Denn dessen Website ist bereits mobile friendly und responsive.

Oder du entwickelst zwei Websites – eine für den großen Monitor, eine für die mobile Nutzung. Dann musst du allerdings bei jeder Anpassung an beide Seiten ran, verdoppelst also den Pflegeaufwand für deine Internetpräsenz.

Wie lässt sich Responsive Design einfach umsetzen?

Eine responsive Website arbeitet mit HTML5 und CSS3. In CSS3 lassen sich sogenannte Media Queries programmieren, die bei jedem Aufruf deiner Website zunächst das Endgerät identifizieren und dann jeweils das passende Design ausliefern. Damit das klappt, müssen Inhalte und Layout einer Website strikt voneinander getrennt werden.

Moderne Content Management- und Onlineshop-Systeme bieten diese strikte Trennung und sind damit bereits ab Werk mobile friendly. Damit aber wirklich alles auf jedem Bildschirm optimal dargestellt wird und bedienbar ist, muss immer noch einiges angepasst und nachbearbeitet werden.

Du brauchst eine Website, die auch auf dem Smartphone reibungslos funktioniert und gut aussieht? Oder einen Webshop, der mobile Internetnutzer begeistert, statt sie mit friemeliger Navigation und unnötigem Gescrolle vom Kauf abzuhalten? Wir helfen dir gern, egal ob beim Redesign oder kompletten Neuaufbau. Dann ist deine (neue) Website vollständig responsive und mobile friendly – so wie unsere eigene und die vielen Seiten, mit denen wir schon andere Kunden glücklich gemacht haben.