Du web adaptatif...

Vous pouvez vous appuyer sur cet article sur l'adaptation en css3, et sur ces informations plus techniques.
Pensez à bien spécifier le viewport dans vos fichiers html.
Pour cette partie, la Vue adaptative (CTRL+SHIFT+M) proposée par vos navigateurs est votre alliée.

Une première page qui s'adapte aux différents terminaux

Proposer quelques sections en html5 propre, avec plusieurs articles, un header et un footer (pensez à y mettre du contenu).
Sans placement spécifique, proposer des mises en pages différentes sur trois types d'écran (téléphone, tablette, écran classique), en distinguant, quand besoin, les modes portraits et paysages.
Changer, par exemple, les couleurs de fond selon le mode et, surtout, veillez à ce que le contenu reste lisible.
Valider votre page html5.
Valider votre feuille de styles.

Une seconde page.. plus dynamique ?

Vous travaillerez avec ce fichier.

Adapter les images
  • Pour le moment, faire disparaître le menu.
  • Centrer les paquets d'images dans la page.
  • Ajouter une bordure mauve de 2px et une marge intérieure de 0.2em sur les images.
  • Faire que quatre images occupent tout l'espace horizontal.
    • Quel est le problème ?
    • Comment le résoudre ?
  • Définir la taille des images à l'aide d'une variable.
  • Faire que sept images occupent tout l'espace horizontal sur les grands écrans.
  • En mettant le nombre d'images horizontales souhaitées dans des variables, adapter le nombre d'images aux différents écrans.
Un menu adapté
Adapter le menu, en utilisant uniquement inline et block, avec ces différentes configurations :
  • Définir une couleur de fond différente selon le media à l'aide d'une variable.
  • les éléments en largeur quand il y a de la place.
  • les éléments sur deux lignes de six items pour une place réduite
  • les éléments superposés pour des largeurs plus petites
  • le menu remplacé par un bouton en largeur encore plus petite.
    le menu apparaissant au survol du bouton.

La gestion des images

Au delà de l'adaptation de la taille des images à celle du terminal, se pose la question du choix des images en fonction du terminal.
Vous pouvez vous appuyer sur le cours, à partir de la diapositive 21.
Vous utiliserez ce fichier et ces images contemporaines pour travailler.
L'idée est de créer un article par cas testé, de mettre dans le titre h5 la description du cas (avec les valeurs testées) et dans la figcaption de la figure les points de ruptures observés avec la vue responsive de Firefox (CTRL + SHIFT + M).

Des images adaptées au terminal de rendu.
En vous appuyant sur cet article, en gardant l'image 'nulle' par défaut. Créer ces cinq cas de choix des trois images :
  1. pour 500w, 700w et 1000w, sans attribut sizes,
  2. pour 500w, 700w et 1000w, avec sizes="100vw",
  3. pour 500w, 700w et 1000w, avec sizes="50vw",
  4. pour 500w, 700w et 1000w, avec sizes="100vw" et une image de largeur 50%,
  5. pour 1x, 2x et 3x.
Faire varier la largeur de votre page avec la vue responsive et noter, pour chaque exemple, les points de ruptures.
Refaire la manipulation pour chaque ratio de pixels DPR 1 à 3 disponible.
Validez votre fichier.
Conclure (dans le fichier html).

Adapter le choix de l'image
Copier le cas n°1 et ajouter des media queries dans l'attribut sizes ((max-width: 1000px) 500px, (min-width : 1200px) and (max-width: 1300px) 700px, 1000px).
Noter les points de ruptures constatés selon le ratio.

La balise picture.
En s'appuyant cette fois sur ce nouvel article et sur cette documentation, créer un nouvel article utilisant l'attribut media pour choisir les images.
Noter les points de ruptures constatés selon le ratio.
Ajouter un cas avec des 'trous' dans les media queries.
valider.
Conclure (dans le fichier html).

Optimiser les temps de chargement
Pour optimiser encore la gestion des images, regarder et tester l'attribut loading.