Vorheriger Artikel Nächster Artikel

5 Beispiele für Responsive Webdesign im E-Commerce

Auch und gerade im gibt es gute Gründe, beim Design auf eine Lösung zu setzen, die sich flexibel an das Display des Nutzers anpasst – bekannt unter dem Schlagwort . Wir zeigen fünf sehenswerte Beispiele und erklären die Hintergründe. 

5 Beispiele für Responsive Webdesign im E-Commerce

Hintergrund: Responsive Webdesign im E-Commerce

Damit eine E-Commerce-Website erfolgreich ist, muss man die Nutzer umsorgen und begleiten, ihnen den roten Teppich ausrollen und zusehen, dass sie nirgends in Stolpern geraten. Jede Hürde, jede Unklarheit, jedes Missverständnis kostet Umsatz. Und das bedeutet heutezutage auch: darauf eingestellt sein, dass Nutzer mit einem Tablet oder einem Smartphone die eigene Seite besuchen. Dazu müssen sie gar nicht unterwegs sein, denn Mobilgeräte werden ebenfalls in den heimischen vier Wänden genutzt – einfach weil man sie schneller zur Hand hat oder vielleicht nach Feierabend nichts (mehr) mit einem PC zu tun haben will.

Moderne Mobilbrowser können dabei in der Regel so ziemlich alles (außer Flash), nur sollte das den Websitebetreiber nicht dazu verleiten, deshalb allen Nutzern dasselbe Design anzubieten. Inhalte erst heranzoomen zu müssen ist umständlich. Winzige Menüpunkte lassen sich vielleicht noch mit dem Mauszeiger treffen, aber nicht unbedingt mit dem Finger. Und was auf einem großen Display schön aussieht, ist auf einem Tablet oder Smartphone vielleicht zu kleinteilig und unübersichtlich.

Responsive Webdesign verfolgt dabei den Ansatz, auf jeder Plattform dieselbe Website in einem anderen Outfit zu präsentieren. Das Ziel: Es soll schön aussehen und sich leicht bedienen lassen. Vielfach sieht man dazu ein Version für Smartphones, eine für Tablets und dann mindestens eine für den PC-Bildschirm. Gelegentlich gibt es für den PC zwei Varianten, denn die Seite soll schließlich sowohl auf einem 13-Zoll-Laptop perfekt passen als auch am 30-Zoll-Desktop-Monitor nicht plötzlich ein verlorener Streifen in der Weite sein...

Entscheidende Fragen beim Entwurf des Responsive Webdesign sind dabei:

  • Wie wird die Navigation umgesetzt und wo wird sie platziert?
  • Welche Inhalte werden gezeigt und wie sind sie angeordnet?
  • Welche Funktionen sind auf welcher Plattform wichtig?

Die folgenden fünf Beispiele geben dazu ein paar Eindrücke. Wer mit Responsive Webdesign nicht so vertraut ist: Den Effekt kann man am PC sehen, wenn man das Browserfenster verkleinert. Sobald ein bestimmter Wert unterschritten wird, wechselt das Layout. Die Screenshots der Beispiele sind mit Am I Responsive? entstanden.

Skinny Ties

responsive-webdesign-skinny-ties

Skinny Ties verändert die Seite nur in Details, wenn der Platz geringer wird. Namentlich schrumpft die Navigation und ändert schließlich den Platz. Eher ungewöhnlich: Es gibt zwei Logovarianten. Der Einkaufswagen und die Suche bleiben immer erhalten, sie sind in der Smartphone-Version aber auf Symbole reduziert.

Kershaw

responsive-webdesign-kershaw

Kershaw hat im Prinzip zwei Varianten: eine für Desktop, Laptop und Tablet, bei der sich die Größe der Bilder und die Abstände in der Navigation oben anpassen. Eine zweite für Smartphones, bei der aus den zwei Spalten eine wird und die Navigation über einen Menüpunkt oben links hervorgeholt wird, wie es die Nutzer von vielen Apps bereits kennen dürften. Der sehr wichtige Einkaufswagen bleibt stets oben rechts erhalten.

Eastworks

responsive-webdesign-eastworks

Der Shop von Eastworks ist auf jedem Display schön anzusehen. Hier werden die Produkte wie in einer Schaufensterauslage präsentiert. Steht viel Platz zur Verfügung, sind die Bilder größer und bis zu drei Spalten stehen für die Produktabbildungen zur Verfügung. Wird der Platz knapper, schrumpfen erst die Bilder, dann reduziert sich die Zahl der Spalten bis hinunter zur Smartphone-Variante. Die Schrift ist je nach Display aber teilweise zu klein geraten.

Burton

responsive-webdesign-burton

Burton schafft es, die Optik und Atmosphäre seiner Produkt- und Markenwelt auf alle Displays zu übertragen. Wobei die Seite nach meinem Geschmack auf Mobilgeräten am besten aussieht. Auf größeren Bildschirmen wird der Platz nicht immer konsequent genutzt. Dafür reduziert sich die Seite aber auch auf dem Smartphone nicht zu einem öden langen Streifen.

Currys

