Webdesign

M-Commerce und Responsive Design – teste deine Seite
Kommentare

Der Begriff Responsive Design wird derzeit inflationär verwendet und sogar als großer Webdesign-Trend gehandelt. Teste doch einfach, wie deine Seite auf verschiedenen mobilen Geräten aussieht.

Warum Mobile optimierte Webseiten?

Rund 15 Millionen Deutsche erledigten 2014 ihren Einkauf im Internet – immer mehr User bestellen Waren über Tablets oder Smartphones. Webshops sollten also unbedingt mobile-optimiert sein.

Siehe auch: Usability im Online-Shop – 5 Tipps zur Optimierung von mobile Shopping

Recherche am Tablet

Einer E-Commerce-Studie zufolge sind Sonntag und die Montag die Hauptrecherchetage, wenn es um den Kauf neuer Waren im Internet geht. Am Sonntag sitzen überproportional viele Menschen mit dem Tablet auf der Couch. Gekauft wird ein Paar Tage später – ebenfalls überwiegend über mobile Endgeräte.

M-Commerce-Umsatz steigt

Von jedem online ausgegebenen Euro kommen in diesem Jahr 28 Cent von mobilen Endgeräten – 2013 waren es gerade mal 7 Cent. Der M-Commerce-Umsatz hat sich 2014 auf 3,4 Milliarden Euro verfünffacht. 2,2 Milliarden Euro kommen von Smartphones und 1,2 Milliarden Euro über Tablets.

Conversion-Rate – Tablets vorne

Obwohl noch der Großteil der User (75 Prozent) über den Desktop-Rechner online-shoppen, haben einzelne Branchen beim Mobile-Commerce die Nase vorn. So ist die Conversion Rate bei Nutzern, die mit dem Tablet auf digitale Einkaufstour gehen, am höchsten.

Responsive Design

Die Vorteile von Responsive Design sind klar: Die Webseite passt sich an die jeweilige Größe des mobilen Endgerätes, den sogenannten Viewport, an. Design sowie Look and Feel bleiben erhalten und ein Besucher, der die Desktop-Variante kennt, muss sich auf der geschrumpften Version nicht neu orientieren.

Responsive – reaktionsfähig

Durch die adaptive Anpassung der Bildschirmdarstellung werden die Elemente auf der Webseite lediglich anders angeordnet. So wird zum Beispiel aus einem dreispaltigen Layout auf dem Desktop, auf einem Smartphone nur eine Zeile. Das Layout „reagiert“ auf die jeweiligen Ausmaße des Displays und passt sich an.

Responsive Layout vs. Adaptive Layout

Zwei Begriffe, die immer wieder miteinander verwechselt werden, sind Responsive Layout und Adaptive Layout. Im Grunde erfüllen beide Layouts den selben Zweck: Sie passen das Design einer Webseite an kleiner Displays an.

Der größte Unterschied ist, dass beim Responsive Layout die perfekte Darstellung des Contents auf allen Geräten im Vordergrund steht. Responsive Design eignet sich also für alle Viewports. Im Gegensatz dazu konzentriert sich das Adaptive Layout auf einen bestimmten Viewport und bereitet den Content nur für ein bzw. wenige mobile Endgeräte auf.

Viewport Resizer

Wie wirkt die Webseite auf verschiedenen Geräten? Angesichts der oben genannten Zahlen und Fakten, solltet ihr eure Website einem mobile-Test unterziehen. Aber die Displays von Smartphones und Tablets werden immer unterschiedlicher und natürlich habt ihr nicht alle Geräte zur Hand.

Teste deine Webseite

Abhilfe verschafft hier der Viewport Resizer, der direkt im Browser verschiedene Darstellungsmöglichkeiten, ob im Hoch- oder Querformat, mit einem einzigen Klick anzeigt. Das Browser Bookmarklet Viewport Resizer wird in der Lesezeichenleiste abgespeichert.

Den Viewport-Resizer findet ihr hier.

responsive desogn

Screenshot: lab.maltewassermann.com/viewport-resizer/

 

 

Aufmacherbild: Responsive web design and web development vector illustration. Flat office desk style icons and computer accessories. Good for blog, website, print, template, brochure, flyer or any business media. via Shutterstock / Urheberrecht: MPFphotography

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -