olivier evrard

*********************
*********************

Cours n°2.1

Un site web pour smartphone

Les résolutions d’écran

Cette information est importante lorsque vous construisez un design : comment votre site doit-il s’afficher en fonction des différentes résolutions d’écran ? Si vous avez un écran large, vous risquez d’oublier que certaines personnes naviguent avec des écrans plus petits. Et je ne vous parle même pas des navigateurs des smartphones, qui sont encore moins larges.

Les media queries

C’est là que les media queries entrent en jeu. Ce sont des règles à appliquer pour changer le design d’un site en fonction des caractéristiques de l’écran ! Grâce à cette technique, nous pourrons créer un design qui s’adapte automatiquement à l’écran de chaque visiteur !

Mobile first !

C’est une méthodologie de travail qui consiste à travailler d’abord le CSS pour le mobile et de l’adapter ensuite vers les écrans plus larges (tablette, bureau). Les medias queries se mettront donc en place à partir de la tablette avec la déclaration par exemple de min-width:500px

Contenu du cours

  • introduction théorique sur les medias queries
  • réaliser un site simple pour mobiles
  • réaliser un site complexe pour mobiles
  • tester son site sur son propre mobile avec Mamp

Code

À mettre dans le <head> de l’HTML pour afficher à l’échelle 1/1 sur les smartphones:

<meta name="viewport" content="width=device-width" />

À mettre dans le CSS:

@media all and (min-width: 500px){
    /* Vos règles CSS pour les écrans plus grand que 500px ici */
}

Ressources

*********************