Lipaonline

Étiquette : Responsive

Responsive design : Etes-vous vraiment "mobile friendly" ?

Il y a quelques années, les intégrateurs HTML devaient redoubler d’ingéniosité pour coder des pages créées par leurs (chers) collègues webdesigners. Entre les différents navigateurs, et les différentes résolutions d’écrans, c’était un vrai casse tête ! Avec la démocratisation d’Internet et l’ADSL, un certain standard c’est dégagé… et patatra, les mobiles et tablettes arrivent, remettant tout à plat, avec des systèmes différents, des tailles d’écrans réduites et aussi, on l’oublie trop souvent, un réseau très aléatoire, car avoir un site en « responsive design » ne suffit pas, il faut aussi penser à l’expérience utilisateur et sa connexion à Internet pas toujours optimum, je que j’appelle le Responsive Behaviour.

Heureusement, il existe de nombreuses solutions, plus ou moins compliquées et onéreuses, adaptées à tout site et budget.

Testez votre site responsive

Avant de mettre en ligne votre site, ou avant d’acheter un template déjà fait, la première chose à faire est de tester vous même le comportement de celui-ci dans différentes configurations. Vous pouvez très simplement redimensionner votre navigateur et voir ce que cela donne, tester sur chaque appareil, mais cela est fastidieux et onéreux, ou alors utiliser l’un des nombreux sites qui permettent de le faire en ligne, comme responsivetest.net ou Responsivator.

Attention aux sidebars !

De nombreux templates se contentent de déplacer (et redimensionner) le contenu de votre site, lorsque vous avez 2 ou 3 colonnes (avec 1 ou 2 sidebars), chaque colonnes s’affichera dans l’ordre l’une en dessous de l’autre, votre contenu sera alors placé après votre sidebar de gauche. La manière la plus simple de résoudre se problème est de n’utiliser uniquement des sidebars à droite. L’autre méthode est d’utiliser les medias queries.

Les medias queries

Les medias queries sont des spécifications technique de CSS3 qui permettent de définir précisément le comportement de votre site pour chaque résolution, et d’adapter le design en fonction du média utilisé (téléphone, tablette, TV …). C’est une technique un peu compliquée pour le profane, si vous voulez en savoir plus ( Les Media Queries CSS3 ), mais heureusement on est pas obligé de tout refaire à chaque fois.

Le cas twitter bootstrap

Pour simplifier la vie des webdesigners, de grandes entreprises ont créée des CSS prêtes à l’emploi, dont le fameux bootstrap de twitter utilisé sur beaucoup de sites. Vérifiez si votre template l’utilise aussi, dans ce cas, vous pourrez utiliser les classes prédéfinies comme .visible-phone ou .hidden-desktop, etc… la documentation est ici : Scaffolding · Bootstrap ( merci à +Raphael  pour ce tips 🙂

Utilisez des images adaptées

Redimensionner vos images au niveau de l’affichage c’est bien, mais si par exemple vous avez un slider avec de belles photos de grandes tailles sur votre Homepage, celle-ci peut facilement atteindre 15Mo de données, ce qui ne va pas être du goût de votre visiteur (en particulier si son forfait 3/4G lui facture les transfert de données !). Dans ce cas, il ne s’agit plus de simple notion de design, mais une programmation au niveau du serveur pour envoyer la bonne image adaptée à la configuration du visiteur. Pour cela on se sert de l’User Agent, qui est le « nom » de votre navigateur.

Cette technique n’est pas à la portée de tous, un service payant propose de tout gérer à votre place : Responsive.io , qui ajoute en plus l’utilisation d’un CDN, ce qui ne peut pas faire de mal à votre site 🙂

Lazy load et système cache

Toujours dans l’optique de réduire la quantité de données transférées de votre site, les systèmes de cache permettent de réduire significativement celle-ci.

Le lazy load permet quant à lui de charger uniquement les images réellement à afficher à l’écran, si votre site en comporte de nombreuses, c’est une solution à appliquer d’urgence !

Les plugins WordPress pour le responsive ?

Comme toujours, à chaque problème sous WordPress, son plugin… à utiliser avec modération ! 😉

Mobble

A la manière des medias queries en CSS, ce plugin ajoute des directives comme  is_iphone() ou is_ios() à WordPress, pour adapter votre site.

Hammy

Lui se concentre sur les images et fourni la version adaptée, c’est en fait la même chose que Responsive.io, gratuit et en interne mais sans CDN.

Lazy Load

Vous trouverez de nombreux plugins WordPress pour faire du lazy load : WordPress Lazy Load , je ne saurai trop lequel vous conseiller, car j’utilise désormais un plugin de cache qui a déjà cette fonctionnalité en interne.

WP Rocket

Le couteau Suisse de l’optimisation de site sous WordPress, WP Rocket est un plugin presque indispensable.