Tendance à la mode depuis plusieurs mois, les Medias queries (ou requêtes de medias) sont une recommandation CSS3 issue du W3C permettant de définir des spécificités d’affichage pour un terminal et/ou une résolution d’écran. Cette technique répond partiellement à la pratique nommée Responsive Web Design.

Il n’est pas rare qu’une Agence Web soit confrontée aux demandes d’un client souhaitant que son site internet se re-dimensionne correctement sur des résolution en 800*600 ou que la page d’accueil de son site s’affiche en intégralité sur l’écran de son ordinateur portable 13”. De fait, les agences connaissent le « casse-tête ergonomique et d’intégration » que représente la production d’un design fonctionnel et agréable sur une résolution large comme sur un mini-portable.

Les Medias queries apportent des réponses à cette problématique en permettant de définir des interfaces différentes suivant le terminal sans toucher au code HTML.

Vue la part de marché croissante que prennent dorénavant les terminaux mobiles, les tablettes (iPad,…), et la démocratisation des écrans large (widescreen), y compris chez les particuliers, la technologie des Medias Queries ne peut plus être ignorées dans le cadre d’un développement web. Pour preuve le nombre croissant de site web l’utilisant (Cf. http://mediaqueri.es) : du pur player dédiée à l’information au site de campagne du Président Américain en vue de sa réélection.

Explication – Détails techniques

La syntaxe d’application des directives propres à chaque terminal/résolution est inclus directement dans la feuille de style du site web. Dans les faits, l’écriture de ces requêtes est relativement simple et explicite.

Exemple pour viser uniquement une sortie imprimante :

<code>

@media print {

#header img { display: none; }

}

</code>

Autre exemple de spécification pour les résolutions type “iPad” en affiche “portrait”

<code>

@media screen and (min-width: 768px) and (max-width: 980px) and (orientation:portrait) {

/* Les propriétés CSS ici */

}

A noter cependant que la compatibilité est encore inégale à ce jour, mais au fil des mois et des nouvelles versions des navigateurs qui s’enchainent à un rythme toujours plus élevé, les Medias Queries sont d’ores et déjà utilisables pour le plus grand nombre : Mozilla Firefox : 3.5+, Internet Explorer : 9+, Google Chrome : 5+, Opera : 10.5+, Opera Mobile : 10+, Opera Mini : 5+, Apple Safari : 4+ et iOS (mobile) 3.2+, Android : 2.1+, Webkit en général.

D’autant que de nombreuses librairies JavaScript existent sur le Web, permettant de rendre compatible cette fonctionnalité avec les navigateurs plus anciens. L’une des plus connue et des plus performante étant response.js.

Limites et contraintes

Le reproche le plus souvent lu sur le Web par les détracteurs de cette technique est le fait que définir des styles css pour chaque résolution revient à faire une intégration par terminal. Et donc de multiplier le temps de production proportionnellement au nombre de support visé.

Ce préjugé est faux : si l’ergonomie du site est pensé à l’avance de telle manière à privilégier les éléments principaux du site web (à lire, l’excellent livre Mobile First qui prône le fait de produire en pensant tout d’abord au support mobile) et si l’intégration CSS est suffisamment bien pensée pour n’avoir à modifier qu’une dizaines de directives CSS, le surcoût peut être marginal eu égard au budget global du projet.

Il n’en reste pas moins qu’il convient d’agir en tenant compte du public visé avec pour objectif de répondre idéalement aux besoins du plus grand nombre.

Cas client 2S3i – Pubble-Gum :  Réseau Océane, réseau national de professionnels artisans menuisiers.

Convaincu de l’utilité des Medias queries, les agences 2S3i et Pubble-Gum ont conjointement mis en application cette technologie pour le compte de leur client Poitou Menuiseries, à l’occasion de  refondre intégralement le site web du réseau Océane.

La bonne connaissance du marché visé et l’analyse de la fréquentation du site de référence nous ont permis entre autres choses de constater 2 points essentiels :

- les utilisateurs du site sont majoritairement des particuliers qui utilisent un ordinateur de bureau fixe

- les utilisateurs nomades sont encore à ce jour extrêmement minoritaires

Par voie de conséquence, les préconisations de l’agence ont été de privilégier 3 résolutions :

1. écran avec une résolution large, supérieure à 1600px

2. écran avec une résolution entre le format 1220px et 1600px

3. écran avec une résolution entre le format tablette et 1220px

Au final, environ 60 lignes de CSS propre à chaque résolution ont été définis.

Conclusion : Le site en l’état permet de répondre spécifiquement aux besoins de la majorité des clients de Poitou Menuiseries. Pour autant, car notamment les habitudes de consommation du WEB évoluent rapidement, il est du devoir de l’agence d’être en capacité de proposer une évolution de ses développements et en particulier de viser à court ou moyen terme la  compatibilité du site sur des terminaux mobiles de type smartphone prioritairement.

En savoir plus sur les Medias queries et la notion de Responsive Web Design : http://www.alsacreations.com/article/lire/930-css3-media-queries.html

Rédaction / Validation : MB (Responsable technique chez 2S3i) / FG (DA & Web-designer chez Pubble-Gum) / CL (Chef de projets chez 2S3i)