Magento Imagine - Day 3

Magento Imagine 2013 – Day 3 et Conclusion

Programme plus léger pour ce troisième et dernier jour de l’événement. Plus léger à la fois dans son agenda et dans son contenu. Nous allons donc relater deux ateliers auxquels nous avons assisté. Le premier, traitant du « responsive design », le second – plus commercial – donne de bonnes idées pour augmenter le panier moyen de l’internaute.

Atelier : introduction au responsive design

A l’heure où les formats des outils informatiques permettant de naviguer sur le web ne cessent de se multiplier (ordinateurs de bureau, ordinateurs portables, téléphones mobiles, tablettes, smartphones), le responsive design doit être le sujet qui connait actuellement la plus forte émulation dans le milieu de l’Internet (avec Magento bien sûr !). Pour les lecteurs de ce billet non encore alertes sur le sujet, il convient de définir rapidement le concept : réaliser un site web en responsive design consiste à le concevoir, dessiner et fabriquer de façon à le rendre aussi ergonomique, fonctionnel et visuellement attrayant quelque soit le terminal sur lequel l’internaute le consulte. Ainsi, adapter un site existant pour le rendre responsive nécessite plusieurs étapes pouvant mener jusqu’à la refonte même du contenu du site en complément de certaines adaptations techniques obligatoires.

Repenser le contenu

Les limites inhérentes à certains terminaux peuvent rendre difficile la visualisation ou non ergonomiques des informations capitales telles que les photos, les descriptions produits, la navigation. Par exemple, la pagination des listings produits telle que proposée sur le site non-responsive est-elle adaptée au site responsive ? Si ladite pagination propose d’afficher, disons, 100 produits, il y a fort à parier que l’affichage d’une telle quantité d’information sur un téléphone mobile affecte sensiblement la performance et la lisibilité du site. Il convient donc de modifier cette pagination de façon à lever ces freins. Cette problématique est également valable pour les photos produits. En effet, dans le cadre d’un site adapté à une visualisation sur un ordinateur de bureau, l’utilisation d’un zoom ou de multiples photos produits est tout-à-fait possible. Or de telles fonctionnalités sont bien plus difficiles à mettre en place pour une visualisation sur des terminaux plus petits et moins puissants. Dans le cadre d’un site responsive, il peut donc être salutaire de repenser la façon dont les photos sont prises : l’angle de la prise de vue, la position des produits, leur mise en valeur, etc de façon à limiter l’usage de fonctionnalités fortement consommatrices de ressources système et de bande passante.

En somme, la première étape avant la mise en place technique d’un site en responsive design consiste en l’analyse approfondie du site initial non responsive sur l’ensemble des terminaux sur lequel il devra être porté en responsive. Et il faut s’attendre, parfois, à des travaux assez conséquents sur l’ergonomie et les technologies utilisées qui peuvent conduire à de profondes modifications sur le site initial de façon à garantir une cohérence entre ce site initial et ses adaptations en responsive design.

La problématique de la performance

L’objectif de performance sur un site en responsive design est sans appel : le temps d’affichage du site ne doit pas excéder 2 secondes ! Voici quelques pistes permettant d’y arriver.

  • S’affranchir des technologies tierces pouvant affecter le temps de chargement (librairies Javascript externe en particulier)
  • Réduire le plus possible le nombre de requêtes HTTP (scripts, appels aux CSS, …)
  • Supprimer les fonctionnalités pouvant l’être. Par exemple : est-il obligatoire de laisser les internautes soumettre des commentaires sur les sites destinés aux terminaux mobiles ?
  • Utiliser la technique du « cookieless domain » dès que possible
  • Utiliser la technique du « lazy loading » Javascript
  • Ne pas utiliser de CDN pour les fichiers CSS mais plutôt le même domaine que le site lui-même
  • Et, évidemment, toutes les techniques d’optimisation déjà connues pour tout site web
  • Tester les performances. Tester. Tester. Grâce à des outils type Yslow, Google Pagespeed …

Au sujet du markup HTML

Sur des grands écrans, l’ordre dans lequel les éléments sont injectés dans le DOM via le markup HTML peut être parfois négligé. Ce n’est évidemment pas le cas dans le cadre du responsive design pour lequel l’ordre d’apparition des éléments sur la page revêt une importance particulière dans la mesure où, selon le terminal utilisé, le navigateur pourra afficher un rendu différent. Ainsi, il convient de porter une attention particulière au markup HTML de façon à hiérarchiser le rendu de façon cohérente entre tous les terminaux.

Voici quelques pistes permettant d’arriver à ce résultat :

  • Utiliser un layout en une colonne (éviter les colonnages type « colonne gauche/droite + colonne contenu ») et gérer des exceptions quand obligatoire
  • Ne pas hésiter à refondre le markup de façon granulaire pour les pages essentielles
  • Combiner ce nouveau markup à l’utilisation des propriétés « flexbox » disponibles en CSS 3

