Responsive OXID eShop Webdesign für Nagelkosmetik Shop „NDED“

Für unseren Kunden www.nded.de (Nail Design Exclusive Discovery) haben wir eine neue mobile Website auf Basis der OXID eShop Enterprise Edition erstellt. Besucher mit Smartphone und Tablet genießen nun ein ebenso geschmeidiges Einkaufserlebnis wie Desktop-User. Die Usability wurde für die stationäre und die mobile Welt gleichermaßen optimiert – und das alles in einem einzigen Template.

nded mobile Version - ipad

Die Responsive Version des Online-Shops www.nded.de ist im Grunde kein „Responsive“, sondern vielmehr eine für Desktops, Smartphone und Tablets gleichermaßen optimierte Seite. Das bedeutet, dass die alten HTML-Strukturen so gut wie unwichtig waren, da die Elemente per Javascript und CSS so positioniert werden wie gebraucht.

Im Vordergrund sollten bei der Realisierung insbesondere Funktionalität und Usability stehen, so dass mobile Nutzer auf gewohnte Art und Weise mit ihren Smartphones und Tablets navigieren können, im Prinzip wie bei einer echten App.

nded_iphone_snded mobile Version - iphonets

Per CSS werden in der Smartphone/Tablet Version unerwünschte Elemente ausgeblendet. Für weitere CSS Spezifikationen, welche nur für Smartphones gelten sollen, wird dann per CSS Media-Query spezielles CSS hinterlegt. Für die normale Tablet/Smartphone Version wird aber nicht mit den CSS Media-Query’s gearbeitet, da es mittlerweile Tablets gibt welche eine höhere Auflösung besitzen als manche Desktop Rechner. (z.B. iPad Retina) Dort wird dann stattdessen anhand des User-Agents festgestellt, ob ein User mit einem mobilen Enderät wie z.B. dem Ipad oder iPhone auf der Seite ist. Sollte das der Fall sein, so wird auf den Body eine zusätzliche Class gesetzt, welche dem CSS die Anweisung gibt, die Smartphone/Tablet Befehle zu verwenden.

Beispiel:

HTML: <body class="mobile"></body>

CSS: body.mobile #header {display: none;}

Somit ist auch die Auflösung des Gerätes egal, ob die Mobile Version angezeigt wird oder nicht.

Bei der mobilen Version des Online-Shops www.nded.de wird auf eine seitliche Navigation gesetzt, welche durch Klick auf einen Button von der Seite ins Bild slidet. Je nach Seite und Höhe des Endgerätes werden Leisten ein- und ausgeblendet und scrollen mit.

Aus SEO Sicht werden nur Platzhalter ohne Text in die HTML Struktur gesetzt, welche in der Mobile Version angezeigt werden sollen, diese werden dann von Javascript mit Inhalt gefüllt. Somit gibt es keine versteckten Link’s und Texte, welche auf Google negative Auswirkungen hätten.

Ein Highlight bei nded Mobile ist die Live-Mengeneingabe, welche je nach Eingabe den Preis automatisch anpasst.

Beispiel: Artikel 1 Stück = 5 € bei einer Eingabe von 6 Stück steht dort der Preis: 30 €

Auf jeder Seite werden nur die wichtigsten Elemente angezeigt. Die Seite besteht aus 50% CSS und 50% Javascript.

Schreibe einen Kommentar

Bitte logge dich mit einer dieser Methoden ein, um deinen Kommentar zu veröffentlichen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: