Responsive Design et Grid Layout

Master Internet, Données et Connaissances

Alexandre Niveau

Enseignement des technologies du Web

 

Responsive Design et Grid Layout

Notes de cours

Travail personnel

Objectifs

Dans ce TP, on expérimente Grid Layout et les images responsive.

Exercice 1 — CSS Grid Garden #

Essayer le petit jeu CSS Grid Garden, qui vise à découvrir ou mieux comprendre certaines propriétés du module Grid Layout. C'est très clair, bien fait, et en français… mais ça ne couvre qu'une partie des possibilités de Grid Layout.

Bonne chance !

Exercice 2 — Galerie d’images responsive #

On vous donne des images de peintures (issues de la National Gallery of Art, USA) dans cette archive. On vous donne ces images avec diverses résolutions et une version recoupée (400x400). Attention, les largeurs sont diverses (la commande identify peut vous être utile).

Utiliser toutes ces images pour faire une galerie (très simple…) qui soit responsive :

  • Au-dessus de 1200 pixels de large, faire apparaître trois images par ligne.
  • Au-dessus de 900 pixels de large, faire apparaître deux images par ligne.
  • Entre 400 et 900 pixels de large, faire apparaître une seule image par ligne.
  • En-dessous de 400 pixels de large, faire apparaître pour chaque image seulement un détail de la peinture.

On fera bien sûr en sorte d'optimiser la taille des images en fonction de la taille de l'écran.

Exercice 3 — Application directe de Grid Layout #

On va reproduire la page Helbak, déjà faite dans un précédent TP, mais cette fois en utilisant le module grid.

Exemple de page à réaliser

Récupérer cette archive, qui contient une page HTML, une feuille de style base.css qui règle tous les détails de présentation qui ne sont pas de la mise en page (on peut voir le résultat ici), et une feuille de style grid.css vide, qui va servir à régler la mise en page.

Compléter cette feuille de style en utilisant Grid Layout pour que la page ressemble au modèle ci-dessus.

Exercice 4 — Mise en page classique responsive, version grid #

On reprend l'exercice de mise en page responsive, mais cette fois en utilisant Grid Layout.

Récupérer cette archive, qui contient une page HTML, une feuille de style base.css qui règle certains détails de présentation (on peut voir le résultat ici), et une feuille de style grid.css vide, qui va servir à régler la mise en page.

En utilisant notamment le module Grid Layout, compléter cette feuille de style pour que la page respecte les contraintes suivantes. (NB : les propriétés de Grid ne suffisent pas forcément pour toutes les questions ; réfléchissez et choisissez le meilleur outil pour chaque tâche.)

  1. Au-dessus de 60 rem de largeur, la page doit ressembler à l'image suivante. Le menu doit être à gauche et faire 12 rem de large, l'encadré d'information à droite 15 rem de large, et la colonne du milieu doit prendre toute la largeur restante (sans utiliser calc !). De plus, le pied de page doit être en bas de la page, même si le contenu est trop court (sans utiliser position:absolute !).
    Exemple de page à réaliser
  2. En-dessous de 60 rem de largeur, le menu doit être affiché horizontalement, juste sous la bannière.
  3. En-dessous de 50 rem de largeur, l'encadré passe sous la partie principale.
  4. En-dessous de 25 rem de largeur, le menu disparaît et devient une icône (on pourra prendre la lettre « M ») tout en haut à gauche de l'écran.