Acte 1
Vous êtes à la tête d'un nouveau projet RWD. Il s'agit d'un projet monopage proposant un en-tête d'accueil puis une série d'épisodes ou chapîtres, contenant chacun un titre, du contenu, mais également des informations additionnelles.
Sur les écrans d'une largeur inférieure ou égale à 740 pixels, l'ensemble des éléments ne forme qu'une colonne. On trouve successivement l'en-tête (en violet sur le schéma), puis le contenu principal et enfin les informations additionnelles (en rose).
Sur les écrans dont la largeur est comprise entre 741 et 1023 pixels, l'agencement de l'en-tête évolue (faisant notamment apparaître les liens de partage sociaux) et les photos sont positionnées latéralement dans le contenu principal.
Enfin, sur les écrans dont la largeur est supérieure ou égale à 1024 pixels, l'agencement de l'en-tête évolue à nouveau mais c'est surtout la position des données additionnelles qui se voit modifiée, profitant de la largeur nouvellement acquise pour venir se nicher sur la droite du cœur du contenu principal.
Réalisez l'intégration HTML de ce site RWD.
Pour les images, utilisez des placeholder [1]. Pour le texte, du texte de substitution [2] en Arial à 1em.
Concernant le processus d'élaboration des CSS, de nombreux auteurs conseillent de démarrer par la largeur mobile. A votre avis, pourquoi ?
Enfin, envisagez d'utiliser un pré-processeur (cela pourra vous être utile par la suite), par exemple SASS (SCSS) [3].
Acte 2
Certains visiteurs du site sont myopes et ont tendance à agrandir considérablement la taille de police par défaut. Essayez. Que se passe-t-il ?
Reprenez vos CSS et vérifiez qu'elles utilisent des unités relatives (en partant du principe que la taille de police par défaut est de 16px) [4].
em ne sont pas instinctives. Vous pouvez utiliser une fonction spécifique traduisant les pixels en unités relatives. Dans certains contextes, cela améliorera la maintenance en facilitant la relecture.
Acte 3
De nombreux visiteurs consultent le site sur mobile, mais se plaignent de lenteurs, principalement liées au chargement des images, tandis que d'autres se plaignent d'images floues.
Reprenez votre code et vérifiez que les images sont incluses de manière à être pertinentes au regard des ratios de pixels des matériels utilisés.