Responsive Design

Smartphone und Tablets –für Betreiber von Websites sind sie eine Herausforderung. Denn wie garantieren sie , dass die Website auf allen Geräten optimal dargestellt wird?

Die Antwort ist Responsive Design: Die Website passt sich einfach dem jeweiligen Endgerät an. Egal ob sie mit einem Browser auf dem iPad oder einem Samsung Galaxy S25 geöffnet wird – das Layout sowie die Inhalte werden optimal dargestellt. 

Ein Beispiel für Responsive Design

Unsere eigene Website haben wir in Responsive Design umgesetzt.

Probieren Sie es aus: Wenn Sie das Fenster Ihres Browsers kleiner oder größer machen, verändert sich die Seite mit!

Die Vorteile von Responsive Design

• Eine einzige Website muss umgesetzt werden. Die Entwicklung einer eigenen mobilen Website ist schon lange nicht mehr nötig.

• Im laufenden Betrieb müssen Sie damit auch nur mehr eine Website mit neuen Inhalten befüllen und warten.

• Wenn Sie neben der regulären auch eine mobile Website betreiben, gibt es immer zwei URLs für die gleiche Seiten.
  Wurde Ihnen schon einmal ein Link zu einem interessanten Artikel von einem Smartphone aus geschickt? Wenn ja, haben Sie sich wahrscheinlich auch kurz über die eigenartige Darstellung des Artikels auf Ihrem großen Bildschirm gewundert. Der Link vom Smartphone verweist natürlich auf die mobile Variante der Website. Mit Responsive Design fallen doppelte URLs weg – es gibt nur noch eine Adresse für jeden Seiteninhalt.

• Eine responsive Website bietet Besucher:innen eine optimale Benutzungsfreundlichkeit (Usability), egal mit welchem Endgerät sie die Website ansurfen. Dadurch erhöht sich die Verweildauer auf der Website.

• Die Absprung-Rate (Bounce Rate) wird durch die bessere Usability geringer.

Die letzten drei Punkte sind im speziellen die Gründe warum Google die Verwendung von Responsive Design empfiehlt. Damit wird Responsive Design zu einem Vorteil im Bereich der Search Engine Optimization (SEO).

Vieles ist anders mit Responsive Design

Es gibt also vieles, das für den Einsatz von Responsive Design spricht. Vor, während und auch nach der Entwicklung gibt es aber einige Aspekte, die man beachten sollte.

Die Kosten

Die große Frage zuerst: Was kostet es? Die Kosten für eine Website im Responsive Design sind etwas höher als bei der Entwicklung einer regulären Website, da der Aufwand bei Layout und technischer Umsetzung größer ist. 

Wenn Sie einen Relaunch des Online-Auftritts oder eine komplett neue Website planen, sollten Sie die Entwicklung im Responsive Design auf alle Fälle in Betracht ziehen. Die Umsetzung eines flexiblen Layouts lässt sich in diesen Fällen recht einfach bewerkstelligen.

Das Design bei Projekten mit responsive Design

Das Layout einer Website für verschiedene mobile Endgeräte stellt Grafiker:innen manchmal noch vor Herausforderungen – sind sie doch fixplatzierte Bilder und feste Schriftgrößen gewohnt.

In Responsive Design ist hingegen nichts fix: Elemente verschieben sich, ändern ihre Größe oder verschwinden sogar, je nachdem auf welchem Gerät die Website betrachtet wird.

Zusätzlich verändern sich manchmal die Schriftgrößen, um Text auf dem jeweiligen Gerät besser lesbar zu machen. Daher arbeitet man im Responsive Design nicht mit festen Pixelanzahlen und Bildgrößen sondern vor allem mit Prozentangaben (z.B. gibt man an, dass ein Bild mit 35 % der aktuellen Bildschirmbreite angezeigt werden soll).

Idealerweise beauftragen Sie einen Designer oder eine Designerin mit Erfahrung in diesem Bereich für die Gestaltung Ihrer Website!

Technologie In Responsive-Design-Projekten

Da es auch im Bereich der technischen Umsetzung einige Neuerungen gibt, sind Softwareentwickler:innen mit Erfahrung ein Plus. Gebaut wird die Website oft mit einem flexiblen Grundraster ("Flexible Grid"), in dem zum Beispiel die Breite der Raster-Spalten nicht in Pixel sondern in Prozentzahlen angegeben wird.

Damit sich das Website-Raster dem jeweiligen Endgerät proportional anpasst, geben sogenannte Media Queries das Layout für Eigenschaften wie Displaygröße, Auflösung und Format vor.

Zum Beispiel kann eine dieser „Wenn-Dann-Angaben“ dem Browser des Endgeräts mitteilen, dass die Schrift auf dem Smartphone größer dargestellt werden soll als am Desktop.

Es gibt auch klare Unterschiede zwischen der Bedienung einer Website auf dem Desktop und dem Smartphone. Oder haben Sie schon einmal Ihr Smartphone mit der Maus bedient? Den typischen Wisch-Gesten und Fingertippen muss also auch Rechnung getragen werden. Das kann im speziellen bei sehr interaktiven Websites oder Seiten, auf denen es lange Klickstrecken gibt, Auswirkungen haben.

Die Inhalte im Responsive Design

Auch bei der Pflege der Inhalte gibt es Neuerungen. Unter anderem verfügen einige mobile Endgeräte über eine sehr hohe Auflösung (Stichwort "Retina-Display"). Bilder, die auf einem Desktop gut aussehen, wirken dort unscharf und "verpixelt". Daher müssen Bilder in höherer Auflösung eingepflegt und vom Website-Server in unterschiedlichen Auflösungen ausgeliefert werden.

Generell gilt auch, dass man auf eine übersichtliche und korrekte Formatierung des Textes großen Wert legen muss, um das Lesen auf kleinen Bildschirmen zu erleichtern. Und auf Dinge wie fixe Wort-Teilungen für saubere Umbrüche muss man verzichten, da sich die Länge der Zeilen und damit die Position des Umbruchs ständig ändern.