Table of Contents

TD6 : Adaptation, du smartphone au mur d'écran

Le problème

Au cours du dernier mois j'ai utilisé plusieurs types d'écrans pour visiter des pages webs:

  1. mon smartphone ~5“
  2. une tablette en spare ~8”
  3. le mac book air d'un collègue 13“
  4. mon mac book pro 15”
  5. l'alienware d'un étudiant 17“
  6. mes écrans fixe 24”
  7. une table Surface SR40 40“

Pour ma seule utilisation, les concepteurs des sites que je dois utiliser quotidiennement pour le travail ou pour mes loisirs devraient déjà prendre en considération 7 formats d'affichage différents.

Mauvaise nouvelle : la plupart ne le font pas. Le résultat ?

Fort heureusement, en bon étudiants modernes ravis de combler cette lacune, vous voilà avide de trouver une solution à ce problème intolérable !

Spoiler : la solution n'est pas de dire ”mon site n'est consultable que sur un écran de 27 pouces, va t'en acheter un.“

Deux mots : media queries.

Le principe des media queries en CSS3

Les media queries ont été introduite par CSS3 et permettent de définir un ensemble de règles de style en fonction de la résolution de l'appareil.

En effet, pour rappel, le CSS est interprété par le navigateur, qui est un logiciel s'exécutant sur une machine cliente. Au moment de l'interprétation effective des règles CSS que vous concevez, la résolution de l'écran qui en affiche le résultat est fixée.

Dans la pratique, il s'agit d'ajouter une condition à un ensemble de règles CSS. Celles-ci ne seront alors prises en compte que si ces conditions sont respectées. Cela vous permet de changer l'apparence de votre site pour vous adapter au support :

Toutefois ces conditions ne portent pas seulement sur la résolution de l'écran, mais peuvent également interroger d'autres critères matériels comme le type d'écran (smartphone, télévision, projecteur…), le nombre de couleurs disponibles, l'orientation de l'écran (portrait ou paysage), etc.

Media queries : mode d'emploi

Il y a globalement deux façons d'utiliser les media queries:

Nous allons voir un peu mieux ces deux méthodes puis nous détaillerons leur syntaxe.

Méthode 1 : une feuille de style par résolution

Il suffit de préciser la condition dans la balise d'inclusion du CSS au sein de l'HTML. La balise <link> dispose en effet d'un attribut “media” qui peut prendre une media query comme valeur, incluant une condition sur le type d'écran et la résolution par exemple. L'exemple minimal : 

<link rel="stylesheet" media="screen and (max-width: 1024px)" href="minipouce.css" />

Il est donc possible de jouer avec les priorités de chargement des fichiers CSS pour avoir un fichier de style par défaut et un style retravaillé pour certains écrans plus petits. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" /> <!-- Pour tout le monde -->
        <link rel="stylesheet" media="screen and (max-width: 1024px)" href="minipouce.css" /> <!-- Pour ceux qui ont une résolution inférieure à 1280px -->
        <title>Media queries</title>
    </head>
...

Méthode 2 : ajouter une garde à une règle CSS

L'autre solution est de préciser directement dans votre feuille de style quelles règles sont spécifique à l'adaptation.

L'exemple suivant cible les écrans de largeur inférieure à 640 pixels grâce à la règle max-width associée à la valeur 640px. 

@media screen and (max-width: 640px) {
  .bloc {
    display:block;
    clear:both;
  }
}

Pour d'autres exemples au besoin : Un ici, quelques uns là, et pourquoi pas ?

Un pas de recul

A Faire :

  • Comparez les avantages et les inconvénients des deux méthodes.
  • Y a-t-il des cas où l'une est impossible à appliquer ?
  • Sont-elles incompatibles ?

Syntaxe

Ces conditions sont des expressions booléennes, elles tolèrent donc l'usage des opérateur et (and), non (not) et seulement (only). Pour obtenir l'équivalent du “ou”, il suffit d'énumérer différentes media queries à la suite, séparées par des virgules : si l'une d'entre elles est valable, alors l'ensemble de la règle sera appliquée.

Il existe de nombreuses règles permettant de construire des media queries et qui peuvent être composable. Voici quelques exemples :

On peut rajouter le préfixe min- ou max- devant la plupart de ces règles. Ainsi, min-width signifie « Largeur minimale », max-height « Hauteur maximale », etc.

A Faire :

Ecrire les media queries et les règles CSS permettant de cibler :
  • les écrans, quand la largeur de la fenêtre fait au maximum 1280px, pour mettre le fond en noir.
  • tous types de supports, quand la largeur de la fenêtre est comprise entre 1024px et 1280px, pour mettre le texte en rouge.
  • tous types d'écrans orientés verticalement, pour mettre les titres en gras.

Les navigateurs mobiles

Afin d'optimiser l'affichage sur les plus petits écrans, les navigateurs mobiles utilisent un affichage dézoomé qui simule une meilleure résolution. Cela s'appelle le viewport. Une media query qui cible le support mobile avec un max-width sur un mobile va donc utiliser la longueur du viewport. Or, celle-ci est inhérente au navigateur lui-même ! Puisque chacun implémente cette simulation par zoom à sa façon.

Quelques exemples :

Ainsi, un Android se comporte comme si la fenêtre faisait 800px de large, tandis que l'utilisateur de Windows phone voit son CSS considérer qu'il en a 1024!

Simple palliatif : max-device-width qui demande la largeur du périphérique (du support) et non du navigateur (le logiciel).

A Faire :

  • Ecrire la media query et les règles CSS permettant d'afficher tous les liens en vert sur mobile et testez.
  • Mettez en évidence la différence de viewport avec un même code exécuté sur Android et sur iPhone (ou windows phone si vous en trouvez un)
  • Théoriquement, quelle autre media query devrait nous éviter ce problème ? Pourquoi ne fonctionne-t-elle pas ?

Et en pratique ?

Une bonne idée est de limiter les menus latéraux sur les petits écrans verticaux voir d'éliminer les menus qui défilent avec le scroll. Cela nécessite de restructurer sa page.

A Faire :

  • Concevez ou reprenez une page web disposant d'un menu visible à tout instant et d'une colonne à gauche et à droite présentant respectivement le menu de la page et les partenaires du site.
  • Ecrivez le CSS nécessaire à l'adaptation de cette page à une navigation sur mobile. Testez.
  • Quels changements proposez-vous pour une adaptation vers un écran géant 40” ? Implémentez-les dans votre CSS.

Je dois savoir

Je dois savoir :

  • Les media queries permettent d'appliquer différents styles CSS en fonction de certaines conditions.
  • Il existe de nombreux paramètres booléens à disposition : nombre de couleurs, résolution de l'écran, orientation…
  • On utilise a directive @media d'une ou plusieurs conditions, le style CSS qui suit sera appliqué si elles sont remplies.
  • Les navigateurs mobiles simulent une largeur d'écran : on appelle cela le viewport.
  • On peut cibler les smartphones grâce à une règle basée sur le nombre réel de pixels affichés à l'écran : max-device-width.