Articles de mars 2017

Parmi les choses dont vous avez entendu parler concernant les sites Internet, le responsive design est certainement celle qui a fait le plus de bruit depuis 2 ans. Faisons un point sur le sujet pour rendre les choses plus claires pour ceux qui n’auraient pas une compréhension complète du sujet :

Qu’est-ce qu’un site construit en responsive design ?

Le principe est simple à comprendre, le site ainsi construit va s’adapter à tous les formats (ou presque) d’outils sur lesquels il va être consulté. Qu’il s’agisse d’un smartphone, d’une tablette ou d’un ordinateur. Vous comprendrez bien que l’affichage sur un écran de 28 pouces en haute definition (71 cm) et un portable bas de gamme va être différent. Le responsive design doit permettre à un même site de répondre à tous les cas rencontrés.

Un nombre croissant de cas de figures :

Construire les sites en responsive design est devenu indispensable avec la multiplication des formats d’outils et la croissance exponentielle du trafic sur mobiles et tablettes. En consultant les statistiques des sites de nos clients par exemple, nous avons plus de 1550 résolutions d’écran sur l’un d’entre eux. Les chiffres sont avoisinants pour les autres…

Bien sûr, il faut trouver une solution pour que votre site soit lisible dans les meilleures conditions sur tous ces écrans. Les 10 configurations principales représentent près de 80% des écrans, mais ce n’est pas une raison pour négliger les 20% restants!

1 – 1366 X 768 (13.4%) (portable 14 « ,15″) (Microsoft Surface) (HD 16/9)

2 – 360 X 640 (10.4%) (mobile galaxy S3 S4 S5 , Nexus 5,LG G3, HTC One M7 et M8)

3  – 768 X 1024 (9.5%) (I pad, I pad mini,  )

4 – 320 X 568 (7.6%) (I phone 5)

5 – 1920 X 1080 (7.4%) (full HD 16/9 – Acer tablettes, )

6 – 1280 X800 (6.4%) (14″ note book; Galaxy Note, moniteurs 15.4″ en 16/10)

7 – 375X 667 (6.2%) (I phone 6/7)

8 – 1600 X 900 (5.7%) (HD 16X9 – 19″ ou plus)

9 – 1024 X 768 (4.9%) (moniteur 15″, I pad mini, )

10 – 1440  X 900 ( 4.3%) (moniteur 19 »)

tailles de résolution en pixels.

Vous voyez avec une lecture rapide que ces formats sont très variés et font appel à des outils très différents. Le responsive design n’est pas une option!

Une nécessité pour le référencement :

Pour compléter le tableau, Google a récemment annoncé que son algorithme avant changé radicalement de manière de fonctionner. Désormais, les contenus sur mobile sont prioritaires pour le référencement par rapport aux contenus visibles sur ordinateurs, 10 ans après, le changement toujours.

Résultat : il faut absolument que votre site mobile soit ergonomique et contienne à la fois suffisament de contenus. Le plus simple est que ces contenus soient les mêmes que sur ordinateur. La meilleure solution est d’avoir une site en responsive design.

Google n’a pas été très clair sur le niveau de dégradation que vous obtenez quand vos contenus ne sont pas disponibles sur mobile mais il faut les rendre visibles à chaque fois que possible.

Les limites et contraintes du responsive :

Le développement d’un site en responsive design amène de nombreuses problématiques principalement techniques. Nous n’avons pas l’objectif ici de les lister de manière exhaustive  mais d’en signaler quelques unes qui reviennent majoritairement :

1 – La création d’un site responsive design est plutot une contrainte pour la création pour des raisons techniques. En effet, le site qui va s’adapter à tous les écrans est organisé en blocs. Ces blocs vont se positionner différemment en fonction de la résolution de l’écran. Par exemple, votre site aura 3 blocs de news horizontaux sur un ordinateur en haute définition, et ces blocs seront verticaux sur un smartphone : il faudra scroller pour défiler les contenus. En terme de création donc, tout n’est pas recommandé si vous voulez que votre design s’adapte facilement. Vous noterez donc que de plus en plus les sites ont plutot des design de tablette. Les pages d’accueil se ressemblent souvent.

2 – Des contraintes techniques multiples viennent compliquer le travail : les tablettes ne proposent pas de surbrillance au survol d’un bloc par exemple (ça ne peut pas marcher en l’absence de souris…). Il faut gérer des seuils :  définir par exemple le moment précis où un menu texte en haut de site va devenir un menu dit « hamburger » pour tablettes et mobile. Ca se complique encore plus si vous considérez que certains mobiles ont maintenant des définitions supérieures à celles de certains ordinateurs portables…

3 – Les différents appareils n’ont pas le même système d’exploitation (le logiciel décodeur de votre code). Ils ne vont pas tous réagir de la même manière dans une résolution identique.

4 – Les images se règlent automatiquement en fonction de l’espace qui leur est donné par le site et en fonction de la résolution d’écran. Il est donc impossible de garantir un cadrage identique sur tous les écrans . Si on fixe le cadrage, l’ecombrement de l’image s’adaptera à l’écran et pourra soit devenir trop grande soit trop petite: un vrai casse-tête quand vous avez affaire à des clients très soucieux des images (le luxe par exemple).

5 – UX (user experience) . Voilà également un mot à la mode. Il est vrai que l’ergonomie est essentielle à la performance, mais ce n’est pas nouveau. Ce qui est nouveau c’est que l’ergonomie du site n’est plus la même en fonction de la résulation d’écran. Du coup, il faut bien réfléchir et adapter intelligemment l’ergonomie en n’oubliant pas vos objectifs essentiels. Il ne sera pas possible de tout faire à la perfection. Il faut garantir que les priorités seront respectées et faire des choix. (Choisir, c’est se priver du reste selon Gide…)

6 – Google référence préférentiellement les contenus disponibles sur mobile. Toutefois vous ne pouvez envisager l’ergonomie d’un mobile comme celle  d’un ordinateur. Vous ne cherchez pas forcément les mêmes choses debout dans la rue avec votre mobile à la main que assis à votre bureau devant en grand écran en haute définition. Ce point pose la question de la validité d’un site unique pour tous les formats alors que l’expérience utilisateur devrait être différente… Un bon sujet de discussion!

En conclusion :

Le responsive design n’est pas un option. Il est devenu obligatoire!  Si votre site ne l’est pas et que les très nombreux messages envoyés par toutes les agences ne vous ont pas convaincus, il est temps d’y passer! C’est un problème en soi qu’il convient d’envisager dès la conception du site et qui demande en fin de développement une batterie de tests. Il est par contre difficile d’être parfait sur 1550 résolutions d’écrans avec plusieurs dizaines de versions de systèmes d’exploitations et de navigateurs. Le compromis (oui c’est en fait un compromis) est en général bon sur la très grande majorité des écrans au prix  d’une apparence du coup qui varie d’un écran à l’autre.