Pas terrible ; mais presque
Ça fait déjà quelques temps que les ténors en parlent ; mais la tendance est là, les utilisateurs surfant sur leur smartphones sont de plus en plus nombreux. La faute aux navigateurs utilisés dans ces plateformes qui sont de plus en plus performants. Il faut donc absolument les prendre en considération dans la conception de sites qui sont susceptibles d’être massivement utilisés via des plateformes mobiles.
Dans cette optique, Paul Irish à bien synthétisé la démarche dans un post sur Google+. Je vous en livre ici une traduction faites par votre serviteur (donc à prendre avec les réserve d’usage, hum).
- Penser mobile en premier : commencez par la résolution la plus faible
- Gardez en mémoire que beaucoup de mobiles ont une résolution inférieure à 320px
- L’absence de media-query est la première media-query (Bryan Sieger)
- Laisser la grille fluide faire le plus gros du travail. Ne cherchez pas à faire autant de mq qu’il y a de pixels à l’écran…
- Utilisez plutôt min-width que max-width (toujours dans l’optique mobile en premier)
- Soyez économes en médias, commencez par de petites images, et changez-les pour des résolution plus importantes, cf. http://www.cloudfour.com/responsive-imgs-part-2/
- Ne jouez pas trop avec le DOM. La vitesse doit être votre objectif principal et (trop) manipuler les choses avec JS risque de plomber vos temps de réponses.
- Ne faites pas 100 galipettes pour tenter d’améliorer un tas de merde. Votre design doit être suffisamment intelligent pour grandir sans avoir à faire des versions alternatives du site.
- Ne masquez pas de contenu pour les mobiles, tout autant que les autres ils aiment avoir accès à l’info.
- Gardez les zones d’action grandes, concevez pour les méthodes de saisie mobile car les utilisateur de navigateur de bureau pourront aussi en profiter. Utilisez les propriétés des formulaires du HTML5 plutôt que des artifices JS.