Responsive WebdesignMobile E-Commerce kommt immer mehr. In diesem Teil unserer Artikelreihe zeigen wir Ihnen an einem eigenen Beispiel wie wir bei Trusted Shops unsere Zertifikate überarbeitet haben um sie fit für die Zukunft zu machen. 

Steigende Nutzerzahlen mit mobilen Endgeräten haben dazu geführt, dass wir uns Ende 2013 bei Trusted Shops entschlossen haben unser Zertifikat für mobile Endgeräte zu optimieren. Mit dem Zertifikat zeichnen wir sichere und geprüfte Online-Shops aus. Ende 2013 lag der Anteil der Besucher die das Zertifikat über Mobilgeräte angeschaut haben bei knapp 35% – Tendenz steigend. Aktuell kommen bereits etwa 40% der Aufrufe von Smartphones oder Tablets.

Kontinuierliche Steigung der mobilen Nutzung des Trusted Shops Zertifikats

Wir standen also vor der Wahl: Responsive Umsetzung oder ein eigenes Template für eine mobile Version? Die Entscheidung fiel auf responsive Design als Lösung für Endgeräte mit allen denkbaren Auflösungen. Dies erspart im Nachgang die doppelte Entwicklungsarbeit beim Erstellen neuer Features.

Zunächst war uns klar, dass wir unser Zertifikat nicht komplett relaunchen würden. Es ging lediglich darum, die Darstellung auf mobilen Endgeräten zu verbessern. Einen ersten Schritt in diese Richtung haben wir bereits Mitte 2013 gemacht indem wir z.B. den Viewport der Zertifikate fest definiert hatten. Wir wollten allerdings einen deutlichen Schritt weitergehen.

Zunächst steht bei der responsive Überarbeitung einer bestehenden Website die konzeptionelle Arbeit auf dem Programm. Ohne konkrete Überlegungen in welcher Situation der Nutzer welche Information benötigt, wird responsive Design auf das reine ein- und ausblenden von Inhalten beschnitten.

Bei responsive Design gilt mehr denn je: Das Wichtigste zuerst! Deswegen haben wir unser Zertifkat so gestaltet, dass bei gültigen Zertifikaten direkt diese Information erkennbar ist. Ist ein Shop kein Mitglied mehr, interessiert es aber Verbraucher vermutlich ob der Käuferschutz noch gilt. Deswegen stehen in diesem Fall entsprechende Info-Boxen über dem eigentlichen Zertifikat.

Wireframes des neuen mobil-optimierten Zertifikats

Die zum Shop relevanten Informationen werden ebenfalls je nach Endgerät unterschiedlich optimiert angezeigt. Im unteren, grauen Footerbereich erleichtern wir die Navigation mittels eines zusammengefassten Menüs in Form einer Select-Box und entsprechenden Sprungmarken.

Einmal eine Website responsive angelegt muss die Prämisse bei der Weiterentwicklung sein: Mobile First. Jede neue Funktion die dazu kommt, erfordert eine Darstellung und Verhalten sowohl für mobile als auch Desktop. Ein einfaches ersatzloses ausblenden von Elementen degradiert User mit mobilen Endgeräten zu Usern zweiter Klasse.

image_pdfPDFimage_printDrucken