Responsive Design am Beispiel von Paul-Mitchell

Neugestaltung der mobilen Webseite

Mit ihrer neuen Website setzt die Wild Beauty AG künftig ganz auf die mobile Karte. Beim Relaunch der Website wurde nicht nur auf ein übersichtliches Webdesign geachtet, sondern auch auf die durchgängige Gestaltung mit Responsive Webdesign, um Zugriffe von allen mobilen Endgeräten zu ermöglichen. Dies soll sich auf die Nutzerzufriedenheit ebenso positiv auswirken wie auf den Umsatz.

  • Paul Mitchell Collection 2013

  • Für Noah Wild, Geschäftsführer der Wild Beauty AG, haben native Apps den Nachteil, dass sie immer speziell für Geräte oder Betriebssysteme entwickelt werden: „Kommt beispielsweise eine neue Android-Version auf den Markt, muss eine neue App her oder die bestehende angepasst werden. Hier entstehen unter Umständen immense Folgekosten.“

Beim Aufruf der Website von Paul Mitchell, einer Marke der Wild Beauty AG, auf dem Desktop-PC, fällt zuerst das großformatige Foto auf, das passend zu den Teaser-Themen im mittleren Bereich der Seite wechselt. Wird die Seite hingegen mit dem Smartphone genutzt, fehlt dieses Bild. Anstelle des gewohnten Marken-Designs, das auf große Bildwelten und Personen setzt, tritt eine übersichtliche Gestaltung, die den Nutzer ohne unnötige Dekoration anspricht. Denn gerade große Fotos und komplizierte Designelemente verlangsamen die Ladezeiten der Seiten enorm. Daher verzichtete der Internet-Dienstleister Nidag, der dieses Projekt umsetzte, bei der mobilen Ansicht auf überflüssige Details und zeigt nur die relevanten Inhalte an, um die mobile Nutzung so schnell wie möglich zu gestalten.

Weniger Kaufabbrüche


Dies ist für Unternehmen aus gutem Grund wichtig: Ein mangelhafter, langsamer mobiler Auftritt führt häufig zu Kaufabbrüchen: Aktuelle Zahlen belegen, dass nur zehn Prozent der mobilen User den Kaufprozess zuendeführen. Im Onlineshop auf der Website hingegen sind es 20 Prozent.

Bei der Neugestaltung der Website mussten für die mobile Nutzung folglich die essentiellen Informationen und Elemente herausgearbeitet werden. „Bei unserer Seite haben wir beispielsweise den Login-Bereich auf den kleinsten Geräten vollständig ausgeblendet, weil dessen Nutzung damit kaum praktikabel ist“, sagt Noah Wild, Geschäftsführer der Wild Beauty AG, die für den Vertrieb der Marke Paul Mitchell verantwortlich zeichnet. „Die Nutzer sind ausschließlich Stylisten, die ihre Bestellungen über die Website tätigen sowie ihren Warenbestand und Salondaten verwalten. Kaum jemand wird dies über sein Smartphone erledigen. Indem wir diese Funktion weglassen, gewinnen wir Platz und Übersichtlichkeit.“

Das oben auf der Website platzierte Menü und die Suchfunktion werden in der mobilen Variante erst über ein übersichtliches Drop-down-Menü bzw. ein Lupensymbol eingeblendet. Erst darunter erscheinen dann die Felder mit dem Teaser und weiteren News. Auch der Produktfinder, der auf der Website mit einigen ausgefallenen Filterfunktionen daherkommt, wurde für die mobile Nutzung verschlankt. Hier wählt der Nutzer die gewünschte Kategorie direkt per Touchfeld an und gelangt so zu den entsprechenden Produkten. Der Salonfinder, der auf der Website die Ergebnisse automatisch mit einer Kartenansicht ausgibt, beschränkt sich bei der mobilen Nutzung auf eine Ergebnisliste. Die Karte kann vom Nutzer optional eingeblendet werden.

Flexible HTML-Struktur

Grundlage für ein funktionierendes Responsive Webdesign ist eine flexible HTML-Struktur und Browser, die CSS3 bzw. Mediaqueries unterstützen. Beides ist in den aktuellen Versionen der verschiedenen Browser mittlerweile Standard. Bei älteren Versionen lassen sich die benötigten Eigenschaften mit Javascript simulieren. Damit sich die Inhalte selbstständig und flexibel an die Displays anpassen können, müssen Bilder und Schriften skalierbar, das heißt in Prozentwerten, angelegt sein. Bilder sollten zudem kleingerechnet werden, um kurze Ladezeiten zu erzielen.

„Bei diesem Projekt haben wir uns in Absprache mit unserem Dienstleister auf das Content-Management-System Typo 3 festgelegt, das mit einer PHP-Schnittstelle von Zend Framework an die Website angebunden ist“, erklärt Wild. Über die Schnittstelle, die eigens für Wild Beauty erstellt wurde, ist beispielsweise das interne Warenwirtschaftssystem Comarch ERP Enterprise an den Webauftritt angebunden. Die gängigen Technologien Javascript, CSS und HTML 5 sorgen auch bei diesem Projekt dafür, dass die Seite auf möglichst allen mobilen Endgeräten fehlerfrei funktioniert. Diese Kombination sorgt für eine möglichst störungsfreie Performance der mobilen Website. Hierbei werden Animationen zum Teil mit CSS ausgeführt, da Javascript-Animationen rechenintensiver sind und auf weniger leistungsfähigen Geräten zu Performance-Problemen führen. Während Javascript eine eigene Anwendung benötigt, läuft CSS direkt im Browser und wird somit schneller ausgeführt.

Die Abfrage der unterschiedlichen Displaygrößen geschieht über CSS mittels der sogenannten Mediaqueries und macht schließlich das Responsive Design möglich, indem sie unterschiedliche CSS-Inhalte in Abhängigkeit von zuvor definierten Eigenschaften laden: Damit können unter anderem verschiedene Displaygrößen der Endgeräte abgefragt und mit einem Befehl verknüpft werden, beispielsweise „Wenn Displaybreite kleiner als 1.440 Pixel, dann zeige Layout-Variante A.“ Weitere Displayeigenschaften, die in dieser Form abgefragt werden können, sind Auflösung, Ausrichtung, Farbe und Displayart. So wird auf jedem Gerät die passende Version der Seite ausgegeben.

Alternative: Native App

Alternativ zu einer echten mobilen Website in Responsive Design können verschiedene Anwendungen auch über native Apps ausgeführt werden. Während eine mobile Webseite über den Browser aufgerufen wird, greifen native Apps direkt auf die Hardware des Gerätes zu. Diese Lösung spart einen Zwischenschritt und hat deswegen Performance Vorteile, die sich beispielsweise bei Online-Spielen bemerkbar machen, weil das Skalieren und Sliden etwas flüssiger funktioniert als direkt auf der Webseite. Für die Paul-Mitchell-Website kam diese Lösung allerdings nicht infrage, denn „Sie hat den großen Nachteil, dass eine native App immer nur speziell für ein einziges Gerät entwickelt wird. Kommt beispielsweise eine neue Android-Version auf den Markt, muss eine neue App her oder die bestehende angepasst werden. Hier entstehen unter Umständen immense Folgekosten“, erklärt Wild.

Mit der jetzigen Lösung zeigt sich das Unternehmen Wild Beauty sehr zufrieden: „Die Seite ist seit wenigen Wochen online und wir haben bereits ein sehr positives Feedback der Nutzer bekommen. Auch intern ist die Verbesserung spürbar: Fragen und Probleme, die vor dem Relaunch häufig bei uns eingingen, sind mit dem Going-live der neuen Seite deutlich zurückgegangen“, resümiert Wild.

www.paul-mitchell.de

 

Über Paul Mitchell...
Paul Mitchell zählt heute zu den bekanntesten Marken der Welt und der jährliche Umsatz der John Paul Mitchell Systems Salonpartner nähert sich der 900 Mio. US$-Marke. Alle Haar- und Hautpflegeprodukte werden innerhalb der USA produziert und in ca. 90.000 Salons und Schulen vertrieben. International arbeitet John Paul Mitchell Systems mit Distributeuren in über 75 Ländern zusammen.

Bildquelle: © Wild Beauty AG

©2019Alle Rechte bei MEDIENHAUS Verlag GmbH

Unsere Website verwendet Cookies, um Ihnen den bestmöglichen Service zu bieten. Durch die weitere Nutzung der Seite stimmen Sie der Verwendung zu. Weitere Infos finden Sie in unserer Datenschutzerklärung.

ok