Au sujet des images

En complément aux éventuelles adaptations des prises de vues évoquées plus tôt, des travaux complémentaires sur les images pour le responsive design sont nécessaires. En particulier :

  • Utiliser la technique du « image replacement »…
  • … combinée à la technique du « oversize » quand le « image replacement » n’est pas légitime ou non applicable

Le Javascript

L’utilisation de certains outils Javascript (natifs ou non) permettent de faciliter le travail et de lever des freins sur certaines terminaux tels que la gestion des événements relatifs aux intéractions avec les écrans tactiles.

Les formulaires

  • Eviter les formulaires horizontaux
  • Utiliser les balises HTML5 permettant de gérer les « input type »
  • Utiliser des widgets spécifiques pour certains champs. Par exemple : pour le choix de la quantité à ajouter au panier, un widget avec des boutons « + » et « -« .
  • Mettre en place un système permettant de sauvegarder les données de formulaire de façon à en éviter la resaisie

Le social

Une règle d’or ici : ne pas inclure les librairies des réseaux sociaux générant de nombreuses requêtes. Par exemple : le code Facebook permettant d’afficher le nombre de like est à proscrire. Il suffit de se contenter d’utiliser les snippets affichant les liens de partage qui, eux, ne nécessitent pas de requêtes HTTP supplémentaires.

Atelier : quelques astuces pour plus de business !

Voici, listées très simplement, quelques astuces à partager sans modération…

  • La performance est reine. Chaque seconde supplémentaire nécessaire à afficher un site e-commerce engendre une perte de chiffre d’affaires de 7%. La mise en place d’une stratégie et d’outils d’optimisations ne relève donc pas du confort mais du « must have ».
  • La mise en place d’indicateurs permettant de connaître le chiffre d’affaires / marge par visiteur permet de mesurer la rentabilité du site dans le temps. Le ratio le plus couramment utilisé étant « taux de conversion / panier moyen » qui permet de mesurer la rentabilité par client.
  • Utiliser des vidéos. C’est un conseil redondant qui semble avoir un fort écho outre-atlantique.
  • Se renseigner sur les moyens de paiement et de livraison préférés des internautes consultant les sites internationaux. Par exemple, pour les sites dont la zone de chalandise comprend l’Italie : quels sont les moyens de paiement et de livraison les plus courant en Italie ?
  • Enrichir le contenu des pages de résultats de recherche – ces pages ayant une forte attention de la part de l’internaute.
  • Optimiser et enrichir les contenus des pages « oubliées » : accueil de l’espace client, le panier vide, la page de confirmation de commande, la page de mot de passe oublié, la page de déconnexion de l’espace client, la page 404…
  • Donner la possibilité aux clients de rendre leur liste d’envie publique voire de la partager.

Notre conclusion sur Magento Imagine 2013

Magento grandit et se consolide depuis 2008. Et ce n’est pas fini comme en témoigne le rachat récent par eBay et les informations qui ont été communiquées lors de Imagine 2013. Et, chez Soon, nous allons profiter de tous ces éléments pour toujours affiner et approfondir nos connaissances techniques autour de notre plate-forme e-commerce préférée tout en suivant la tendance imprimée par l’éditeur : évoluer vers la réalisation de sites e-commerce ayant un volume de vente croissant. En effet, à l’heure actuelle, l’Agence Soon accompagne des clients dont le chiffre d’affaires oscille entre 500 000 € et 20 millions €. Magento Enterprise Edition étant maintenant prêt pour propulser des sites à très forte activité (plus de 100 millions $), Soon va désormais s’attacher à travailler avec des entreprises de cette taille.

Et nous nous donnons déjà toutes nos chances grâce à deux nouvelles certifications : Soon compte désormais 3 développeurs certifiés « Magento Certified Developer » ainsi qu’un développeur certifié « Magento Certified Frontend Developer » parmi les premiers au monde !

Enfin, nous serons heureux d’échanger très prochainement avec vous sur tous ces sujets lors de nos prochaines présences sur les salons :

  • eCom Genève le mardi 30 avril de 8H30 à 18H30
  • Bargento 2013 à l’espace Champeret (Paris) qui aura lieu le 4 juin 2013

Voir http://blog.agence-soon.fr/venez-nous-rencontrer/

PS : Nominés du « 2013 Imagine Challenge »

Comme à chaque session Magento Imagine, plusieurs sites remarquables quant à leur réalisation sont nominés et l’un deux est recompensé. Cette années, les trois sites nominés étaient :

E-Commerce, graphique, Las Vegas

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *