Le responsive « responsive design »

Pour ceux qui ne connaissent pas, le responsive design, c’est l’idée qu’un site web doit être adapté pour les différentes tailles d’écran, pour être consulté sur un Netbook, un PC avec un écran très très très grand, un Mac avec un écran encore plus grand que le PC, un iPhone, un smartphone sous Android, etc…bref, le maximum de résolutions d’écrans. Concrètement, je vous conseille de jeter un oeil sur Amazon.com, François Ziserman a fait un billet à ce sujet, qui a compté 4 adaptations différentes à ce jour (+ au moins une pour les smartphones).

Amazon et le responsive design

On peut lire sur différents blogs que le responsive design est important, « pourquoi le responsive design VOTREPHRASE ? », « comment le responsive design VOTREPHRASE ? », « XX raisons pour faire du responsive design », « infographie pas-du-tout-vérifiée sur le responsive design », … Des articles pas du tout racoleurs. J’avais envie de mettre mon grain de sel, je trouve qu’aujourd’hui, on en fait un peu trop sur le sujet.

Edit du 21/04/2015 :

Cet article a initialement été écrit en 2013, à un moment où le trafic des mobiles et tablettes était moindre pour certains sites. Il s’est passé beaucoup de choses depuis, notamment une mise à jour de l’algorithme de Google qui « favorise » ou du moins d’affiche la compatibilité mobile des sites dans ses résultats de recherche. Aujourd’hui, on ne peut que conseiller la mise en place d’une version responsive ou mobile.

A quoi sert le responsive design concrètement ?

L’idée est venue du constat qu’aujourd’hui, on a à la fois des écrans de plus en plus grands pour les ordinateurs de bureaux, et de plus en plus petits avec les netbooks et les smartphones. Le terme « responsive » fait un peu peur, comme si les intégrateurs qui n’en feraient pas n’étaient pas responsables, de quoi les faire culpabiliser, et faire peur au client… (oui bon j’exagère un peu).

Du côté client, cela coûte forcément plus cher, car cela équivaut à créer un autre site, ou du moins une autre mise en forme via les styles CSS. Idéalement, il faudrait d’ailleurs proposer des contenus différents selon les différentes supportés, car on suppose qu’on a pas le même comportement et les mêmes attentes si on navigue depuis un ordinateur de bureau ou depuis un smartphone. Du côté intégration, si on veut bien faire les choses, il faut vérifier pour chacune des résolutions que le site est compatible avec les navigateurs visés, etc… Vous l’aurez compris, c’est un travail qui peut vite être assez lourd (nombre de navigateurs à tester * nombre de résolutions différentes, sauf pour les versions smartphones pour le moment). Je ne suis pas « contre » le responsive design, qui a de très bons côtés assez évidents.

Il n’y a rien de plus frustrant que de se retrouver sur un site depuis son iPhone et voir que le site n’est pas adapté du tout, que ce soit avec une résolution trop importantes, des images trop petites, du Flash pour les iPhone/iPad, … mais : est-ce que chaque site doit être accessible depuis un smartphone ? Pour moi, très clairement : non. Avant de vouloir un thème adapté aux smartphones, posez-vous la question : est-ce que mes clients vont accéder à mon site depuis leur smartphone ? De la même façon, avant de vouloir un site optimisé pour les versions ancestrales d’Internet Explorer (j’entends parler de Netscape au loin), posez vous aussi la question : est-ce que mes clients utilisent des Mac ou des PC ? peut être les deux ? Est-ce que ce sont des personnes âgées qui utilisent encore IE 6, 7, ou 8, ou des technophiles qui utilisent la dernière version de Firefox ou Google Chrome ? Est-ce que mes clients sont des graphistes ou des consultants sur Mac ou de vrais gens ?

Faut-il absolument une version mobile et supporter le maximum de résolutions ?

Je le dis clairement, NON. Vous l’avez compris, faire du responsive design à toutes les sauces, c’est ne pas connaitre, et ne pas vouloir connaitre ses internautes. C’est comme si on vous donnait tous les médicaments possibles pour une maladie, ou que vous faisiez faire votre site dans toutes les langues du monde « au cas où » un internaute Russe se connectait à votre site. Vous devez optimiser votre site uniquement pour les résolutions qui ont un intérêt.

OK, mais comment je fais pour savoir quelles résolutions/navigateurs sont intéressants pour mon site ? Allons plus loin, comment je fais pour savoir tout ça alors que mon site n’est même pas encore réalisé ?

Voici quelques pistes :

W3Schools / W3 Counter :

W3Schools est un site qui d’aide en développement et intégration web. Mais ici, on va plutôt s’intéresser aux pages de statistiques, régulièrement mises à jour. L’intérêt, ici, c’est de voir les résolutions d’écran des internautes dans l’ensemble, donc pas de statistiques précises selon les tranches d’âges, pays, …
Statistiques sur les résolutions d’écran (+ à voir sur W3 Counter, même si on voit que la France n’est pas dans les statistiques)
Statistiques sur les navigateurs

Vos concurrents :

Vos concurrents peuvent aussi vous aider dans cette démarche :) Même s’ils peuvent aussi faire des erreurs, cela peut vous donner une idée de l’existant. Attention, ça ne veut pas dire que vos concurrents ont pensé à la résolution d’écran à adopter, du coup à prendre avec des pincettes. Note : il existe peut être des outils pour connaitre la/les résolutions d’écrans disponibles pour un site, si vous avez quelques pistes, n’hésitez pas à me faire signe dans les commentaires ;)

Vos statistiques :

A faire uniquement une fois que votre site est en production et bien installé. En dehors des statistiques de navigation, Google Analytics vous donnera des informations intéressantes sur vos visiteurs, à savoir leurs résolutions d’écran, système d’exploitation, navigateurs, … C’est là que vous verrez réellement l’interêt de travailler sur des résolutions plutôt que d’autres. Les résultats ne seront pas toujours parlants sur les grandes résolutions, mais cela vous donnera des indices sur les résolutions plus basses et les smartphones.

Responsive design avec Google Analytics

Bref, faire du responsive design non, mais plutôt du responsive responsive design.

Pour aller plus loin…

Certains CMS (WordPress, Prestashop, Magento, …) proposent d’ores et déjà des modules de versions mobiles notamment. Dans certaines plate-formes, ces fonctionnalités sont natives, mais dans l’idéal il y a forcément des adaptations à faire.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :