Outils CSS pour le design adaptatif — Compléments sélecteurs CSS

Licence Informatique, semestre 6

Alexandre NiveauJean-Marc Lecarpentier — Judith Jeyafreeda Andrew

Enseignement des technologies du Web

 

Outils CSS pour le design adaptatif — Compléments sélecteurs CSS

Notes de cours

Travail personnel

Objectifs

Ce TP contient des exercices de CSS sur le design responsive : le premier vous fait manipuler les outils de manière directe, le second est une application un peu plus pratique, et le dernier est une reproduction d'un véritable site responsive.

Exercice 1 — Manipulation des outils pour le responsive #

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. La couleur de fond doit être rouge si la fenêtre fait moins de 800px de large, et bleue sinon.
  2. Le paragraphe doit respecter les contraintes suivantes :
    • il doit faire 700 pixels de largeur et être centré horizontalement
    • mais si la fenêtre est trop étroite (moins de 700 pixels), il ne doit pas dépasser : les ascenseurs horizontaux sont à éviter à tout prix ! Sa largeur doit donc être celle de la fenêtre.
  3. Le titre doit être en gras (non italique) si la fenêtre fait moins de 500px de large, en italique (non gras) 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 400px de largeur, le titre ne doit pas apparaître.

Exercice 2 — Mise en page classique, version responsive #

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-layout.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-layout.css.

NB : le contenu de la page est le même que dans un précédent exercice, mais le HTML est structuré différemment (il y a notamment une division de classe wrapper autour des trois zones centrales). Prenez le temps de regarder comment la page est organisée dans le code.

On va partir de la mise en page sur un grand écran, et adapter pour des écrans de plus en plus petits.

Mise en page par défaut (grand écran)

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 20em pixels de largeur,
  • la colonne centrale doit prendre toute la largeur restante.
Modèle de page à réaliser

Une nouvelle propriété sur les grilles CSS

Avant de passer à la suite, expérimentez la propriété CSS suivante :

grid-column: span 2

Appliquée à un élément situé dans une grille CSS, elle a pour effet que l'élément s'étend sur 2 colonnes au lieu d'une. Essayez sur divers éléments.

Mise en page sur les écrans plus petits

À présent, modifier votre CSS afin que la page se comporte 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, la colonne rose de droite passe sous les deux autres, comme sur l'image suivante.
    Modèle de page dézoomée
  • En-dessous de 768 pixels de largeur, le menu doit être affiché horizontalement, juste sous la bannière.
  • 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.
  • Optionnel : dans tous les cas, le pied de page doit être en bas de la fenêtre, même si le contenu est trop court, comme sur l'image suivante (tester en dézoomant). Il doit cependant toujours suivre le contenu (pas de position:fixed).
Modèle de page dézoomée
Résultat obtenu en dézoomant au maximum : les colonnes centrales s'allongent et le pied de page reste en bas

Exercice 3 (optionnel) — 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.