Jeremy Selier

CSS3 media queries & expérience mobile

Cela fait un moment que je n’avais pas pris le temps d’écrire quelque chose sur ce blog. Tout est allé très vite depuis que je suis arrivé chez Jolicloud. Nous avons développé la nouvelle interface de l’OS sur des technologies web. Nous avons migré tous les users sur cette nouvelle version et nous entrons maintenant dans un cycle de “release early, release often” qui nous permettra d’améliorer l'expérience utilisateur bien plus rapidement que précédemment.

J’ai donc pris quelques minutes pour mettre à jour certaines parties de ce blog. J’ai supprimé les commentaires, principalement parce que Disqus ne me satisfaisait pas et aussi parce qu'il n’y avait pas vraiment de commentaires sur ce blog :). Les conversations ont toujours lieu sur Twitter ou Buzz qui sont parfait pour ça, n’hésitez donc pas à engager la conversation sur ses plate-formes!

Parmis les quelques changements effectués, j’ai mis en place l’utilisation des CSS media queries (spécification W3C). Si vous lisez cet article sur le site (et non sur un agrégateur) vous pourrez constater que le layout s’adapte en fonction de la taille de la fenêtre. Mon design étant hyper-minimaliste, il n’y a que très peu de changements, le but étant surtout de rendre l'expérience utilisateur agréable (et non faire une démonstration incroyable de la technologie). J’ai donc adapté l'expérience pour les très grands écrans en recentrant le blog, et, pour les petits écrans, en réduisant les marges et en enlevant ma photo. J’apprécie énormément l’utilisation de ces technologies qui ne sont pas là juste pour en mettre plein la vue mais bien pour répondre à un besoin.

Pour utiliser les media queries, c’est super simple :

@media screen and (max-width: 400px) {
  /* style pour les écrans avec un viewport inférieur à 400px de large */
}

@media screen and (min-width: 800px) {
  /* style pour les écrans avec un viewport supérieur à 800px de large */
}

Et bien sur, ça se combine :

@media screen and (min-width: 400px) and (max-width: 800px) {
  /* style pour les écrans avec un viewport entre 400px et 800px de large */
}

On peut aussi s’en servir pour appliquer un style différent en fonction de l’orientation :

@media screen and (orientation:portrait) {
  /* style en orientation portrait */
}

@media screen and (orientation:landscape) {
  /* style en orientation paysage */
}

Enfin pour améliorer l'expérience sur mobile, j’ai ajouté la balise meta viewport afin que l’écran s’adapte à la taille du device :

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Et un petit peu de javascript afin qu’à la fin du chargement, la page scroll un tout petit peu afin de cacher la barre d’adresse :

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 50);">

Voilà comment avec quelques petites modifications, on peut grandement améliorer l'expérience d’un visiteur.

PS : Promis je vais essayer de poster plus souvent. J’aimerais notamment vous parler des technologies que l’on utilise chez Jolicloud (HTML5, CSS3, localStorage, etc).

All posts >