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 (ou avec l'outil « responsive design mode » de Firefox).

  1. La couleur de fond doit être rouge si la fenêtre fait moins de 800px de large, et bleue sinon.
  2. Le paragraphe doit prendre toute la largeur si la fenêtre fait moins de 700px, et 50% de la largeur 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 et une feuille de style vide. Créer le CSS permettant de l'afficher avec une mise en page classique, comme sur l'image suivante, avec pour contrainte que le menu de gauche doit faire 180 pixels de largeur, la colonne de droite 250 pixels de largeur, et la colonne du milieu doit prendre toute la largeur restante.

Modèle de page à réaliser
Rendre ensuite votre page responsive en respectant les contraintes suivantes :

  • Le contenu (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.
  • 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, l'encadré passe sous la partie principale.
  • En-dessous de 400 pixels de largeur, le menu disparaît et devient une icône (on pourra prendre la lettre « M ») 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.