Adapter un site aux smartphones via média-queries

Adapter un site aux smartphones via média-queries (le 18 juillet 2011)

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 !

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1409

2 commentaires

Posté par Victor Brito le 19/02/2012 à 21:21:58
Pour les tests sur un navigateur de bureau récent, pas besoin de réécrire la règle @media, puisque la requête max-width est comprise : il suffit de redimensionner la fenêtre du navigateur aux bonnes dimensions. D'ailleurs, l'extension Web Developer Toolbar pour Firefox permet d'enregistrer plusieurs dimensions de fenêtre et de redimensionner la fenêtre de Firefox sans avoir à l'effectuer manuellement ; pour ma part, je m'en sers quand je dois vérifier l'affichage sur un écran plus réduit en plus des tests sur smartphone et tablette, car je n'oublie pas qu'on peut consulter une page Web depuis un ordinateur classique aux dimensions d'écran réduites ou dont les fenêtres de navigateur sont réduites, quelles qu'en soient les raisons.
Posté par Nico le 19/02/2012 à 21:41:03
Les cas que j'avais en tête ne se limitent pas à max-size, sinon ce serait trop simple. (sourire) Mon idée est simple : produire le plus rapidement avec le moins de changements possible une version smartphone, tout en limitant le plus possible les tests sur ces derniers.

Avec un peu de pratique, on arrive à une rapidité d'adaptation assez étonnante.

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.