responsive-webdesign-currys

Die Website von Currys ist nicht gerade die ansehnlichste, aber sie ist aus einem andern Grund interessant: Sie zeigt, wie man mit einem sehr umfangreichen Angebot umgehen kann. Die Seite hat vier Varianten: Smartphone, Tablet, Laptop und Desktop. Die beiden Touchvarianten präsentieren sich dabei grundlegend anders und stellen die Navigation mit großen Buttons in den Vordergrund. Die Tablet-Version ist dabei zweispaltig mit Navigation links, die Smartphone-Version einspaltig. Man sieht das recht gut auf einer Kategorie-Unterseite wie dieser.

Weitere Beispiele für Responsive Webdesign im E-Commerce findet Ihr in unserer Bildergalerie:

Weiterführende Links

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von Butsch am 23.04.2013 (09:51 Uhr)

    Der Vollständigkeit halber sollte man noch erwähnen, dass die Aussage: "Welche Inhalte werden gezeigt " leichter gesagt als getan ist.

    Tatsächlich ist responsive Webdesign mehr als nur das Größer- oder Kleinerwerden des Layouts. Es setzt spezifische Anforderungen an die Verwaltung des Content. Dazu hat sich die US-Autorin Ann Rockley in ihrem sehr lesenswerten Buch "Managing Enterprise Content" viele Gedanken aus der Sicht einer Content Strategie gemacht:

    http://www.content-driven-ecommerce.de/managing-enterprise-content-oder-responsive-webdesign-mal-anders/

    Antworten Teilen
  2. von diho am 23.04.2013 (16:48 Uhr)

    Das fünfte Beispiel von Currys ist nicht wirklich "responsive" umgesetzt. Hier wurde ein adaptives Layout zugrundegelegt, welches den Viewport entsprechend anpasst und im Layout den linken sowie rechten Rand mit Weisraum füllt.
    Ansonsten sind die übrigen Layouts schick anzusehen.

    Antworten Teilen
  3. von Alexander Ringsdorff am 08.05.2013 (18:39 Uhr)

    Leider lösen aber auch responsive design Lösungen nicht immer alle Probleme von Onlineshops bei mobilen Besuchern und es ist in der Regel sehr teuer eine Agentur damit zu beauftragen.

    Hier ein paar Punkte die nicht ideal sind bei responsive für Shops: Hohe Kosten, langsame Ladezeiten, kein App-Feeling, keine Gestensteuerung, wenig Unterscheidungsmöglichkeit zwischen Tablet & Smartphone, viel Scrollen, hoher Testaufwand, zu große Bilder für mobile.
    Dazu hier auch ein guter Artikel: http://econsultancy.com/de/blog/61870-seven-potential-downsides-from-using-responsive-design

    Wenn das Budget nicht ausreicht für eine individuelle responsive design Lösung und Web-App Technologie gewollt ist, kann ich unser Angebot bei http://www.couchcommerce.com empfehlen. Das gibt es dann schon ab 19€ im Monat und man ist bestens optimiert für alle relevanten Smartphones und Tablets.

    Antworten Teilen
  4. von corian am 14.05.2013 (02:28 Uhr)

    Es ist schon eine sehr große Herausforderung an den Entwickler alle seiten optimal zugestallten. Meiner Meinung nach ist es schon fast ein muss jede Seite in responsives zugestallten, die Anzahl der Benutzer die mit mobilen Endgeräten unterwegs sind steigt und steigt. Hier meine Seite die sich momentan noch im Aufbau befindet. http://www.imagooo.de

    Antworten Teilen
  5. von gravik am 27.02.2014 (16:01 Uhr)

    Die Kershaw ist schon sehr gut in Sachen E-commerce und Responsive Design.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
E-Commerce-Recht: Die wichtigsten Urteile und Entscheidungen im September
E-Commerce-Recht: Die wichtigsten Urteile und Entscheidungen im September

E-Commerce-Recht im September: „Kaufen“ soll als Button-Bezeichnung unzulässig sein, neue Regeln beim Staubsaugerverkauf, Richtige Angabe von Lieferzeiten und neue Auflage des kostenlosen eBooks … » weiterlesen

Sofa.io: Diese E-Commerce-SDK ist Open Source und hat eine eingebaute Mobile-First-Strategie
Sofa.io: Diese E-Commerce-SDK ist Open Source und hat eine eingebaute Mobile-First-Strategie

Der M-Commerce-Anbieter CouchCommerce macht seine Technologie offen zugänglich. Mit dem Sofa-SDK kann jetzt jeder Entwickler E-Commerce-Web-Apps entwickeln: Front-Ends mit einer ausgeprägten … » weiterlesen

Neue Releases: Magento Community-Edition 1.9 und Enterprise-Edition 1.14 in der Übersicht
Neue Releases: Magento Community-Edition 1.9 und Enterprise-Edition 1.14 in der Übersicht

Die E-Commerce-Plattform Magento liegt nun in der neuesten Version vor. Die wichtigsten Änderungen sind unter anderem ein neues Standard-Theme im Responsive-Design und Verbesserungen im … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen