Mobile Marketing

Responsive Design – Alles was du wissen musst

Was ist Responsive Design? Was gehört dazu? Welche Vor- und Nachteile bringt eine responsive Website? Wir sagen es euch.

responsive_design

Bild: WhoIsHostingThis?

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.

screens_responsive

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.

mobile_use

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.

mobile_commerce

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?:

responsive_design_elements

  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):

bestpractise_responsive_design

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:

    mobile_search_responsive

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

Falls Mobile Website vorhanden:

  • Statt zwei verschiedenen Websites für Mobile und Desktop muss nur noch eine betreut werden. Das bedeutet auch, dass keine zwei Versionen, etwa eines Stylesheets, nötig sind und der Design-Aufwand bei Updates und Redesigns schwindet.

  • Google und andere Suchmaschinen crawlen und bewerten nur eine Website. Hier fallen auch verschiedene Problemquellen wie eventuell als Duplicate Content gewertete Inhalte weg.

  • Alle Links führen zu einem Auftritt.

Hier einige Nachteile:

  • Eine komplette Umgestaltung der Website kann enorme Kosten verursachen und viel Zeit in Anspruch nehmen.

  • Die Anpassung auf mobil gefragte Keywords für die Mobile Website wird umständlich.

  • Die Ladezeiten steigen, da auf jedem Gerät alle Bildelemente geladen werden müssen. Schon geringe Veränderungen in den Aufrufzeiten einer Website können katastrophale Auswirkungen haben

  • User die von einem Tablet oder Smartphone zugreifen, stellen andere Ansprüche an eine Website oder einen Shop als Desktop-User. Auf zwei parallelen Auftritten können Betreiber besser auf diese Unterschiede reagieren.

Fazit

Website- und Shopbetreiber sollten sich der Bedeutung des Mobile Boom bewusst werden, die Vor- und Nachteile genau abwägen und zeitnah reagieren. Bei der Entscheidungsfindung kann es helfen, zuerst die Möglichkeiten des eigenen Teams und des Budgets auszuloten. Und das Wichtigste: Brauche ich eine responsive Website? Nutzt meine Zielgruppe überhaupt mobile Geräte?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.