Relaunch des M+S Online-Shops

Nach über fünf Jahren wurde es für M+S Zeit, den Web-Shop grundlegend zu überarbeiten. Die Hauptgründe hierfür waren vor allem die Trends bzw. Neuerungen im Bereich der Gestaltung und Technik. Damit einher gingen dabei natürlich auch Überlegungen von M+S selbst, die u. a. die Überarbeitung der Seitenstruktur, des Aufbaus und der Inhalte sowie der Integration neuer Features betrafen.

Beim Relaunch wurde stark auf die Gestaltungsmerkmale vom Vorgänger-Shop geachtet, dabei wurde aber nicht zwanghaft an veralteten Design-Prinzipien festgehalten. So findet sich im neuen Gestaltungskonzept die Farbcodierung je nach Produktgruppe wieder und auch grafische Details, wie das Riffelblech, wurden übernommen. Dagegen wurden plastische Layout-Elemente, wie die Boxen, Icons oder Einklinker, durch ein modernes Flat-Design ersetzt. Dies bedeutet, dass weitestgehend auf optische „Spielereien“ wie Schatten, abgerundete Ecken, Farbverläufe oder Umrandungen verzichtet wurde. Ergebnis ist ein schlankes Design mit angenehm viel Weißraum, bei dem das Produkt im Mittelpunkt steht.

Natürlich ist auch der Shop komplett im Responsive Design gehalten und somit für die Bedienung auf verschiedenen Endgeräten wie Smartphone oder Tablet bestens angepasst. Schnelle Ergebnisse brachte dabei vor allem die Entwicklung mit dem Boilerplate „Skeleton“, welches mit CSS3 Media Queries arbeitet. Hinsichtlich Benutzerführung und -interaktion auf Mobilgeräten lag der Fokus neben der Optimierung der Artikelseiten vor allem auf dem Anmelde- und Bestellvorgang. Zusätzlich wurde das Nutzererlebnis u. a. durch hoch aufgelöste Grafiken („Retina Ready“) und einer starken Verringerung der Seitenladezeit deutlich verbessert.

Technische Basis bilden im Front-End ein moderner Mix aus HTML5, CSS3 und diversen JavaScript-Funktionen. Viele der optisch ansprechenden Features der Artikelseiten (z. B. https://www.m-u-s.com/Ladegeraete/Batterieladegeraet-INTELLI-3) wie die Lupenfunktion der Produktbilder, die Galerie oder die Navigation mit Tabs/Reitern basieren auf dem JS-Framework jQuery. Darüber hinaus wurde auf den Übersichtsseiten (z. B. https://www.m-u-s.com/ladegeraete.php) und im Download-Bereich mit der JS-Library „Isotope“ eine einfache und durch Animationen angereicherte Filterungsmöglichkeit umgesetzt.

Als Shop- bzw. Content-Management-System kommt wieder unser Haus-CMS „webEdition“ zum Einsatz. Durch den Verzicht auf vorgefertigte Templates oder Plug-ins hatten wir bei der Umsetzung von individuellen Shop-Funktionen alle Freiheiten. So gibt es neben den Seiten für die eigentlichen Shop-Bereiche (z. B. Artikel, Warenkorb, Bestellvorgang, Benutzer-Log-in und -Konto etc.) auch weitere Sonderseiten wie u. a. den Download-, Presse- und FAQ-Bereich, das Lexikon oder die Artikel-Suche. Natürlich dürfen nützliche Funktionen wie die Bewertungsmöglichkeit der Produkte, die Anzeige von verwandten Produkten („Passend dazu …“) oder die Auswahl von mehreren Zahlungsmöglichkeiten nicht fehlen.

Mit dem neuen Shop soll zudem eine starke Verbesserung hinsichtlich Auffindbarkeit in Suchmaschinen erreicht werden. Neben einer Optimierung der Seiten-/Code-Struktur sowie der Ladezeit, sind vor allem die „sprechenden URLs“ der Artikel und die automatisierte Ausgabe von Meta- bzw. Open-Graph-Angaben (z. B. Seitentitel und -Beschreibung aus den Inhalten des Shop-Artikels) wichtige Komponenten hinsichtlich SEO.
So wird der Web-Shop auch in Zukunft von Endkunden noch besser zur Thematik des Online-Kaufs von Batterieladegeräten und Alarmanlagen gefunden.

M+S Solution

Die in Wendelstein bei Nürnberg ansässige M+S Solution GmbH ist der Marktführer im Bereich Batterieladegeräte und Alarmanlagen für Motorräder.
Seit 1981 beschäftigt sich M&S mit der Entwicklung von innovativen Produkten für Motorradfahrer.
Ihre Produkte sind in den Shops und Katalogen führender Motorradzubehörhändler wie Harro, Hein Gericke, Louis und Polo zu finden.