2.1 Web responsive

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

Méthodologie Mobile first

installer le « viewport » dans TOUTES les pages Html
coder le media queries dans la feuille de style
tester son site avec outil de développement de Chrome
cocher l’icône « Toggle device toolbar » pour simuler un smartphone

Méthodologie Desktop first

Si on récupère un site déjà codé pour un écran large avec des largeurs fixes en px, en plus des éléments à faire comme pour le « Mobile first », il faut:

toutes les « width » avec des px doivent repasser en « auto »
tous les « display : inline-block » repassent en « block »

Code indispensable

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

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

Media queries à mettre dans le CSS:

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

Forcer la largeur de l’image à s’adapter à la largeur d’un bloc:

img{
    width : 100%;
}

Ressources

Exercices

1_MOBILE_START_ES Télécharger