Outils CSS pour le responsive design

Licence professionnelle ATC Webmestre

Alexandre NiveauFabrice Maurel

Enseignement des technologies du Web

 

Outils CSS pour le responsive design

Notes de cours

Travail personnel

Objectifs

Les exercices du TP sont très progressifs : le premier permet de se familiariser avec les principaux outils du responsive, le second vise à appliquer ces outils pour faire une mise en page simple, et le troisième est une reproduction d'un site réel.

Exercice 1 — Manipulation des outils pour le responsive

Un corrigé de cet exercice est disponible (lien vers le CSS commenté ; archive).

Créer une page HTML avec un titre et du texte dans un paragraphe, puis modifier le CSS pour remplir les conditions suivantes ; tester en redimensionnant la fenêtre. Attention, cet exercice utilise plusieurs techniques différentes (vues en cours), pas seulement des media queries !

  1. Le paragraphe doit prendre toute la largeur de la fenêtre si celle-ci fait moins de 700 pixels de large. Si elle est plus grande, il doit faire 700 pixels de largeur et être centré horizontalement.
  2. La couleur de fond doit être rouge si la fenêtre fait moins de 800px de large, et bleue sinon.
  3. Le titre doit être en gras si la fenêtre fait moins de 500px de large, en italique si elle fait plus de 1000px de large, et en gras italique entre les deux.
  4. La police du titre doit prendre 10% de la hauteur de la fenêtre, quelle qu'elle soit.
  5. Si la fenêtre fait moins de 320px de largeur, le titre ne doit pas apparaître.

Exercice 2 — Mise en page classique, version responsive

Un corrigé de cet exercice est disponible (lien vers le CSS commenté ; archive).

Récupérer cette archive qui contient une page HTML, une feuille de style base.css déjà écrite qui règle certains détails de présentation (on peut voir le résultat ici), et une feuille de style responsive.css vide, que vous allez devoir remplir pour faire la mise en page et gérer le responsive. Attention, vous n'avez le droit de modifier que responsive.css.

On va partir de la mise en page sur un grand écran, et adapter pour des écrans de plus en plus petits. Au départ, la page doit avoir trois colonnes, comme sur l'image suivante, qui doivent respecter des contraintes spécifiques :

  • le menu de gauche doit faire 180 pixels de largeur,
  • la colonne de droite doit faire 250 pixels de largeur,
  • la colonne centrale doit prendre toute la largeur restante.
Modèle de page à réaliser
En outre, la page doit se comporter de manière responsive en respectant les contraintes suivantes.

  • La page (c'est-à-dire le body) ne doit pas dépasser 1000 pixels de largeur ; si l'écran est plus grand, des marges doivent apparaître autour de l'ensemble.
  • En-dessous de 1000 pixels de largeur, le menu doit être affiché horizontalement, juste sous la bannière.
  • En-dessous de 768 pixels de largeur, la colonne bleue de droite passe sous la partie principale.
  • En-dessous de 400 pixels de largeur, le menu disparaît. Optionnel : faire en sorte que le menu devienne une icône (on pourra prendre la lettre « M » ou une image) tout en haut à gauche de l'écran.

Exercice 3 — Un vrai site adaptatif

Nous allons travailler sur une version simplifiée de la page d'accueil du site World Wildlife Fund. On ne fera en particulier que le haut de la page, en retirant toutes les icônes et les éléments dynamiques (menus, carrousel).

L'archive fournie pour le TP donne les captures d'écran qui doivent servir de modèles, en fonction de la taille d'écran (desktop, tablette et mobile), ainsi que les contenus nécessaires à reproduire les modèles (images, textes et couleurs).

Cet exercice est très long ! Ne vous focalisez pas sur les détails, commencez par travailler sur les grandes lignes.

Il est vivement recommandé de continuer cet exercice en dehors du TP, c'est un très bon moyen de vous familiariser avec la mise en page CSS et ses difficultés, indépendamment de l'aspect responsive. C'est aussi un très bon entraînement à l'examen sur machine.