C’est quoi un site web responsive ?
Pendant le dernier atelier de formation que j’ai dispensé, j’ai vu qu’il y a des doutes par rapport aux sites webs responsives. C’est quoi ça ? Ça sert à quoi ? Comment je fais pour l’avoir ? Dans cet article je vais essayer d’expliquer quelques concepts en relation avec ce sujet.
Due à la prolifération des smartphones et tablettes dans le marché, nous avons une diversité de différents écrans assez large. Nous sommes arrivés à une situation où la vente d’ordinateurs a été largement dépassée par la vente des tablettes.
En France nous voyons que 65% de la population utilise un smartphone et 40% une tablette face aux 82% qui ont un ordinateur. 30% de la population dispose du triple équipement, c’est-à-dire, ordinateur, tablette et smartphone.
http://www.credoc.fr/pdf/Rapp/R333.pdf
Ce panorama oblige à une adaptation des formats web aux nouveaux dispositifs et de leur structure. Surtout si nous voyons que les achats à travers des smartphones ou des tablettes n’arrêtent pas de grandir.
Avec tout ça nous écoutons très souvent des termes comme « site web responsive » ou « responsive web design » mais c’est quoi exactement ? Un site web responsive est une sorte de site capable de s’adapter à n’importe quel dispositif ou écran où un utilisateur va le montrer, depuis les ordinateurs les plus grands jusqu’à des smartphones.
Un site dédié ou responsive design ?
Pour résumer on aura principalement deux options : le responsive design ou le site web dédié. Ces options visent toutes les deux l’utilisation sur des portables.
Le responsive design va régler ou adapter le contenu du site en faisant des changements sur la disposition ou visualisation des divers éléments du site. Le site web dédié est un site web complètement diffèrent du site principal. Il est une version du site « pour les ordinateurs ».
Chaque option a ses avantages et ses contraintes mais la différence la plus visible est la façon qu’on aura pour y accéder. Pour le site responsive nous aurons la même adresse web quel que soit le dispositif (www.exemple.com). Pour un site web dédié nous aurons une adresse pour le site principal (www.exemple.com) et une autre pour le site dédié aux portables (m.exemple.com).
Une aide pour le référencement SEO
Un site web créé avec le responsive web design va améliorer le référencement SEO. Le fait de pouvoir accéder au site quel que soit le dispositif va augmenter le trafic web, ce qui est déjà bien pour Google. En plus, Google préfère le responsive design. On fait c’est l’option recommandée par lui parce que un site responsif va avoir toujours la même URL (pour nous comprendre, la même adresse web ou nom de domaine) et le même code HTML quel que soit le dispositif. Cela fait que la tâche de recherche et indexation faite par Google soit plus simple.
De l’autre côté, un site dédié va avoir, pour chaque URL « d’ordinateur » une URL dédié aux portables. Google devra indexer plusieurs versions du même site web.
Google dit aussi que le fait de n’utiliser qu’une adresse web va faciliter l’interaction des utilisateurs pour partager les contenus.
Comment puis-je faire un site web responsive ?
Si vous maitrisez la programmation et le langage CSS et HTML vous connaissez déjà les CSS3 Media queries. C’est une façon de détecter l’écran du dispositif qui essaie d’accéder au contenu et montrer la version plus optimisée pour lui après une réorganisation.
Si ce dernier paragraphe vous a sonné un peu bizarre, ne vous inquiétez pas parce que il y a d’autres options pour réussir à avoir un site web responsive.
Si vous utilisez WordPress, presque tous les thèmes que vous pouvez installer, de payement ou gratuits, vont être déjà responsive. Alors vous ne devez qu’installer votre thème responsive, l’adapter à votre image d’entreprise, mettre le contenu que vous voulez montrer et c’est tout !
Dans un autre article je vous montrerai quelques outils pour tester votre site depuis des différents écrans.