Infographie : le responsive en version simplifiée

Le lundi, c’est infographie !

Pour les personnes qui ont déjà lu mes articles, vous avez pu percevoir que je préconise souvent le Responsive Web Design, également connu sous le nom de site adaptatif.

L’infographie du jour parle de Responsive et démarre avec un chiffre-clé parlant : 75% des consommateurs préfèrent les sites qui sont adaptés aux terminaux mobiles.

Elle explique ensuite ce qu’est le Responsive. Pour faire simple, le rôle d’un site Responsive est de détecter le support de l’internaute (ordinateur fixe, ordinateur portable, tablette, Smartphone, etc.) ainsi que de son orientation (verticale ou horizontale) afin de lui afficher le même site, mais de manière adaptée, pour qu’il ait une expérience optimisée.

Puis elle donne des exemples sur les composants du Responsive :
– Utilisation de grilles fluides (dimensionnement relatif des différents blocs de la page).
– Utilisation des Media queries dans le code.
– Utilisation d’images flexibles (redimensionnement en unité relative également).

Elle continue en comparant un site mobile à un site responsive :
– Site mobile : le contenu et le visuel sont différents du site desktop; l’URL du site mobile est différente de celle du site Web; le temps de chargement est réduit car la quantité d’informations est également réduite, etc.
– Site Responsive : une seule URL; suivi des statistiques unique; méthode qui n’est pas forcément adaptée si la quantité d’informations est trop importante car l’utilisateur risque de s’y perdre.

Enfin, elle termine en citant 3 avantages qu’ont les sites en Responsive :
– Une information identique à celle du site Web et un temps de chargement rapide (à condition bien sûr que le site ne propose pas des centaines de pages).
– La compatibilité avec tous les supports mobiles, sans aucune contrainte liée au device ou au système d’exploitation.
– La mutualisation des coûts de la campagne de référencement puisqu’il n’y a qu’une seule URL.

BREF, une infographie sur le Responsive Web Design qui vient compléter les points forts que j’avais déjà exposés dans d’autres articles.

Accès à l’infographie sur le site Pinterest.
Accès à mon compte Pinterest.

 

Le responsive en version simplifiée

Le responsive en version simplifiée

Publicités

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