Le “Responsive Design” est la dernière tendance du moment en ergonomie multi-écrans. De nombreux articles à ce sujet fleurissent sur la toile poussant à se demander s’il ne s’agit pas d’un engouement passager. De manière générale, nous pensons qu’une tendance de fond se différencie d’une tendance passagère lorsqu’elle amène de véritables améliorations quant à l’expérience utilisateur, ce que fait le “Responsive Design”. Alors, ce n’est pas demain la veille que cela risque de disparaître!
Ceci étant dit, du fait du battage médiatique qui entoure le “Responsive Design”, de nombreuses entreprises ont sauté beaucoup trop tôt sur cette tendance et n’ont malheureusement pas réussi à respecter le principe propre de cette approche: offrir une navigation facile et intuitive, quel que soit le périphérique à partir duquel le site est accessible.
Plus récemment, nous avons observé une hausse soudaine d’articles faisant état des inconvénients du “Responsive Design”. Il faut dire qu’il existe tellement de cas où l’application de cette approche serait à revoir. Autant le dire, tout outil n’est optimal que si la conception est bien faite et adaptée. C’est ainsi que nous vous proposons de consulter notre liste des trois pièges les plus courants à éviter et les solutions à envisager avant de vous lancer.
PIÈGE 1 : Dissimuler du contenu
Le point central de la création d’un site web en “Responsive Design” est d’offrir un contenu accessible à tous et en tout temps. Dissimuler du contenu serait donc proposer tout le contraire et ne devrait jamais être envisagé comme solution afin de créer une page, claire et propre.
Prenons un exemple: catswhocode.com
En essayant de suivre la dernière tendance, les créateurs de ce site semblent avoir oublié la règle d’or pour une bonne expérience: la navigation intuitive. Dans la version mobile de ce site, le menu disparaît, empêchant l’utilisateur d’avoir accès à d’autres informations. Il est inutile de créer un site en “Responsive Design” si elle limite le champs d’action de l’utilisateur. Ne tombez pas dans ce piège commun. À la place, repensez une solution qui fournisse la même expérience utilisateur mais sur plus petit écran.
LA SOLUTION: changer la présentation de vos informations
Pour éviter de tomber dans le piège décrit dans l’exemple ci-dessus, il faut imaginer une toute autre présentation du site pour pouvoir fournir à la fois une mise en page propre et l’accessibilité du contenu.
Un bon exemple de site ayant déjoué cette erreur stratégique est le site que nous avons créé pour Chantelle Paris en utilisant la plate-forme personnalisable de Magento. Notre phase d’analyse a consisté à déterminer les principales catégories que les utilisateurs recherchent lorsqu’ils parcourent le site, ce qui nous a ainsi donné notre barre de navigation supérieure.
Dans la version mobile du site, cette barre de navigation apparaissait encombrée et serrée, nous avons donc opté pour un menu déroulant à la place.
C’est une solution simple, mais qui fonctionne. Personne n’a dit qu’il fallait réinventer l’eau chaude! Tout ce que vous avez à faire est de ruser afin de trouver des moyens d’adapter le contenu à l’appareil utilisé!
PIÈGE 2: Utiliser la même approche que celle pensée pour votre site web
Beaucoup d’articles énonçant les meilleurs pratiques en termes de “Responsive Design” ont fait leur apparition sur la toile. Certains proposaient même de prendre connaissance des 10 commandements de cette nouvelle approche. Le dernier nous a particulièrement frappés… “Ton esprit, tu libéreras. Le web adaptatif, c’est un nouveau monde à découvrir. Les frontières tombent en même temps que les résolutions explosent: innovez et inventez vos propres solutions!”
Le fait est que si vous comptiez utiliser la même approche que celle utilisée sur votre site web, vous serez dépassés avant même de commencer!
Que votre site soit adaptatif ou non, une analyse stratégique doit être effectuée afin de déterminer une hiérarchie du contenu, sa structure et la navigation entre les items. “Conception” et “stratégie” sont deux choses totalement différentes. Par conception, nous entendons création d’un site esthétique tandis que la stratégie permet de s’assurer que le site soit optimisé tant dans sa fonctionnalité que dans l’expérience utilisateur.
LA SOLUTION: Repenser l’approche stratégique
Si vous ne le faisiez pas encore, il est temps de commencer!
Notre approche, chez Le Site, face à de nouveaux projets, est de toujours effectuer une analyse en profondeur de la présence Web de notre client, de l’identité de sa marque, des attentes des utilisateurs, du public cible, de la concurrence et des objectifs à atteindre. Cette analyse est essentielle pour la création d’un site que nous voulons fonctionnel de la manière la plus optimale mais également pour pouvoir fournir aux utilisateurs les informations qu’ils recherchent, facilement et rapidement.
Pour des sites de commerce électronique, la phase “stratégique” est essentielle afin de découvrir toutes les possibilités qui feront croître les ventes ou qui préviendront les cas isolés tels que les paniers abandonnés, par exemple.
Concevoir une nouvelle stratégie vous permettra de déterminer la hiérarchie de votre contenu pour ensuite déterminer la structure du site. Ne pas le faire est comparable au fait de fournir un psd à un développeur. Cela l’oblige à prendre des décisions de “conception” avant même de pouvoir le faire. Lui demander de prendre des décisions stratégiques cruciales comme celles-ci font souvent la différence entre un site qui fonctionne et un site défaillant.
Lors de la conception d’un site respectant le “Responsive Design”, votre approche stratégique doit être étendue à la création de wireframes qui détermineront la façon que le site aura de s’afficher sur des écrans plus petits. Ces décisions ne devraient pas être laissées aux concepteurs… Ils pourraient ne pas comprendre l’importance de l’affichage de certains éléments, à certains moments.
PIÈGE 3: Se fier aux tailles standards d’écran pour vos changements de présentation
Il y a de nombreuses bonnes raisons pour lesquelles vous ne devriez jamais concevoir votre site en fonction des dimensions d’écran les plus connues. Premièrement, cette solution renie entièrement l’objectif d’une conception réactive, qui est de fournir une belle mise en page sur tous les appareils. Ensuite, nous le savons tous, la technologie est soumise à de fréquents changements, vous risquerez de vous y perdre. Économisez-vous ces heures de réflexion et de modification, pensez votre conception en fonction du contenu, et non pas en fonction du périphérique qui sera utilisé.
LA SOLUTION: Définir et respecter des “points de rupture”
L’utilisation de “points de rupture” vous aidera à proposer une excellente mise en page et cela sur une large variété de tailles d’écran, de navigateurs et de périphériques. La structure du site que nous avons créé pour Browns Shoes est un excellent exemple de la façon dont l’affichage d’un contenu devrait être déterminé par rapport aux “points de rupture” existants. Pour en savoir plus, nous vous invitons à jeter un oeil sur cet article de chez “The Internet Retailer” qui reprend notre travail effectué pour Browns.
Pour conclure, en utilisant cette approche, vous garantissez que votre site sera toujours aussi beau, même lorsque de nouveaux périphériques sortiront. Si vous avez besoin de plus de conseils pour vous aider à déceler les “points de rupture”, nous vous conseillons de lire cette explication de chez Info Web Master.