Retour d'expérience : cb-atelier-ebeniste.fr (partie 1)

Créé le 07/10/2013

Dernière mise à jour le 09/07/2016

Pour le premier article sur mon site, j'aimerais faire un retour d'expérience sur la réalisation d'un site présentant des meubles d'ébénisterie : cb-atelier-ebeniste.fr.

Le but du site étant de présenter des meubles, le medium le plus approprié est l'image. Il faut donc que les images soient bien mises en valeur et que le site soit adaptatif afin de toucher le plus large public possible.

SI l'on prend les problèmes séparément :

  • Un site adaptatif : facile, on prend un thème adaptatif et le tour est joué.
  • Des images bien mises en avant, avec slideshow, etc. : facile, il y a plein de modules le permettant

Pris ensemble : un site adaptatif avec des images bien mises en avant :  et bien ce n'est pas si évident...

Objectifs :

  • Un slideshow en page d'accueil.
  • Une navigation agréable et adaptative dans tout le site
  • Sur la page détail d'un meuble, voir toutes les images d'un meuble.
  • Accéder à une popin afin de voir les images taille réelle.

Contraintes :

  • Pas de code custom (sauf un peu de CSS), que de la configuration de modules existants afin que l'entretien du site soit facile.
  • Pas de déclinaison du genre : un terminal, un thème adapté à la résolution de ce terminal. Il faut que l'entretien soit facile, j'ai déjà donné une fois avec cette stratégie et je ne pense pas que ce soit une stratégie d'avenir pour plusieurs raisons :
    • il y a déjà des tas (et ça ne fera que s'accroître) de terminaux différents qui accèdent au web,
    • le temps de réalisation ne fait que s'accroître avec un sentiment de faire et refaire la même chose X fois,
    • la complexité d'entretien est décuplée,
    • (je n'aime pas les mobiles, je pense que ça ce sent :D ),
    • ...

Modules utilisés :

  • Thème : Corolla.
  • Adaptive image pour rendre les images... adaptatives.
  • Colorbox pour la popin.
  • Flexslider pour le slideshow.
  • Views fluid grid pour une présentation des catégories de meubles en page d'accueil.

Modules testés puis rejetés :

  • Dynamic display block.
  • Gallery formatter pour le détail d'un meuble.
  • Views slideshow.

Gallery Formatter, Dynamic Display Block et Views Slideshow

Le problème de ces 3 modules est qu'ils utilisent des tailles fixes pour leur affichage et surtout cette taille est fixée non pas en CSS, mais directement dans le HTML rendu par les modules. Ce qui tue l'adaptativité.

Ce qui est dommage car pour des sites "pour ordinateurs" (on dira desktop), ces modules donnent de très bons et beaux rendus.

Gallery formatter fournit un formateur de champ assez paramètrable et qui se couple très bien avec Colorbox, donc pour un site desktop c'est un très bon choix.

Dynamic Display Block possède des templates propres, personnalisables, ce qui permet de répondre à un grand nombre de besoins, mais là encore que pour du desktop.

L'adaptivité des images

Rendre les images adaptatives m'a fait franchir le pas pour comprendre l'utilisation du module Adaptive Image. Je rends compte de cet apprentissage dans le tutoriel suivant :  tutoriel Adaptive Image.

La page d'accueil

Le slideshow

Auparavant, j'utilisais le module Views Slideshow pour les slideshows, mais Flexslider s'est révélé être autant fonctionnel (voir même plus fonctionnel) et surtout permettant l'adaptativité. Très propre avec un beau rendu.

Les catégories de meubles

Au début parti sur l'utilisation d'un rendu Grille d'une vue avec beaucoup de customisation CSS derrière, j'ai testé le module Views Fluid Grid. Et en fait, ce module est génial, car il permet de faire au clic ce que je comptais faire difficilement (ou en tout cas ça aurait pris du temps) en CSS afin de rendre la liste adaptative.

Le détail d'un meuble

Pour le détail d'un meuble, il fallait une connexion avec Colorbox afin que les photos d'origines soient consultables. Au passage, J'ai été agréablement surpris de constater que les popins colorbox sont adaptatives out of the box.

Dans l'ordre chronologique, pour le formateur des images des meubles  :

  • Gallery Formatter : bon rendu, s'intègre à Colorbox, pas adaptatif => rejeté
  • Flexslider : bon rendu, adaptatif, ne permet pas l'utilisation de colorbox => rejeté
  • Colorbox  : bon rendu, adaptatif, permet l'utilisation de Colorbox bien évidemment => accepté

Je regrette un peu le fait que le formateur de champ image Colorbox ne permette pas d'afficher une seule image et que dans la popin, on ait accès aux autres images. Mais en même temps, cela permet au visiteur de s'apercevoir qu'il y a d'autres images. J'ai essayé avec Display Suite de limiter le nombre d'images affichées, ça limite bien leur nombre, mais ça limite également le nombre d'images dans la popin.

Conclusion

Je trouve dommage, qu'à cause du développement pour mobiles, tablettes, etc. on doive se priver de modules qui donnent de bons rendus sur desktop.

J'espère que vous aurez apprécié ce retour d'expérience et qu'il vous aura été profitable.

Voir la partie 2 de ce retour d'expérience, consacrée à l'hébergement.

Ajouter un commentaire