outils et langages numériques

l'élément <meta name="viewport">^*

Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante meta dans la section head du document⁥:

côté html

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.

les media queries ou 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.

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 points de rupture de quelques écrans majoritairement présents sur le marché⁥:

Ce qui se traduit pour les media-queries⁥:

côté html

Vous pouvez consulter trois exemples avec des échelles de media-queires différentes⁥: les six tailles d'écrans majoritaires, les quatre tailles d'écrans principales ou les deux tailles d'écrans fondamentales. Pour la pertinence de la démonstration, le redimensionnement est à réaliser à partir de l'affichage dans un naviguateur et sur un ordinateur dont l'écran dépasse les 1 400 pixels de large⁥!

Aide⁥: pour connaître les paramètrages spécifiques de votre support de consultation (smartphone, tablette, ordinateur), vous pouvez solliciter l'application en ligne mydevice.

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-count ^exemple, 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⁥:

côté css

Si on utilise la propriété column-width ^exemple à 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⁥:

côté css

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:2 ^exemple⁥:

côté css

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 1fr ^exemple. Cela créera trois pistes de colonnes, chacune occupant une partie égale du conteneur⁥:

côté css

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 2em ^exemple.

côté css

Pour aller plus loin, voici trois exemples d'application grid⁥: #1, #2, #3.

Pour une aide en ligne à la mise en forme du code html & css d'une grille, utilisez⁥: CSS Grid Generator

l'image et le média 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⁥:

côté css

Voir une démo. Pour la pertinence de la démonstration, le redimensionnement est à réaliser à partir de l'affichage dans un naviguateur et sur un ordinateur dont l'écran dépasse les 1 200 pixels de large⁥!

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⁥:

côté css

Testez en redimensionnant cette page et pour la pertinence de la démonstration, le redimensionnement est à réaliser à partir de l'affichage dans un naviguateur et sur un ordinateur dont l'écran dépasse les 1 200 pixels de large⁥!⁥:

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 dpr (device pixel ratio). Pour la pertinence de la démonstration, ces tests sont à réaliser sur un écran d'ordinateur⁥!

Le DPR, qu'est-ce⁥?

Le rapport de pixels de l'appareil (DPR) est le rapport entre les pixels physiques d'un écran et les pixels logiques (CSS) utilisés en conception web. Ce rapport indique combien de pixels physiques sont représentés par un pixel CSS.

Consultez les deux supports illustrant l'impact du DPR (device pixel ratio) : support #1 et support #2

la typographie adaptative⁥/⁥responsive⁥/⁥fluide

6^.1 - …la méthode adaptative⁥: em / rem exemple

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.

côté html

côté css

Faire un test en changeant html { font-size: 1em; } pour html { font-size: 1.5em; }

6^.2a - …la méthode responsive⁥: vw exemple

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 de cette méthode 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

côté css

6^.2b - …la méthode responsive⁥: calc () exemple

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

côté css

6^.3 - …la méthode fluide⁥: clamp () exemple pixel et exemple rem

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.

côté html

côté css

tester, en ligne gratuitement, son application web responsive

1 - La fonction  Inspecter l'élément  de Google (clic droit dans le navigateur ou)

Ctrl + Cmd + C sur macOS ou F12 ou Ctrl + Shift + C sur Windows

2 - L'extension Simulateur téléphone mobile pour⁥:

Google Chrome
Firefox

3 - En ligne, pour un site non sécurisé avec le protocole⁥: http://…

Am I Responsive?

4 - En ligne, pour un site sécurisé avec le protocole⁥: https://…

Responsive Testing Tool
Responsive Web Design Checker
Website Responsive Test
Demonstrating Responsive Design