Anzeige
Anzeige
E-Commerce
Artikel merken

5 Beispiele für Responsive Webdesign im E-Commerce

Auch und gerade im E-Commerce 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 Responsive Webdesign. Wir zeigen fünf sehenswerte Beispiele und erklären die Hintergründe. 

Von Jan Tißler
3 Min. Lesezeit
Anzeige
Anzeige

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.

Anzeige
Anzeige

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…

Anzeige
Anzeige

Entscheidende Fragen beim Entwurf des Responsive Webdesign sind dabei:

Anzeige
Anzeige
  • 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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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:

1 von 20

Weiterführende Links

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
10 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Butsch

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
diho

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
Alexander Ringsdorff

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
corian

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
gravik.de

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

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige