Spezialisten gesucht: E. Breuninger GmbH & Co. aus Stuttgart wächst im E-Commerce und unterstreicht technische Kompetenz durch Launch von neuem Webshop für alle Devices (Responsive Webdesign)

Smartphones, Tablets, Notebooks – die Welt der starren Computer ist definitiv vorbei. Mobile Devices sind inzwischen allgegenwärtig. Ob in der Bahn oder im Café, überall blicken Menschen in leuchtende Bildschirme. Diese Beobachtung ist Teil eines aktuellen Phänomens, das sich besonders stark im veränderten Nutzerverhalten im Web ausdrückt. Besonders im Online Shopping Bereich gibt es große Veränderungen, da User überall und zu jeder Zeit Kleidung, Fernseher oder Blumen bestellen. Jedoch scheitert es bei vielen Websites schon am Versuch, diese mit dem mobilen Endgerät zu öffnen. Eine Möglichkeit, den unterschiedlichen Geräteanforderungen gerecht zu werden, ist das sogenannte Responsive Webdesign (RWD). Bei Online-Shops wurde diese Lösungsstrategie jedoch bisher selten umgesetzt.

Um dem mobilen Trend offensiv zu begegnen, hat sich die E. Breuninger GmbH & Co. als eine der ersten großen Online-Shops entschieden, vollständig auf Responsive Webdesign umzustellen. Das Stuttgarter Unternehmen entwickelt sich zu einem echten Multi-Channel Händler und unterstreicht mit technischen Neuerungen die Bedeutung des E-Commerce-Bereichs. Für zukünftige Innovationen und Weiterentwicklungen sucht das wachsende Breuninger E-Commerce Team Spezialisten wie technische Product Manager und Java-Entwickler.

Entwicklung der Devices steigt

Viele Shop-Betreiber begegnen dem wachsenden mobilen Trend mit einem nachträglich aufgesetzten und in der Regel vereinfachten Mobile-Shop, der parallel zum klassischen Desktop-Shop betrieben und entwickelt wird. Einige gehen einen Schritt weiter und entwickeln zusätzlich spezielle Tablet-Shops. Doch die Anzahl unterschiedlicher Geräteklassen wächst rasant. Webbrowser sind inzwischen auf Spiele-Konsolen und Fernsehern angekommen und der nächste Schritt zu Devices in Autos und Haushaltsgeräten ist nicht mehr weit. Eine Anpassung für jedes weitere Endgerät wäre sehr aufwändig und bindet wichtige Ressourcen für den Betrieb und die Weiterentwicklung.

Breuninger entschied sich für einen anderen Weg: Responsive Webdesign. Mit der technischen Umsetzung beauftragte das Mode- und Lifestyle-Unternehmen den eCommerce-Spezialisten neuland – Büro für Informatik aus Bremen.

Mithilfe des Responsive Webdesigns erhalten Online-Shops eine flexible Oberfläche, die sich an alle Bildschirmbreiten anpasst und sowohl mit Finger, Maus oder Stift bedienen lässt. Features werden nicht nachträglich auf unterschiedliche Geräte angepasst, sondern direkt bei der Konzeption für alle Bildschirmgrößen durchdacht. „Mobile First" war auch bei der Entwicklung der einzelnen Funktionen und Seiten des Breuninger Webshops eines der wichtigsten Paradigmen. Dabei werden die Seiten von der kleinsten Größe beginnend entwickelt. Dadurch wird auch sichergestellt, dass keine reduzierte Mobile-Version entsteht, bei der User vergeblich nach Funktionen suchen, die sie vom Desktop kennen.

Nach der erfolgten Konzeptions- und Entwicklungsphase ist die neue Oberfläche für alle Kunden sichtbar. Neben dem modernen, frischen Design sind die auffälligste Veränderung die großen Produktfotos. Diese passen sich der jeweiligen Größe des Gerätes an und nutzen den verfügbaren Platz optimal. Davon profitieren nicht nur die Nutzer von Smartphones und Tablets, auch den Besitzern großer und hochauflösender Displays wird statt eines zentrierten Designs mit ungenutztem Füllraum ein bildschirmfüllender Shop mit großen und knackigen Produktfotos präsentiert.

Von XS bis XXL

Bei komplexeren Elementen wie Produktfiltern, Größenauswahl oder Navigationsbaum war sowohl im Konzept als auch bei der technischen Umsetzung Kreativität gefragt, denn alle Geräte erhielten das gleiche HTML-Markup. Lediglich Styling und Funktionalität unterscheidet sich abhängig von der Breite. Die Hauptnavigation lässt sich auf kleinen Geräten beispielsweise über einen Button von der linken Seite ins Bild fahren, bei größeren Auflösungen kommt eine klassische Flyout-Navigation zum Einsatz. Die Inhalte der Navigation sind identisch, Aussehen und Verhalten jedoch komplett unterschiedlich.

Gerade in der Anfangsphase war die enge Zusammenarbeit von Grafik, Technik und schnellem Prototyping wichtig. Zu dem Zeitpunkt verständigten sich die Teams auch auf eine gemeinsame Sprachregelung, um effektiv kommunizieren zu können: Die Unterscheidung zwischen Smartphone, Tablet und Notebook oder Desktop erwies sich als problematisch, weil sich diese Kategorien nicht mehr klar voneinander trennen lassen. Sowohl der Trend zu großen Smartphones und kleinen Tablets als auch die Vermischung von Tablet und Notebook mit Microsofts Windows 8 Geräten machten diese Klassifizierung eher missverständlich. Stattdessen definierte das Team sechs nach Kleidergrößen benannte Breakpoints von XS (320 px) bis hin zu XXL (1680 px). Darüber lässt sich jedes Gerät in Abhängigkeit seiner Bildschirmbreite einsortieren. Durch diese abstrakte Klassifizierung werden auch zukünftige Geräte wie beispielsweise Google Glases unterstützt. Die „Kleidergrößen“ werden übrigens nicht nur in der Konzeptsprache verwendet, sondern finden sich auch im CSS- und JavaScript-Code wieder.

Responsive Webdesign ist inzwischen auch in Bezug auf die Suchmaschinenoptimierung der von Google empfohlene Weg. Fehleranfällige Geräteerkennung, doppelte Inhalte und Querverlinkungen zwischen Desktop- und Mobil-Version entfallen, da es nur noch eine Seite für alle Geräte gibt.

Messbarer Erfolg

Die neue RWD-Oberfläche wurde über mehrere Wochen langsam für alle Kunden ausgerollt. Durch dieses Verfahren konnten Fehler besonders schnell gefunden und behoben werden. Ein praktischer Nebeneffekt war, dass die beiden unterschiedlichen Shopsysteme (klassisch und responsive) direkt vergleichbar sind.

Nach dem Relaunch verbesserte sich die Conversion-Rate – neben der insgesamt gestiegenen Zahl der Kaufabschlüsse war ein signifikanter Anstieg der Abschlüsse im Bereich Smartphone und Tablets zu beobachten. „‚Mobile‘ ist mittlerweile mehr, als eine spannende Spielerei und der Trend weg vom klassischen Desktop Computer ist deutlich spürbar.

Die Umsetzung eines kompletten Online-Shops in Responsive Webdesign war eine technische interessante Herausforderung“, erklärt Michael Geers, hauptverantwortlicher Entwickler bei neuland für die Umsetzung des Projekts. „RWD führte nach Abschluss schnell zu messbaren Erfolgen in Form der verbesserten Conversion und sehr positivem Kundenfeedback. Daher ist die Investition und das Gesamtprojekt auch aus kaufmännischer Sicht die richtige Entscheidung gewesen“, so Dr. Sven Bernhardt, Director E-Commerce bei Breuninger.