Mobilisons le web avec les Media Queries

Quel titre étrange me direz-vous, c’est en effet avec ce jeu de mot plus que moyen que je vais évoquer d’une des évolutions les plus intéressantes du HTML5 et des CSS3 à mes yeux.

En effet, le gros problème du web actuel est qu’il existe plus ou moins deux types de sites internet, le site développé pour « ordinateur » classiques, avec une résolution d’écran élevée et de nombreux éléments affichés avec une mise en page riche, et le site développé pour les « mobiles », adaptés à une utilisation sur un petit écran tactile (ou non d’ailleurs) avec une interface limitée qui se rapproche plus de celle d’une application.

Cette séparation s’explique assez aisément par l’arrivée tardive de sites adaptés au mobile, cela ne fait au mieux que 3 ou 4 ans en effet que l’industrie a prit en compte ces supports. Seulement adapter un site au mobile ne se fait pas comme ça juste en le disant. Beaucoup ont ainsi totalement re-développé une version adaptée au mobile qui évolue indépendamment du site original.

Si on peut penser que cette adaptation spécifique est la mieux pensée pour cibler ces périphériques, ce n’est malheureusement pas tout le temps le cas. Cette adaptation fait déjà souvent l’erreur de copier le fonctionnement des applications iPhone, ce qui provoque un rendu et un fonctionnement totalement décalé sur un autre appareil, mais en plus elle ne prends clairement pas en compte les différentes résolutions d’écran potentielles en ciblant un ou deux appareils uniquement à l’origine.

Autre problème également, celui de la détection de l’appareil. En effet pour afficher le site mobile ou non, les sites doivent avoir une technique qui leur permet de détecter si l’appareil qui affiche la page est un appareil mobile ou non… Et ces méthodes ne sont pas infaillibles et surtout pas pensées pour l’avenir ou de nouveaux modèles ou appareils vont apparaître.

Le HTML5 avec le CSS3 apportent ainsi une réponse simple et efficace à cette problématique : les media queries.

En quoi cela consiste ? Essayons d’expliquer ça simplement.

Une page HTML moderne se doit de ne contenir QUE l’information du contenu, les données à afficher donc, que cela soit la navigation, le corps de la page ou tout autre élément annexe. La mise en page en elle même doit être faite via les CSS qui permettent de positionner les éléments HTML les uns par rapport aux autres. Tout ceci n’est pas nouveau, mais il est bon de le rappeler, l’époque ou l’on construisait les interfaces avec des tableaux HTML est révolue et il faut oublier cette technique dépassée !

Seul problème, jusque là, une seule mise en page CSS était possible pour une page, enfin… Exception faite des méthodes de rendus adaptés aux imprimantes ou autres qui existaient déjà. Mais cette technique avait de trop nombreuses limitations pour l’utiliser réellement comme ce qu’il est possible de faire désormais.

Les media queries apportent énormément de possibilités et de souplesses aux CSS, permettant de prendre en compte la résolution, l’orientation, le ratio et tout un tas d’autres paramètres de l’appareil qui affiche la page. Il permet de créer différents rendu d’une même page au sein d’un même fichier CSS ! Il ne reste donc plus qu’à adapter ce rendu en fonction des gammes d’appareils que l’on cible et à modifier comme bon nous semble le rendu pour le rendre idéal à chaque appareil.

Mieux encore, comme les media queries sont intégrées au CSS, elles sont chargées directement et l’affichage s’adapte à l’écran sans avoir besoin de se re-charger. Ainsi, un site mobile peut très bien avoir une interface différente en mode portrait ou paysage sans avoir à charger quoi que ce soit de plus, rendant le changement immédiat et transparent.

Il est même possible de charger des éléments visuels différents en fonction de la taille de l’écran, ainsi charger une photo de base résolution pour un mobile et une autre de grande résolution sur ordinateur.

Autre force des media queries, elles s’adaptent virtuellement à n’importe quel appareil actuel ou futur ! En utilisant intelligemment les éléments de ratio et résolutions, il est possible de garantir que même des appareils mobiles à grande résolution (comme le Galaxy Nexus) affichent directement une vue mobile. Cela demande juste un peu plus de travail en amont afin de penser à chaque interface souhaitée.

Maintenant que les présentations sont faites, je vous laisse admirer la chose et vous renseigner :

• http://mediaqueri.es/ : un site qui référence des milliers de sites qui utilisent les media queries, parfait pour trouver des exemples d’utilisations !
• http://www.w3.org/TR/css3-mediaqueries/ : la documentation officielle du W3C.
• http://www.alsacreations.com/article/lire/930-css3-media-queries.html : excellente présentation par Alsa Creation.

Vous me direz alors… Mais pourquoi ce site n’utilise pas ces media queries ? Excellente question je dirais, à laquelle je répondrais, par manque de temps principalement. J’utilise un thème gratuit que j’ai légèrement adapté mais que je n’ai pas développé, un jour peut être je ferais ma propre interface… Et j’utilise également l’excellent plugin WordPress WPTouch qui permet de faire un rendu mobile, même si il rentre dans le cadre de ce que je critique plus haut ! Si la motivation et le temps arrivent, je changerais tout ça à l’avenir… Cela ne m’empêche pas pour autant de prêcher la bonne parole 🙂