Un exemple d’ecommerce responsive design : Shoji

shoji-responsive-design

Je vous présentais dans un post précédant un billet sur le responsive design. Je viens compléter ici avec un exemple (autre qu’Amazon, si si) sur le sujet. J’ai découvert le site Shoji.fr à travers Rhooo.com, qui est une belle source d’inspiration pour les sites ecommerce.

La boutique Shoji a été intégrée sous Prestashop par l’agence Axome (l’Archiduchesse, etc…). Ce qui est intéressant ici c’est qu’on peut très facilement jongler entre les différentes résolutions et voir ce qu’on nous présente. Attention, je ne dis pas que c’est ce qu’il faut faire pour TOUS les sites ecommerce et qu’il faut préférer le responsive design à une version purement mobile ou une application.

Parce que oui, l’inconvénient du responsive design dans le cas de Shoji.fr est qu’on charge tous les éléments de la page, même ceux qu’on ne verra pas sur une petite résolution par exemple. Je n’ai pas regardé précisément au niveau des temps de chargements des pages, mais c’est bien fait. Allez, quelques copies d’écran des différentes versions, mais je vous conseille aussi de vous amuser à changer la taille de votre navigateur pour voir les résultats…

La taille la plus grande :
ecommerce-responsive-design-shoji-1

On réduit un peu… :
Le menu a changé, le slider n’a plus de textes à sa droite, on réduit le logo et quelques boxs…

ecommerce-responsive-design-shoji-2

Et on passe au mobile… :
Pour la version mobile, on a plus que le logo, le panier, et le menu dans le header (la recherche a été supprimée), on retire le slider et on affiche directement les coups de coeur (1 produit par ligne).

ecommerce-responsive-design-shoji-3

Étiquettes : ,

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :