Zum Inhalt springen

Responsive Design

Wie schaffe ich es, dass meine Website auf Smartphone, Tablet und Desktop optimal dargestellt wird? Die Antwort: Responsive Design.

Letzte Änderung: Oktober 2020


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 war oft eine eigene mobile Website. Eine Alternative dazu ist Responsive Design: Statt neben der Website noch weitere Lösungen zu entwickeln, passt sich die Website einfach dem jeweiligen Endgerät an. Egal ob sie mit einem Browser auf dem iPad oder einem Samsung Galaxy S10 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

  • Nur mehr eine einzige Website muss umgesetzt werden. Die Entwicklung einer eigenen mobilen Website ist 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 – das Schlachtross unter den Such- und Marketingmaschinen im Netz – 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. Im Gegenzug dazu sind aber keine weiteren mobilen Seiten nötig.

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.

Anders sieht es bei einer bestehenden Seite aus, deren Layout nur für den Desktop entwickelt wurde – die Umstellung ist schwierig und manchmal sogar unmöglich. Gut durchdacht werden muß auch die Umsetzung großer Portale und Websites mit komplizierten Strukturen. Die Komplexität lässt sich auf kleinen Geräten schwer darstellen und es kann zu Schwierigkeiten beim Laden größerer Datenmengen kommen.

Design

Das Layout einer Website für verschiedene mobile Endgeräte stellt Grafiker*innen 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. Begonnen wird oft mit dem Layout-Entwurf für den kleinsten Bildschirm, dem Smartphone, da der kleine Screen zur Konzentration auf das Wesentliche bei Form und Inhalt zwingt. Danach fügt man Schritt für Schritt weitere Elemente dazu und arbeitet sich an die große Desktop-Version heran. 

Technologie

Da es auch im Bereich der technischen Umsetzung einige Neuerungen gibt, sind SoftwareentwicklerInnen mit Erfahrung ein Plus. Die Basis für Responsive Design sind CSS3 und HTML5. 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.

Wichtig ist es auch, zu wissen, welche verwendeten Technologien mit allen Endgeräten kompatibel sind – Flash wird zum Beispiel von iPhones und iPads nicht unterstützt. Man muss sich auch bewusst sein, dass Responsive Design nur in aktuellen Browsern funktioniert und ältere Versionen nichts mit dieser Technologie  anfangen können. Die älteren Browser erkennen die Media Queries nicht und zeigen immer die Desktop-Version der Website.

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

Responsive Design ist für uns eine logische Entwicklung in einer immer mobileren Web-Welt. Vieles spricht für Responsive Design – ob es auch für Ihr Projekt das Richtige ist, klären wir gerne mit Ihnen gemeinsam.

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!