Responsive Design – Alles was du wissen musst

Schon wieder ein Artikel zu Responsive Design? Das Thema schlägt in der Branche immer höhere Wellen und so erscheinen gefühlt jeden Tag dutzende Artikel und gleich mehrere Infografiken, die es von allen Seiten beleuchten und mit Daten und Gründen für und wider um sich werfen. Wir verschaffen euch hier einen Überblick:

Was ist Responsive Design?

Responsive Design steht für ein Website-Design, das sich dem Gerät anpasst, auf dem die Seite dargestellt wird. Dieselbe Website mit einheitlichem Content wird auf unterschiedlichen Geräten mit variierenden Bildschirmgrößen und besonderen technischen Eigenheiten unterschiedlich dargestellt, um die Darstellung für so viele Besucher wie möglich angenehm zu gestalten. Lästiges Zoomen und unfreiwillige Klicks etwa verschlechtern die User Experience.

232 verschiedene Bildschirmauflösungen

Dabei reicht die Anpassung an eine oder wenige einheitliche Bildschirmauflösungen einfach nicht mehr aus. Heute greifen die Nutzer in etwa 232 verschiedenen Auflösungen auf Websites zu. 2010 waren es noch 97. Mit dem Aufkommen zahlreicher weiterer Anbieter mobiler Geräte dürften es in den kommenden Jahren noch deutlich mehr werden.

Mobile Commerce und Usability

Vor allem für den E-Commerce stellt die Usability ein enorm wichtiger Faktor dar, der sich maßgeblich auf die Conversions auswirken kann.

Immer mehr Menschen kaufen über Smartphones und Tablets. Laut monetate fließt bereits heute 21% des Traffics der führenden E-Commerce-Websites über mobile Geräte. Seiten- und Shopbetreiber sollten auf diese Entwicklung reagieren und eine für alle (potentiellen) Kunden zufriedenstellende Lösung finden.

Wenn der Trend zu Mobile wie aktuell fortschreitet, könnten in den kommenden Jahren rund 25% aller E-Commerce-Bestellungen über mobile Geräte stattfinden, so invesp. Diese Daten sprechen für die Smartphone-Begeisterten USA, können aber den Weg für zeitnahe Entwicklungen in Europa weisen.

Was gehört zu einem Responsive Design?

Technische Aspekte

Zur Gestaltung gehören laut Mind Development and Design vorrangig HTML5, das Content-spezifische Elemente und das Canvas unterstützt sowie CSS3 als neuesten Stylesheet-Standard, der durch Media Queries die Anpassung erlaubt, ohne den Content selbst zu verändern. Beide Standards arbeiten darauf hin, Flash zu ersetzen, das bekanntlich auf vielen Geräten für Probleme sorgt.

Elemente einer responsiven Website

Die Elemente, die ein Responsive Design ausmachen, sind WhoIsHostingThis?:

1. Eine anpassungsfähige Rasterung: Die Größe der einzelnen Elemente einer Website, etwa der Header, Seitenleisten und der Content-Bereich sollten relativ in Prozenten angegeben werden, um eine fehlerfreie Anpassung zu gewährleisten.

2. Flexible Bilder: Fotos und Bilder sind ebenso relativ zu definieren, um zu verhindern, dass sie über Grenzen des Website-Bereichs hinaus dargestellt werden, der sie beinhaltet.

3. Media Queries: Die mit CSS3 eingeführten Media Queries wenden Regelsätze je nach Größe des darstellenden Browsers auf die betroffenen Elemente an.

Die zugehörige Infografik nennt zudem 5 Design-Elemente einer responsiven E-Commerce-Seite als Paradebeispiele, die eine optimale Usability gewährleisten (aktives Bild):

Warum Responsive Design?

Hier einige Vorteile:

• Mobile-freundliche Websites werden vom Kunden besser angenommen und bewertet, was dank der steigenden Anzahl der Mobile-Shopper zu mehr Traffic und vor allem Konversionen führen kann.

• Eine mobil korrekt dargestellte Website kann auch mehr Offline-Umsatz bedeuten, da ein Drittel aller Suchanfragen lokale Themen umfassen und 59% aller User nach einer Suche auf ihrem mobilen Gerät ein nahes Geschäft aufsuchen:

  

• Responsive Design ist zukunftssicher und anpassbar an neue technische Entwicklungen wie der Google Glass oder Apples iWatch.

Falls Mobile Website vorhanden: