Polices CSS — Sensibilisation à l’ergonomie

Licence professionnelle ATC Webmestre

Alexandre NiveauFabrice Maurel

Enseignement des technologies du Web

 

Polices CSS — Sensibilisation à l’ergonomie

Notes de cours

  • Polices en CSS
    • Polices du système et font stack
    • Utiliser n’importe quelle police avec @font-face
    • Plusieurs « styles » pour la même police
    • Inconvénients des polices sur le web
  • Sensibilisation à l’ergonomie
    • Notions d’ergonomie et d’utilisabilité
    • « Lois » et concepts utiles pour améliorer l’utilisabilité
    • 12 règles à prendre en compte pour optimiser l’ergonomie

Travail personnel

Objectifs

Le premier exercice vous fait manipuler la syntaxe de base des polices CSS. Le second est plus inhabituel : il vise à vous faire prendre conscience de certains pièges (plus ou moins) classiques de CSS.

Exercice 1 — Utilisation de polices

Une proposition de corrigé est disponible (lien vers le CSS commenté ; archive du code).

L'objectif de l'exercice est d'utiliser des polices en CSS sur une page HTML. On va reproduire le modèle suivant :

Capture d'écran de la page
Capture d'écran de la page

Cette archive contient le HTML, ainsi que les fichiers WOFF des polices « Know Your Product » (utilisée pour le titre) et Archistico (utilisée pour le texte).

  1. Écrivez un fichier screen.css pour reproduire le modèle. Remarque : la version « grasse » d'Archistico est assez particulière. Utilisez une grande taille de police (par ex. 3em) pour mieux voir ce qui se passe, et n'hésitez pas à zoomer (selon les OS et les navigateurs, la différence peut être plus ou moins visible).
  2. Assurez-vous que vous n'avez pas utilisé de sélecteur d'élément strong dans votre CSS. Si vous en avez utilisé un, c'est très certainement que vous n'avez pas tout compris au cours ! Si les polices ne sont pas téléchargées, l'internaute doit voir la page avec les styles par défaut habituels.

Exercice 2 — Pièges classiques en CSS

Un corrigé de cet exercice est disponible ; les points importants seront présentés lors d'un prochain cours.

Chaque question ci-dessous est liée à une page HTML avec un peu de CSS dedans.

L'idée est que, pour chaque page, le CSS donné semble devoir fonctionner, mais ne fonctionne pourtant pas.

Le premier objectif de chaque question est de réussir à faire fonctionner le CSS comme désiré, sans modifier le HTML ; le deuxième objectif, plus important mais plus difficile, est de comprendre pourquoi ça ne marche pas comme on l'attendrait.

Essayez de chercher par vous-même ! Si on vous donne la réponse, même si vous avez l'impression d'avoir compris, vous n'aurez pas appris grand'chose.

Les questions sont rangées par ordre (plus ou moins) croissant de difficulté. Les dernières ne sont vraiment pas évidentes ; vous pouvez voir ça comme un challenge, mais ne perdez pas non plus trop de temps ! Cela dit, toutes les réponses sont techniquement trouvables. Elles seront données lors d'un prochain cours.

Toutes les pages sont disponibles dans cette archive.

  1. Pourquoi les items ne tiennent-ils pas sur une seule ligne ?
  2. Pourquoi les blocs ne sont-ils pas côte-à-côte ?
  3. Pourquoi les items ne changent-ils pas de couleur au survol ?
  4. Pourquoi le bloc ne fait-il pas 50% de la hauteur de son parent ?
  5. Pourquoi le header n'est-il pas collé en haut, alors que ses marges et celles du body sont à 0 ?
  6. Pourquoi le titre est-il souligné, malgré le text-decoration:none dans le header ?
  7. Pourquoi l'image de fond du body est-elle plus large que le body lui-même, qui est fixé à 800 pixels ?
  8. Pourquoi y a-t-il de l'espace vertical sous les items ?
  9. Pourquoi ne puis-je pas cliquer sur le lien ?
  10. Pourquoi la première ligne du paragraphe ne change-t-elle pas de couleur au survol du paragraphe ?