Responsive design : pour un affichage optimal de votre site sur ordinateur, tablette et smartphone

C’est quoi le Responsive Design ?
C’est la solution qui permet d'adapter le contenu d’un site au format de lecture utilisé. Sur un écran de haute résolution vous profiterez d’un affichage adapté à ce format, le site se dessinera d’une autre façon sur une tablette et sur un smartphone, seuls les contenus les plus intéressants resteront affichés sur la page. Le responsive design fait appel à différents principes et technologies, dont l’extension Média queries qui permet d’adapter la mise en page à l’environnement de consultation. Les colonnes et les images s’ajustent automatiquement, elles se déplacent et se redimensionnent pour s’adapter à la résolution de l'écran utilisé, et pour les petites tailles, seul le contenu le plus intéressant reste affiché sur la page. Il n'est plus nécessaire de zoomer, l'ergonomie est optimale sans altérer la qualité de l'information.

Des avantages certains
Avec quelques adaptations des feuilles de styles le Responsive Design évite de créer un site dédié à chaque support de lecture, c’est donc une solution beaucoup moins coûteuse. Il n’y a qu’un site à maintenir et une seule URL à communiquer lors des campagnes de communication.

Le temps de chargement s'allonge
Quel que soit le support de lecture utilisé, ordinateur, tablette ou smartphone, tous les éléments constituant la page doivent être chargés. Les performances s'en trouvent donc altérées sur un mobile.

Vérifier l’affichage de votre site internet sur ces terminaux
Vous pouvez essayer de façon manuelle en redimensionnant la taille de votre navigateur et vous verrez votre site internet se transformer... ou pas. Sinon, pour vérifier l’affichage de votre site internet sur les différents smartphones et tablettes vous pouvez utiliser un service web qui intègre un émulateur. Notre choix se tourne vers responsinator pour son fonctionnement simple et rapide. Tapez l’URL du site internet dans la barre en haut à gauche de la page et vous aurez un aperçu de votre site sur l’ensemble des terminaux mobiles.

A vous d’essayer
Nous vous suggérons de tester l’affichage du site du WWF qui propose le Responsive Design. Si vous réduisez la taille de la fenêtre de votre navigateur vous pourrez constater que progressivement le site s’adapte automatiquement. C'est bluffant.