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

actualité à la une

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

17 avr. 2013 - par Jérémy - rubrique web

Les outils de navigation sur internet se multiplient, les smartphones et les tablettes ont changé les habitudes des internautes. Il devient important d’avoir un site internet qui s’adapte en fonction du terminal mobile utilisé. Chaque mois, plus de 80% des internautes tentent de consulter un site internet sur leur mobile ou leur tablette, et Tim Cook, le PDG d’Apple, annonçait en 2012 que les ventes de tablettes dépasseraient rapidement les ventes d’ordinateurs. Dans cette perspective, le responsive design s'inscrit dans le futur très proche.

ResponsiveDesign01

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.

Sources : Wikipedia, Presse-Citron, WebDesign et le livre Responsive Web Design d'Ethan Marcotte.
Crédit photo : Depositphotos 

 
Haut de page
 
 

contactez-nous

Idéquation - 26, rue de Beaucaire - 30127 Bellegarde
Tél. 04 66 01 10 00 - Fax 04 13 33 73 45

contact@idequation.net »

Prénom
Nom
E-mail
Entreprise
Tél.
Objet
Message
Haut de page