johanBleuzen

Le "responsive design" est une technique qui permet de créer des sites avec un design compatible avec tous les appareils puisque le contenu s'adapte à la résolution d'écran. On parle beaucoup de ce type de design grâce aux media queries qui ont permis la multiplication des sites utilisant ce design. Mais tous les navigateurs ne gèrent pas les media queries, voici une technique permettant de gérer tous les navigateurs pour pouvoir les utiliser...

Responsive WebDesign ?

A moins que vous n'ayez pas ouvert votre lecteur de flux depuis l'année dernière, il est impossible d'être passé à coté de la lame de fond que sont les "responsives designs". En effet, avec l'avènement de la mobilité et des navigateurs gérant le HTML5/CSS3, ce type de design s'est imposé très rapidement dans le paysage du web.

En effet, il est très simple aujourd'hui de faire un site compatible avec un iphone (ou tout autre mobileà, un ipad (ou tout autre tablette), un portable et un ordinateur de bureau à l'aide des media queries. Voici un exemple de site adaptant son contenu à la résolution de l'appareil qui est utilisé pour consulter le site :

Si vous voulez voir d'autres exemples, l'excellent site mediaqueri.es propose des captures similaires (d'ailleurs c'est sur ce site que j'ai capturé l'image).

Compatibilité des navigateurs

Selon le site Can I Use, tous les navigateurs gèrent les media queries, sauf IE7 et IE8. Je ne parle pas de IE6, ce mot ne fait plus parti de mon bagage technique. Ce qui veut dire qu'aujourd'hui en Europe, selon StatsCounter, un peu plus de 30% des navigateurs ne sont pas compatibles avec les media queries.

Ne pas supporter les media queries n'est pas un problème puisque si le navigateur ne gère pas les media queries, il affichera tout simplement le site dans sa résolution nominale (la résolution par défaut). Mais il peut arriver que l'on soit obligé de gérer toutes les résolutions même pour les vieux navigateurs...

Retrocompatibilité pour IE7 et IE8

Il existe une certain nombres de librairies JavaScript qui permettent de simuler le comportement des media queries pour les vieux navigateurs. C'est une technique comme une autre pour supporter des fonctionnalités alors que le navigateur ne les gère pas nativement.

Voici trois librairies qui permettent d'utiliser les media queries sur tous les navigateurs :

• adapt.js

  Une librairie très légère (755 octets minifié et encore moins gzippé) qui va modifier le DOM en fonction de la résolution du navigateur. Selon la résolution détecté le script modifie une balise link pour qu'il télécharge la feuille de style de la résolution. Cette solution semble très simple à mettre en place, cependant elle nécessite un gros travail sur la gestion des CSS, puisqu'il va falloir faire un fichier par résolution.

• jquery.mediaqueries.js

  Ce plugin jQuery est un peu plus lourd (3,1 ko minifié), mais implémente un support basique des media queries. En effet, le script détecte les media queries dans le header de la page et gère les différents style à afficher en fonction de la résolution. Cette librairie oblige à faire des feuilles spécifiques à chaque type d'appareil.

• css3-mediaqueries.js

  Cette librairie est beaucoup plus lourde (15 ko minifié), mais elle a une approche totalement différent. Elle va parser les feuilles de style et ajouter les styles en fonction de la résolution du navigateur. Ainsi, il n'y a aucune modification à apporter à vos feuilles de styles, le script va comprendre l'instruction @media directement dans la feuille de style.

Conclusion

Personnellement, le fait que IE7 et IE8 ne supportent pas les media queries ne me pose aucun problème, le fallback me satisfait pleinement. Les deux librairies présentées utilisent une approche totalement différente et leur utilisation va dépendre de ce que vous voulez faire.

Si jamais vous devez absolument supporter IE7 et IE8, alors le choix de la librairie va être un choix difficile, il va falloir choisir entre la performance, le poids de la page et le travail à fournir pour rendre votre site compatible. Personnellement, je pense que je choisirai la troisième librairie, bien que plus lourde, c'est celle qui complexifie le moins le processus de développement des CSS. Et le jour ou IE7 et IE8 n'existeront plus, la transition sera très simple à faire puisqu'il suffira de supprimer la librairie.

Même si l'utilisation des media queries n'est pas idéal en terme de performances, c'est une alternative simple et peu couteuse pour faire un site mobile compatible avec l'ensemble des navigateurs.