Réussir l'adaptation responsive d'une boutique en ligne
Publié le 7/5/2015
Au fil des années, notre façon de "consommer" et de s'informer a bien évolué, le smartphone fit son apparition, suivi de près par la tablette, puis la phablette (grands smartphones), puis... Dès 2014, plus de 400 résolutions d'écran ont été recensées.
Le but du responsive design est de rendre votre site "flexible". Il doit s'adapter dans n'importe quel contexte (tablette en mode portrait ou paysage, smartphone, etc). Il faut réfléchir en amont, organiser vos contenus, choisir les informations qui méritent d'être affichées sur mobile, celles qui méritent de disparaitre sur un ordinateur. Créer un site responsive a de nombreux avantages (comparé aux autres solutions mobiles : site dédié, application), les coûts et les délais sont généralement inférieurs et la mise à jour du contenu est plus aisée qu'un déploiement multi-plateformes.
Wifeo vous permet d'activer facilement le responsive de votre site (comment faire ?), et vous propose ensuite un certain nombre d'outils pour rendre la version mobile de votre site... parfaite !
Voilà pour la théorie... Passons maintenant au concrèt !
Tasse-toi.com (anciennement "opentech") est une des plus anciennes boutiques en ligne créée et gérée via Wifeo. Vous trouverez sur cette boutique en ligne tout un arsenal de gadgets insolites, avec comme produit phare des mugs en tous genre, souvent avec un humour décalé.
Depuis quelques semaines, le responsive est parfaitement intégré sur Tasse-toi.com, afin de permettre à ses visiteurs mobile d'avoir une expérience de navigation plaisante.
Les créateurs de cette boutique en ligne ont su utiliser efficacement les outils responsive proposés par Wifeo afin d' arriver à ce résultat que nous allons vous présenter dans cet article.
Voici les différentes composantes de ce qui fait le responsive de ce site :
L'entête de votre site, généralement contenant votre logo et parfois votre menu, représente un élément fondamental de l'identité de votre site. Cependant, son contenu ne représente en principe pas la chose la plus importante de votre site. Elle doit donc être visible, mais pas trop présente. D'où la nécessité de l'adapter sur mobile comme l'a fait Tasse-Toi.com.
Les options responsive de Wifeo permettent de faire disparaître sur mobile l'entête de votre site (comment faire ?), sur mobile, à la place sera alors affiché la "barre menu mobile", dans laquelle vous pouvez intégrer votre logo (comment faire ?).
Le menu de votre site permet aux visiteurs d'aller sur vos différentes pages. Inutile de développer une démonstration pour vous convaincre de son importance ! Avec ici une composante supplémentaire car votre menu doit évidemment être cliquable. Sachant que la précision du clic sera différente entre l'ordinateur (souris) et le mobile (tactile), votre menu mobile doit être plus gros.
Si vous utilisez le gestionnaire de menu Wifeo, l'adaptation mobile de votre menu sera automatique. En revanche si vous utilisez le menu libre, vous devrez créer vous même la version mobile de votre menu (comment faire ?).
Logiquement, vos visiteurs/clients passeront à un moment ou à un autre par les catégories de votre boutique, pour arriver à la phase finale (la vente). Voila donc encore une page très importante.
Vous avez de la chance, vous avez créé votre boutique en ligne sur Wifeo, vous n'avez donc (presque) rien à faire ! Vos pages de catégories d'articles s'adapteront automatiquement une fois le responsive activé (agrandissement des images, positionnement des articles sur une unique colonne, etc...). Vous pouvez ajouter quelques adaptations en plus, par exemple Tasse-toi.com à choisi de masquer sur mobile le texte en haut de la catégorie afin que les visiteurs aient un accès direct aux produits (comment faire ?).
Les pages des articles sont souvent les pages qui sont positionnées dans Google (car elles ont un contenu éditorial ciblé), et elles sont la dernière phase avant l'ajout au panier. Autant vous dire que vous n'avez pas intérêt à négliger ces pages ! Là il n'y a pas de règle, l'adaptation responsive dépendra de votre mise en page initiale.
En ce qui concerne Tasse-toi, plusieurs choses sont à noter :
- Centrage du titre "Mug stormtrooper 3D" et du prix sur mobile (comment faire ?)
- Adaptation de la taille du titre sur mobile (comment faire ?)
- Agrandissement des images sur mobile (comment faire ?)
- Disparition de certains éléments sur mobile - réseaux sociaux, informations moins importantes, etc. - (comment faire ?)
- Mise en place d'un bouton d'ajout au menu plus gros sur mobile (comment faire ?)
- Mise en colonne d'éléments qui étaient initialement en ligne (dans un tableau) (comment faire ?)
Attention, comme l'a fait Tasse-toi, il est important d'adapter TOUTE la mise en page de vos fiches articles, et non pas seulement une partie. Sinon votre page ne sera pas considérée par Google comme adaptée aux mobile, et elle sera mal classée dans les résultats de recherche mobile (comment savoir si Google estime que votre page est adaptée aux mobile).
Cela ne semble pas important, mais l'adaptation mobile de vos bottom (pieds de page) est souvent négligée et empèche souvent à vos pages d'être pleinement responsive car ils sont trop larges. Leur adaptation responsive est donc importante. Vous pouvez choisir la solution de facilité et tout simplement faire disparaître votre bottom sur mobile (comment faire ?). Et si comme Tasse-toi vous êtes perfectionniste, vous pouvez aussi adapter votre bottom pour qu'il soit responsive.
Pour l'exemple de Tasse-toi, il a fait le choix de faire disparaître sur mobile la colonne "Divers" (comment faire ?) et de mettre les deux autres colonnes l'une en dessous de l'autre sur mobile (comment faire ?).
Vous pouvez parcourir Tasse-toi.com sur ordinateur et sur mobile pour voir les autres adaptations responsive qui ont été mises en place, et vous en inspirer pour votre propre boutique en ligne. Sachez que tout ce qui a été mis en place est à la portée de tous (pas de difficulté technique particulière) d'autant plus que vous disposez de beaucoup de documentations sur le sujet dans le centre d'aide Wifeo.
Selon les sites, cela demandera plus ou moins de temps pour être mis en place. Ce temps ne sera pas du temps perdu car un site responsive augmente immanquablement son nombre de visiteurs à court et moyen terme.
Voilà, si votre site n'est pas encore responsive, après lecture de cet article vous avez probablement très envie qu'il le devienne. A vous de jouer, et n'oubliez pas que Wifeo vous propose un centre d'aide dédié au responsive pour vous aider dans cette tâche : Centre d'aide Wifeo Responsive.
Le but du responsive design est de rendre votre site "flexible". Il doit s'adapter dans n'importe quel contexte (tablette en mode portrait ou paysage, smartphone, etc). Il faut réfléchir en amont, organiser vos contenus, choisir les informations qui méritent d'être affichées sur mobile, celles qui méritent de disparaitre sur un ordinateur. Créer un site responsive a de nombreux avantages (comparé aux autres solutions mobiles : site dédié, application), les coûts et les délais sont généralement inférieurs et la mise à jour du contenu est plus aisée qu'un déploiement multi-plateformes.
Wifeo vous permet d'activer facilement le responsive de votre site (comment faire ?), et vous propose ensuite un certain nombre d'outils pour rendre la version mobile de votre site... parfaite !
Voilà pour la théorie... Passons maintenant au concrèt !
Tasse-toi.com (anciennement "opentech") est une des plus anciennes boutiques en ligne créée et gérée via Wifeo. Vous trouverez sur cette boutique en ligne tout un arsenal de gadgets insolites, avec comme produit phare des mugs en tous genre, souvent avec un humour décalé.
Depuis quelques semaines, le responsive est parfaitement intégré sur Tasse-toi.com, afin de permettre à ses visiteurs mobile d'avoir une expérience de navigation plaisante.
Les créateurs de cette boutique en ligne ont su utiliser efficacement les outils responsive proposés par Wifeo afin d' arriver à ce résultat que nous allons vous présenter dans cet article.
Voici les différentes composantes de ce qui fait le responsive de ce site :
Le top !
L'entête de votre site, généralement contenant votre logo et parfois votre menu, représente un élément fondamental de l'identité de votre site. Cependant, son contenu ne représente en principe pas la chose la plus importante de votre site. Elle doit donc être visible, mais pas trop présente. D'où la nécessité de l'adapter sur mobile comme l'a fait Tasse-Toi.com.
Les options responsive de Wifeo permettent de faire disparaître sur mobile l'entête de votre site (comment faire ?), sur mobile, à la place sera alors affiché la "barre menu mobile", dans laquelle vous pouvez intégrer votre logo (comment faire ?).
Le menu du site !
Le menu de votre site permet aux visiteurs d'aller sur vos différentes pages. Inutile de développer une démonstration pour vous convaincre de son importance ! Avec ici une composante supplémentaire car votre menu doit évidemment être cliquable. Sachant que la précision du clic sera différente entre l'ordinateur (souris) et le mobile (tactile), votre menu mobile doit être plus gros.
Si vous utilisez le gestionnaire de menu Wifeo, l'adaptation mobile de votre menu sera automatique. En revanche si vous utilisez le menu libre, vous devrez créer vous même la version mobile de votre menu (comment faire ?).
Les catégories d'articles !
Logiquement, vos visiteurs/clients passeront à un moment ou à un autre par les catégories de votre boutique, pour arriver à la phase finale (la vente). Voila donc encore une page très importante.
Vous avez de la chance, vous avez créé votre boutique en ligne sur Wifeo, vous n'avez donc (presque) rien à faire ! Vos pages de catégories d'articles s'adapteront automatiquement une fois le responsive activé (agrandissement des images, positionnement des articles sur une unique colonne, etc...). Vous pouvez ajouter quelques adaptations en plus, par exemple Tasse-toi.com à choisi de masquer sur mobile le texte en haut de la catégorie afin que les visiteurs aient un accès direct aux produits (comment faire ?).
Les pages des articles !
Les pages des articles sont souvent les pages qui sont positionnées dans Google (car elles ont un contenu éditorial ciblé), et elles sont la dernière phase avant l'ajout au panier. Autant vous dire que vous n'avez pas intérêt à négliger ces pages ! Là il n'y a pas de règle, l'adaptation responsive dépendra de votre mise en page initiale.
En ce qui concerne Tasse-toi, plusieurs choses sont à noter :
- Centrage du titre "Mug stormtrooper 3D" et du prix sur mobile (comment faire ?)
- Adaptation de la taille du titre sur mobile (comment faire ?)
- Agrandissement des images sur mobile (comment faire ?)
- Disparition de certains éléments sur mobile - réseaux sociaux, informations moins importantes, etc. - (comment faire ?)
- Mise en place d'un bouton d'ajout au menu plus gros sur mobile (comment faire ?)
- Mise en colonne d'éléments qui étaient initialement en ligne (dans un tableau) (comment faire ?)
Attention, comme l'a fait Tasse-toi, il est important d'adapter TOUTE la mise en page de vos fiches articles, et non pas seulement une partie. Sinon votre page ne sera pas considérée par Google comme adaptée aux mobile, et elle sera mal classée dans les résultats de recherche mobile (comment savoir si Google estime que votre page est adaptée aux mobile).
Le bottom !
Cela ne semble pas important, mais l'adaptation mobile de vos bottom (pieds de page) est souvent négligée et empèche souvent à vos pages d'être pleinement responsive car ils sont trop larges. Leur adaptation responsive est donc importante. Vous pouvez choisir la solution de facilité et tout simplement faire disparaître votre bottom sur mobile (comment faire ?). Et si comme Tasse-toi vous êtes perfectionniste, vous pouvez aussi adapter votre bottom pour qu'il soit responsive.
Pour l'exemple de Tasse-toi, il a fait le choix de faire disparaître sur mobile la colonne "Divers" (comment faire ?) et de mettre les deux autres colonnes l'une en dessous de l'autre sur mobile (comment faire ?).
Vous pouvez parcourir Tasse-toi.com sur ordinateur et sur mobile pour voir les autres adaptations responsive qui ont été mises en place, et vous en inspirer pour votre propre boutique en ligne. Sachez que tout ce qui a été mis en place est à la portée de tous (pas de difficulté technique particulière) d'autant plus que vous disposez de beaucoup de documentations sur le sujet dans le centre d'aide Wifeo.
Selon les sites, cela demandera plus ou moins de temps pour être mis en place. Ce temps ne sera pas du temps perdu car un site responsive augmente immanquablement son nombre de visiteurs à court et moyen terme.
Voilà, si votre site n'est pas encore responsive, après lecture de cet article vous avez probablement très envie qu'il le devienne. A vous de jouer, et n'oubliez pas que Wifeo vous propose un centre d'aide dédié au responsive pour vous aider dans cette tâche : Centre d'aide Wifeo Responsive.
