Ceux qui me suivent sur Twitter m'auront sûrement déjà vu m'étonner de la rapidité et de la facilité d'adaptation d'un site aux smartphones via les média-queries.

Autant le dire, cette technique, que j'utilise d'ailleurs sur ce site dans le skin actuel, a beaucoup d'avantages :

• Si tant est que le code soit bien structuré et bien stylé, c'est rapide, il m'arrive régulièrement d'adapter des sites en une demi-journée de travail, tests compris.
• Cela évite de tout réintégrer, on ne fait qu'adapter une CSS déjà développée.
• Les résultats sont particulièrement bons pour un investissement assez modique : quelqu'un de rompu aux CSS n'aura pas de gros problème à utiliser les média-queries.

Toutefois, en retour d'expérience, je vois quelques mauvaises pratiques qui peuvent agacer et faire perdre du temps dans l'utilisation des média-queries, en voici une liste non-exhaustive.

• Bannissez à tout prix les styles en ligne, ces derniers étant prioritaires sur les CSS externes, point de salut pour votre média-query !
• Si vous pouvez éviter les hacks CSS, autant le faire, car certaines peuvent être pénibles à réadapter via média-query.
• Évitez les sélecteurs trop chargés dans votre CSS principale, style #madiv ul li a span : ce n'est pas limitant en soi, mais juste une perte de temps, il faudra que vous répétiez ces mêmes sélecteurs à rallonge dans votre média-query. Dans ce cas, Firebug sera d'une aide précieuse pour récupérer ces sélecteurs à rallonge.
• Attention aux positionnements absolus un peu trop exotiques : il faut penser à garder un flux qui a du sens !
• Histoire de gagner du temps, je prévois toujours une classe .noprint avec un display:none; pour la version imprimable, l'équivalent pour mobile est envisageable : une classe .nomobile vous permettra de cibler les éléments non utiles. Idéalement, si votre structure est bien faite, vous n'en aurez même pas besoin. Mais sait-on jamais…

Vous ne remarquez rien ? Ces conseils sont déjà valables pour une intégration classique mâtinée de performance, j'espère que je ne fais qu'enfoncer des portes ouvertes avec ces points.

En méthodologie, j'utilise une technique très simple : votre média-query doit se présenter sous une forme ressemblant à :

@media only screen and (max-width:640px){/** ici les propriétés à adapter **/}

Au lieu de ça, utilisez :

@media screen{…}

Et modifiez votre CSS à la volée, vous créerez votre version smartphone directement dans votre navigateur favori. Inutile de vous dire qu'avec le duo Firefox et Firebug, c'est redoutablement efficace.

Si vous avez du mal, mettez un width:480px; à votre body, même si cela est assez imparfait au final (idéalement évitez les dimensions en pixels, préférez les pourcentages), cela vous permettra de voir comment se comporte votre site dans de plus petites dimensions. Même si la largeur du body est fixée en pixels, continuez en pourcentages ou en em, ainsi vous aurez moins de mal à laisser tomber les valeurs en pixels plus tard.

Une fois les propriétés adaptées (exemple, les items de votre bandeau sont empilés au lieu d'être côte à côte, les blocs inutiles sont cachés, etc.), enlevez le @media screen{...}, remettez votre média-query et testez sur un vrai smartphone. En général, il n'y aura pas de très gros souci, que des adaptations.

Avec un petit peu de pratique, tout peut aller très vite… et vous ferez comme moi à chaque adaptation, vous vous surprendrez de la rapidité, de la puissance et de l'efficacité des média-queries !