les outils et langages numériques le responsive design
Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables à des longueurs de lignes trop imprortantes et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de responsive web design(inventé par Ethan Marcotte en 2010) est apparu et traduit un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. Source : MDN Web Docs
Dans cette rubrique, sont abordés les thèmes suivants :
Ci-dessus, cette balise, absolument indispensable aujourd'hui, dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles.
En définissant width=device-width, vous convoquez la largeur réelle de l'appareil de consultation, afin que vos requêtes multimédias fonctionnent comme prévu.
*Le viewport (ou zone d'affichage) représente la zone visible sur votre device ou terminal de consultation (smartphone, tablette, écran laptop ou desktop). Pour un navigateur web, la zone d'affichage correspond généralement à la fenêtre du navigateur sans les éléments d'interface du navigateur (barre de menu, etc.). Bref, sur le Web, la zone d'affichage correspond la plupart du temps à la région à l'intérieur de la fenêtre dans laquelle vous consultez un site.
Media queries ou les requêtes multimédias
Le responsive design doit son existence à la création des media queries ou requêtes multimédias. Elles permettent de modifier l'apparence d'un site ou d'une application en fonction du type de média convoqué dont voici la liste : all : couvre tous les types de médias présentés ci-dessous. print : est dédié aux supports à imprimer. screen : correspond aux appareils dotés d'un écran (média que nous convoquerons dans les exercices à venir). speech : correspond aux outils de synthèse vocale.
Structurer une requête média spécifique est tout un art et si le sujet vous intéresse, je vous propose de le développer en consultant l'article très détaillé du site MDN Web Docs.
Allons à l'essentiel de ce dont nous avons besoin pour la pratique à venir : cibler un média screen(écran) en lui appliquant ses caractéristiques min-width et max-width pour identifier les points de rupture(breakpoints) des médias ciblés. Voir une démo. Pour la pertinence de la démonstration, le redimensionnement est à réaliser sur un écran d'ordinateur !
Vous trouverez sur le site *CSS-TRICKS un large éventail des requêtes multimédias pour les terminaux de consultation standards (écrans). Certaines de ces requêtes affichent la propriété device-pixel-ratio ou dpr qui renvoie au ratio de la résolution des écrans(non Retina ou Retina).
Dans cet univers cacophonique présentant de nombreux et différents viewports (plus de 9 000 appareils distincts recensés en 2020 😯), nous pouvons nous appuyer sur les préconisations du framework Bootstrap pour déterminer des requêtes « universelles » :
/* smartphones */
@media screen and (max-width: 767px) { ... }
/* tablettes */
@media screen and (min-width: 768px) and (max-width: 1023px) { ... }
/* ordinateurs */
@media screen and (min-width: 1024px) { ... }
Aide : pour connaître les paramètrages spécifiques à votre support de consultation (smartphone, tablettes, ordinateur), vous pouvez solliciter l'application en ligne My Device.
En pratique, comment afficher, inspecter les points de rupture et tester les requêtes multimédias ?
Dans le navigateur web Google Chrome, il existe une option pour afficher les points de rupture en faisant un clic-droit sur la page puis Inspecter, puis cliquer sur l'outil Toogle device toolbar(situé à gauche de la fenêtre de code). Ces manipulations entraîne l'affichage, en haut de la page web, d'une barre graduée de couleur grise. Ce premier outil permet de définir l'affichage de largeurs réactives à partir de valeurs prédéfinies existantes dans le navigateur :
Pour aller plus loin dans l'exploration et afficher les points de rupture spécifiques à la page que vous consultez (ces valeurs sont définies dans la feuille de style qui lui est attachée), vous devez cliquer sur trois petits points verticaux qui se trouvent tout à droite de cette barre grise et sélectionner dans le menu contextuel : Show media queries :
Alors apparaissent trois barres de couleurs différentes :
- La première barre de couleur bleue affiche les points de rupture de largeur maximale : (max-width: …),
- La deuxième barre de couleur verte affiche les points de rupture avec des largeurs minimale et maximale : (min-width: …) and (max-width: …) et,
- La troisième barre de couleur orange affiche les points de rupture de largeur minimale : (min-width: …).
Avec un clic gauche sur l'une de ces trois barres de requêtes multimédias, vous pouvez appliquer la largeur de déclenchement correspondante à la valeur de largeur affichée au survol. Avec un clic droit vous pouvez révéler la source du code css (reveal in source code), spécifique à cette requête :
Les navigateurs web Firefox et Safari offrent aussi la possibilité d'inspecter le codes HTML et CSS des pages consultées sans proposer la visualisation des points de rupture comme avec Google Chrome. Par contre, chacun met à disposition un outil pour tester des valeurs différentes : - Firefox avec l'outil Vue adaptative situé en haut à droite du champs d'inspection. - Safari avec la fonction Passer en mode conception adaptative situé dans le sous-menu Développement(parler de la fonction Ouvrir avec un simulateur - application Simulator du package Xcode pour Safari…).
Les grilles et les boîtes flexibles
Les sites adaptatifs sont construits sur la base d'une grille flexible, pour éviter de cibler toutes les tailles d'appareils possibles et d'essayer d'avoir des dispositions parfaitement alignées au pixel près dans tous les cas. Les trois méthodes, qui permettent de mettre en forme une grille flexible, sont : - la disposition multi-colonnes, - les boîtes flexibles (flexbox), et - les grilles CSS. Ces trois méthodes .
La disposition multi-colonnes Avec une disposition en colonnes, à l'aide de la propriété column-countexemple, on indique un nombre de colonnes maximum dans lequel on placera le contenu. Le navigateur détermine alors la taille des colonnes, qui pourra varier d'un écran à l'autre en fonction de sa taille :
.container{column-count:3;}
Si on utilise la propriété column-widthexemple à la place, on indiquera une largeur minimale. Le navigateur créera alors autant de colonnes que possible au sein du conteneur et répartira l'espace restant entre les colonnes. Dans ce cas, le nombre de colonnes variera en fonction de la largeur du viewport :
.container{column-width:10em;}
Les boîtes flexibles Avec les boîtes flexibles ou flexbox, les éléments flexibles s'agrandissent ou rétrécissent, distribuant l'espace disponible dans le conteneur entre les éléments. Dans l'exemple qui suit, le conteneur (.container) convoquera la propriété display: et sa valeur flex et les enfants (.item1 et .item2) convoqueront la propriété flex: et ses valeurs 1 ou 2. Les éléments flexibles prendront donc deux largeurs différentes (1/3 et 2/3 de la largeur du viewport). Et pour cela, on utilise les formes raccourcies flex:1 et flex:2exemple :
Pour aller plus loin, voici quatre exemples d'application flexbox : #1, #2, #3, #4.
Pour aller encore et encore plus loin, voici deux exemples doublés de galeries d'images responsives : #5a, #5b et #6a, #6b.
Les grilles CSS Les dispositions créées avec les grilles CSS utilisent la propriété et la valeur display:grid complétée de la propriété grid-template-columns et de sa valeur fr(fraction) pour répartir l'espace disponible entre les pistes de la grille. Dans l'exemple suivant, on crée un conteneur de grille avec trois pistes dimensionnées avec 1frexemple. Cela créera trois pistes de colonnes, chacune occupant une partie égale du conteneur :
Sur l'exemple précédent, vous pouvez constater que les pistes (colonnes de texte) ne sont pas séparées par une gouttière (blanc vertical). Pour y remédier, on va convoquer la propriété gap: avec une valeur de 2emexemple.
Pour aller plus loin, voici trois exemples d'application grid : #1, #2, #3.
L'image responsive
L'utilisation, la plus simple, d'une image responsive est celle de convoquer dans le HTML une image qui est à la plus grande taille possible et de pouvoir la réduire automatiquement à la dimension du viewport (surface d'affichage d'un média). C'est une approche encore utilisée aujourd'hui et dans la plupart des feuilles de style, vous trouverez le CSS suivant :
img{ max-width: 100%; }
Voir une démo. Pour la pertinence de la démonstration, la manipulation est à réaliser sur un écran d'ordinateur !
Néanmoins, cette approche présente des inconvénients évidents : - l'image peut être affichée à une taille beaucoup plus petite que sa taille réelle (ce qui est un gaspillage de bande passante) ; - vous pouvez envisager que le rapport hauteur / largeur de l'image sur le mobile soit différente de celle affichée sur un ordinateur de bureau (il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur ordinateur de bureau) ; - en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Malheureusement, les situations présentées ci-dessus ne peuvent pas être réalisées par une simple réduction de la taille d'une image.
Les réponses se trouvent dans l'utilisation de l'élément picture et de ses attributs media et srcset. Vous pouvez fournir plusieurs tailles et le navigateur choisira l'image la plus appropriée pour chaque dispositif, chaque média. Exemple :
<picture> <source media="(max-width: 300px)" srcset="outils/media-queries/image_300w.jpg"> <source media="(max-width: 600px)" srcset="outils/media-queries/image_600w.jpg"> <source media="(max-width: 900px)" srcset="outils/media-queries/image_900w.jpg"> <source media="(max-width: 1200px)" srcset="outils/media-queries/image_1200w.jpg"> <source media="(max-width: 1600px)" srcset="outils/media-queries/image_1600w.jpg"> <img src="outils/media-queries/image_1600w.jpg" alt="un exemple d'une image au format jpeg"> </picture>
Testez en redimensionnant le viewport pour la pertinence de la démonstration, ce test est à réaliser sur un écran d'ordinateur ! :
Pour tester ces spécificités des éléments img et picture dans le responsive design, consultez les pages dédiées à l'attribut srcset et au descripteur de densité de pixels, dpr(device pixel ratio). Pour la pertinence de la démonstration, ces tests sont à réaliser sur un écran d'ordinateur !
La typographie adaptative / responsive / fluide
1 - Méthode adaptative : em / rem voir fichier de démonstration index_em+rem.html dans le dossier 01_em_rem
Cette méthode consiste :
- À indiquer dans le sélecteur html une propriété font-size avec une valeur de 1em(valeur par défaut pour tout le html);
- Puis à renseigner dans les sélecteurs h1, h2, h3, h4, h5, h6 et p, les propriétés {font-size: …} en {font-size: …rem}. Cette unité de valeur rend dépendante (héritage) de la valeur initiale du sélecteur html. Si j’augmente cette valeur initiale em, l’ensemble des valeurs exprimées en rem augmentera proportionnellement.
Cette méthode est dite adaptative car le résultat produit des valeurs fixes (au redimensionnement du viewport, leurs tailles ne changent pas).
Côté HTML :
<h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 5</h5> <h6>Titre de niveau 6</h3> <p>Lorem ipsum dolor sit…</p>
Côté CSS : faire un test en changeant html { font-size: 1em; } pour html { font-size: 1.5em; }
2a - Méthode responsive : vw voir fichier de démonstration index_vw.html dans le dossier 02_vw
Cette première méthode consiste à indiquer pour l’ensemble des sélecteurs h1, h2, h3, h4, h5, h6 et p, les propriétés {font-size: …} en {font-size: …vw}. Cette unité de valeur rend dynamique les tailles typographiques au redimensionnement du viewport. L’inconvénient est que l’on se retrouve avec une taille de caractères trop petite avec un viewport étroit et une taille de caractères trop importante avec un viewport large.
Côté HTML :
<h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 5</h5> <h6>Titre de niveau 6</h3> <p>Lorem ipsum dolor sit…</p>
2b - Méthode responsive : calc () voir fichier de démonstration index_vw+calc.html dans le dossier 02_vw
Cette deuxième méthode, plus efficace, consiste à utiliser la fonction calc(…). En ajoutant à celle-ci, une valeur de taille fixe (em ou rem) et une valeur en vw, le texte augmentera ou diminuera au redimensionnement du viewport. Exemple : h1{font-size: calc(2rem + 0.15vw)} veut dire que pour un titre de niveau 1, on augmente de deux fois la valeur de 1em (dans la propriété html) avec un coefficient d’agrandissement de 0.15vw (0.15%) du viewport de base.
Côté HTML :
<h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 5</h5> <h6>Titre de niveau 6</h3> <p>Lorem ipsum dolor sit…</p>
3 - Méthode fluide : clamp () voir fichier de démonstration index_clamp_02a.html et index_clamp_02b .html dans le dossier 03_clamp
Cette troisième méthode consiste à utiliser la fonction clamp(…) qui permet de calculer une valeur dynamique dite « fluide » entre deux limites minimale et maximale, en fonction d’une troisième valeur relative choisie pour un élément de texte (p, hn…). Le grand avantage de cette méthode, c'est qu'il n'y a plus besoin de requêtes multimédias (media queries) pour la gestion de la typographie !
Deux méthodes s'offrent à vous pour calculer et appliquer les valeurs relatives à la fonction clamp(…) :
- la méthode traditionnelle par calcul personnel ou - la méthode à l'aide d'outils de calcul en ligne : Générateur CSS clamp ou Fluid Type Generator.
Voici un exemple avec comme contraintes de valeurs : - largeur minimale du viewport = 360px ou 22.5rem (360/16), - largeur maximale du viewport = 840px ou 52.5rem (840/16), - taille minimale pour la typographie = 1rem et - taille maximale pour cette même typographie = 2.5rem.
(situé à gauche de la fenêtre de code). Ces manipulations entraîne l'affichage, en haut de la page web, d'une barre graduée de couleur grise. Ce premier outil permet de définir l'affichage de largeurs réactives à partir de valeurs prédéfinies existantes dans le navigateur :
Vue adaptative situé en haut à droite du champs d'inspection.
