TP09 : Design adaptatif

Licence Humanités Numériques 1e année

Jean-Marc Lecarpentier — Antoine Widlocher

Enseignement des technologies du Web

 

Travail personnel

Exercice 1 — Découverte des outils responsive #

Copier/coller le code HTML fourni ici pour créer une page HTML. Compléter le CSS (dans la balise style pour remplir les conditions suivantes et 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 titre doit être en rouge si la fenêtre fait moins de 800px de large, en vert si elle fait plus de 1200px de large, et en jaune entre les deux.
  3. Si la fenêtre fait moins de 600px de largeur, le titre ne doit pas apparaître.
  4. Le paragraphe doit respecter les contraintes suivantes. Attention, il s'agit ici d'un piège, nul besoin de media query !
    • 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.

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