Responsive Design

November 2014


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 bisher meist 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 S5 geöffnet wird – das Layout sowie die Inhalte werden optimal dargestellt. 


Responsive Design by CSS
Responsive Design ist wohl die bessere Lösung.... | Foto: Sven Schweiger

Ein Beispiel zur Ansicht

Unsere eigene Website haben wir in Responsive Design umgesetzt. Sehen Sie sich die Website in der mobilen Vorschau. Sie können dabei beobachten, wie sie sich für ein Smartphone oder Tablet verändert: Zur mobilen Ansicht (bitte in den Browsern Chrome, Firefox oder Safari öffnen!).
 

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 BenutzerInnenfreundlichkeit (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).

Hotel-App RoomMint in Responsive Design
Die Hotel-App RoomMint haben wir in Responsive Design umgesetzt.

Mehr dazu:
Artikel "Mobile first: Vier Fakten über das große Google-Update" (absatzwirtschaft.de, 13. April 2015)
Google: "SEO für Mobilgeräte"
Artikel „Warum responsive Webdesign gut für SEO ist“ (digitale-offensive.de, 16. März 2013)
Artikel "Could Mobile Responsive Website Design Hurt Your SEO?" (coppyblogger.com, Mai 2013)
 

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 GrafikerInnen 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).

Website in Responsive Design

Die responsive Website für unser Unternehmen S4: Elemente verschieben sich auf dem Smartphone nach unten und das Menü ändert sich.


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.

Mehr dazu:
Artikel "25 Beautiful Responsive Web Design Examples for Inspiration"
Artikel "Responsive Typography: A Roundup of the Best Articles and Tutorials"

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.

Mehr dazu:
Artikel "Mobile Responsive Design: The Flexible Grid"

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.

Mehr dazu:
Thema "Inhalte mobilfähig machen" im Artikel "Responsive Relaunch Leitfaden"
 

Fragen Sie uns

Responsive Design ist für uns nicht nur ein netter neuer Trend, sondern 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!

Noch nicht genug? Weitere Infos!

Ein weiterer, schöner Überblick über das Thema auf computerwoche.de
Artikel "85 Top Responsive Web Design Tools" auf Mashable
Der Artikel mit dem 2009 alles (bzw. Responsive Design) begann
Anschaulich: Unterschied zwischen Adaptive, Responsive, Static and Liquid Websites
Übersicht über die Vor- und Nachteile von Responsive-Design-Strategien
 
Sie planen ein Projekt in Responsive Design? Als Software-Firma haben wir schon einige Erfahrung damit und werden Sie ausführlich und ehrlich beraten. Falls Sie sich danach für uns entscheiden, übernehmen wir gerne die Konzeptionierung und Umsetzung Ihres Projektes. Kontaktieren Sie uns!