Responsive Design
Wie schaffe ich es, dass meine Website auf Smartphone, Tablet und Desktop optimal dargestellt wird? Die Antwort: Responsive Design.
Ein Leben ohne Smartphone und Tablets? Nicht denkbar! Für Betreiber von Websites sind sie eine Herausforderung – wie garantiere ich, dass meine 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
Unsere eigene Website haben wir in Responsive Design umgesetzt. Das merken Sie daran, dass sie sich mitverändert, wenn Sie das Fenster Ihres Browsers kleiner oder größer machen - probieren Sie es mal aus!
Die Vorteile von Responsive Design
- Eine einzige Website muss umgesetzt werden. Die Entwicklung einer eigenen mobilen Website ist schon länger 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 BesucherInnen eine optimale Benutzer*innenfreundlichkeit (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 neu und anders
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.
Kosten
Die große Frage zuerst: Was kostet es? Die Kosten für eine Website im Responsive Design sind 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.
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 dem Leseverhalten auf dem jeweiligen Gerät Rechnung zu tragen. 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
Da es auch im Bereich der technischen Umsetzung einige Neuerungen gibt, sind SoftwareentwicklerInnen 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.
Inhalte
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.
Fragen Sie uns
Wir haben schon einiges an Erfahrung in der Umsetzung von responsive Websites gesammelt und helfen Ihnen gerne bei der Konzeptionierung und Umsetzung Ihres Projektes. Kontaktieren Sie uns!