Site web responsive : Pourquoi et comment ?

Le responsive c'est quoi ?

Un design adaptatif (ou responsive en anglais) est un principe et une technique de conception de sites internet qui donne au visiteur une expérience de navigation et de lecture optimale quel que soit la taille de l'écran de l'appareil utilisé.

Le design responsive pourquoi ?

Aujourd'hui concevoir un site internet sans lui offrir un design responsive (adaptatif en français) ou une version dédiée au mobiles et tablettes est une erreur grave de conséquence ; la part des visiteurs mobiles ne cessant d'augmenter pour atteindre actuellement environ 50% des visites.

Cette conception adaptative est donc le moyen d'offrir une bonne expérience utilisateur à tous vos visiteurs et clients.

Pour votre visibilité dans les moteurs de recherche : c'est tout aussi important. Voici plusieurs mois que Google indique aux internautes qu'un site est conçu pour les mobiles.

Ce changement a provoqué, chez beaucoup d'éditeurs, une prise de conscience ainsi qu'une inquiétude sur la visibilité pour les recherches mobiles.

Le design adaptatif comment ?

CSS est la première des technologies à mettre en oeuvre pour la conception d'un design responsive. Je déconseillerais une "responsivité" basée sur JavaScript pour des raisons de performances et d'accessibilité. CSS3 est suffisamment "outillé" et mature pour rendre un site mobile friendly.

Aujourd'hui de nouvelles méthodes telles que Flex Box Layout viennent augmenter ses possibilités. Seules les images posent encore quelques soucis d'intégration qui seront rapidement résolus...

Mon avis :

Un design fixe est donc à proscrire sauf si il est prévu une version spécifiquement mobile au site. Un design fluide n'est pas nécessairement adaptatif et peut être tout aussi inadapté à un usage mobile.

J'intègre exclusivement des design responsives depuis plus de trois années et commence à proposer des grilles et certains éléments basés sur Flexbox. Pour les images, l'attribut SRCSET au sein d'une balise IMG convient à la plupart des situations.

Responsive design ou pas ? Il n'y a pas à hésiter !

Par Johan Puisais - Xtendo : création de site internet Poitiers

Pour continuer votre lecture sur la thématique Création de site web

Partager l'article sur :

Tags : Création de site web, Design, Compatibilité mobile,