Shopware 5 Serie: Das Responsive Design

„Emotional Shopping on any Device“ ist der Leitsatz, der für das Release von Shopware 5 steht und vielen noch aus dem Film „Shopware-Episode 5“ in guter Erinnerung ist. Dahinter verbirgt sich eines der Hauptfeatures unseres Shopsystems: das Responsive Design. Welches Potenzial dahinter steckt und welche Vorteile Ihr daraus für Euer Business ziehen könnt, erfahrt Ihr in der zweiten Folge unserer Shopware 5 Serie.

Nicht nur schick, sondern auch notwendig

Einer aktuellen Google-Bekanntgabe zufolge hat die Suchmaschine erstmalig mehr Suchanfragen über mobile Geräte, als über stationäre Geräten erhalten. Shopware 5 wurde diesem neuen Nutzerverhalten angepasst und ist die erste Shopware-Version, die im Standard ein komplett konfigurierbares Full Responsive Frontend erhalten hat. Somit werden Shops auf allen Endgeräten perfekt dargestellt und überzeugen durch eine einfache und logische Usability. Dadurch profitieren Shopbetreiber von potenziellen Kunden, die einfach von unterwegs shoppen möchten. Zudem haben sie viele weitere Möglichkeiten, ausgefeilte Multichannel-Konzepte umzusetzen, indem sie die verschiedenen Verkaufskanäle miteinander vernetzen.

Die Möglichkeit, seinen Shop für alle mobilen Endgeräte zu optimieren, ist dabei jedoch nicht nur ein „kosmetisches“ Thema. Vielmehr ist es eine Notwendigkeit geworden, seitdem Google mit der jüngsten Neuerung "Mobilegeddon" Internetseiten, die nicht mobil optimiert sind, abstraft. Deshalb haben wir das Responsive Template nach den neuesten Google-Richtlinien onpage-optimiert. 

"Mobile First“-Ansatz

Im Zuge der Entwicklung von Shopware 5 haben wir uns dem „Mobile First“-Ansatz verschrieben. Ein weiterer Grundsatz lautete „form follows function“. Das heißt, dass wir das komplette Design aus dem Nutzungszweck abgeleitet und auch mit Blick auf die Usability hin optimiert haben. Nun sorgen Off-Canvas-Menüs und für Touch-Gesten optimierte Bedienelemente wie fingerfreundliche Buttons, Galerien mit Pinch-to-Zoom oder Slider mit Momentum Scrolling für die perfekte Nutzerfreundlichkeit im mobilen Shop.

Und die Usability hört natürlich nicht bei den Kunden, die in Deinem Shop einkaufen, auf. Auch Du als Shopbetreiber profitierst von möglichst einfach gehaltenen Prozessen. So musst Du beispielsweise Bilder in Deinem Shop nur einmal hochladen, danach passt sich die Auflösung automatisch dem jeweiligen Endgerät an. Außerdem kannst Du Deine Einkaufswelten sehr genau für diejenigen Geräte einstellen und perfektionieren, auf denen Sie dargestellt werden sollen.

Für Designer und Entwickler

Das Responsive Template von Shopware baut auf modernsten Technologien auf. Die Basis dafür bilden Javascript, HTML5 und CSS3.
Styles können ab jetzt auch im Frontend dynamisch über LESS definiert werden, wobei der eingebaute LESS Compiler das Arbeiten mit dieser Technologie noch einfacher macht. Für das Komprimieren von JavaScript Code kann der integrierte JavaScript Kompressor verwendet werden, wodurch unnötige Requests minimiert werden.

Die Gestaltung des Layouts wurde komplett fluide umgesetzt und passt sich dadurch an die unterschiedlichsten Gerätegrößen an. Die standardisierten Breakpoints werden per „min-width“ definiert und liegen in 480px, 768px, 1024px und 1260px vor, wodurch eine optimale Darstellung sichergestellt werden kann – unabhängig davon, auf welchem Endgerät das Theme angezeigt werden soll. 

Die grafische Darstellung orientiert sich am Flat-Design, jedoch sind die Call-to-Action-Buttons sowie Eingabefelder durch leichte Materialität gekennzeichnet und dadurch hervorgehoben.

Das Full Responsive Theme lässt sich über einen Konfigurationsdialog schnell in allen wesentlichen Eigenschaften verändern. Für erweiterte Anpassungen stehen vorgefertigte LESS-Variablen zur Verfügung. Neben dem Responsive-Theme steht auch ein Bare-Theme bereit, welches als Roh-Basis mit der reinen HTML Struktur für sehr umfangreiche Template Anpassungen genutzt werden kann.

Fazit

Das neue Responsive Design von Shopware 5 sieht nicht nur schick aus, sondern hält darüber hinaus für Händler, Designer und Entwickler viele Vorzüge bereit:

  • Höhere Conversion und perfekte Usability auf allen Endgeräten
  • Neue, inspirierende Einkaufswelten zur Stärkung der Markenidentität
  • Enorm verbesserte Sichtbarkeit für Suchmaschinen (SEO)
  • Schnelle und einfache Anpassbarkeit
  • Moderne und zukunftsorientierte Technologie-Basis
  • Vorgefertigte LESS-Variablen für erweiterte Anpassungen

Bisher in der Shopware 5 - Serie erschienen:

Entdecke das neue Storytelling

Entdeckt auch unsere kostenlosen Shopware 5 Broschüren:

Hier geht´s zur Download-Übersicht

 

comments powered by Disqus