Responsive web design basics (Français)

• définir la fenêtre
• Taille du contenu sur la fenêtre
• utiliser les requêtes multimédia CSS pour la réactivité
• Comment choisir les points d’arrêt
• afficher les points d’arrêt des requêtes multimédias dans Chrome DevTools

L’utilisation des appareils mobiles pour surfer sur le web continue de croître à un rythme astronomique, et ces appareils sont souvent limités par la taille de l’écran et nécessitent une approche différente de la façon dont le contenu est présenté sur l’écran.,

Responsive web design, initialement défini par Ethan Marcotte dans une liste à part, répond aux besoins des utilisateurs et des appareils qu’ils utilisent. La mise en page change en fonction de la taille et des capacités de l’appareil. Par exemple, sur un téléphone, les utilisateurs verront le contenu affiché dans une vue à une seule colonne; une tablette peut afficher le même contenu dans deux colonnes.

Il existe une multitude de tailles d’écran différentes sur les téléphones, les « phablets », les tablettes, les ordinateurs de bureau, les consoles de jeux, les téléviseurs et même les appareils portables., Les tailles d’écran sont toujours en évolution, il est donc important que votre site peut s’adapter à la taille de l’écran, aujourd’hui ou dans l’avenir. De plus, les appareils ont différentes fonctionnalités avec lesquelles nous interagissons avec eux. Par exemple, certains de vos visiteurs utiliseront un écran tactile. La conception réactive moderne tient compte de toutes ces choses pour optimiser l’expérience pour tout le monde.

définir la fenêtre #

les Pages optimisées pour une variété de périphériques doivent inclure une balise meta viewport dans l’en-tête du document.Une balise META viewport donne au navigateur des instructions sur la façon de contrôler les dimensions et la mise à l’échelle de la page.,

pour tenter de fournir la meilleure expérience, les navigateurs mobiles rendent la page à une largeur d’écran de bureau (généralement à propos de 980px, bien que cela varie entre les appareils), puis essayez de rendre le contenu plus beau en augmentant la taille des pages et en adaptant le contenu à l’écran.Cela signifie que les tailles de police peuvent sembler incohérentes pour les utilisateurs, qui peuvent devoir appuyer deux fois ou pincer pour zoomer afin de voir et d’interagir avec le contenu.,

L’utilisation de la valeur de la méta fenêtrewidth=device-width indique à la page de correspondre à la largeur de l’écran en pixels indépendants du périphérique. Un pixel indépendant du dispositif (ou densité) étant une représentation d’un seul pixel, qui peut, sur un écran haute densité, être constitué de nombreux pixels physiques. Cela permet à la page de reflowcontent pour correspondre à différentes tailles d’écran, que ce soit rendu sur un petit téléphone portable ou un grand moniteur de bureau.,

certains navigateurs gardent la constante de largeur de la page lors de la rotation vers landscapemode et zooment plutôt que de reflower pour remplir l’écran., L’ajout de la valeur initial-scale=1 demande aux navigateurs d’établir une relation 1:1 entre les pixels CSS et les pixels indépendants du périphérique, quelle que soit l’orientation du périphérique, et permet à la page de tirer parti de la largeur totale du paysage.

La balise ne possède pas de<meta name="viewport"> avecwidth ouinitial-scaleLighthouse audit peut vous aider à automatiser le processus pour vous assurer que vos documents HTML utilisent correctement la balise META viewport.,

assurer une fenêtre accessible #

en plus de définir un initial-scale,vous pouvez également définir les attributs suivants sur la fenêtre:

• minimum-scale
• maximum-scale
• user-scalable

lorsqu’ils sont définis, ceux-ci peuvent désactiver la capacité de l’utilisateur à zoomer sur la fenêtre,ce qui peut entraîner des problèmes d’accessibilité.Par conséquent, nous ne recommandons pas d’utiliser ces attributs.,

Taille du contenu dans la fenêtre #

sur les ordinateurs de bureau et les appareils mobiles,les utilisateurs sont habitués à faire défiler les sites Web verticalement mais pas horizontalement;forcer l’utilisateur à faire défiler horizontalement ou à zoomer pour voir toute la page entraîne une mauvaise expérience utilisateur.

lors du développement d’un site mobile avec une balise META viewport,il est facile de créer accidentellement du contenu de page qui ne correspond pas tout à fait à la fenêtre spécifiée.Par exemple, une image qui est affichée à une largeur plus large que le viewportpeut faire défiler la fenêtre horizontalement.,Vous devez ajuster ce contenu pour qu’il s’adapte à la largeur de la fenêtre,de sorte que l’utilisateur n’ait pas besoin de faire défiler horizontalement.

le contenu n’est pas dimensionné correctement pour l’audit viewportLighthouse peut vous aider à automatiser le processus de détection du contenu débordant.

Images #

Une image a des dimensions fixes et si elle est plus grande que la fenêtre d’affichage provoquera une barre de défilement.Une façon courante de faire face à ce problème est de donner à toutes les images d’un max-width de 100%.,Cela entraînera un rétrécissement de l’image pour s’adapter à l’espace dont elle dispose,si la taille de la fenêtre d’affichage est inférieure à l’image.Cependant, parce que le max-width, plutôt que le width est 100%, l’image ne s’étirera pas plus grand que son naturel size.It est généralement sûr d’ajouter ce qui suit à vos feuilles de style afin que vous n’ayez jamais de problème avec les images provoquant une barre de défilement.,

Ajouter les dimensions de l’image de l’élément img #

Lors de l’utilisation de max-width: 100% vous remplacez le naturel dimensions de l’image,cependant, vous devriez toujours utiliser la balise width et height attributs sur votre <img> balise.En effet, les navigateurs modernes utiliseront ces informations pour réserver de l’espace pour l’imagebefore il se charge,cela aidera à éviter les changements de mise en page lorsque le contenu se charge.,

Layout #

étant donné que les dimensions et la largeur de l’écran en pixels CSS varient considérablement entre les appareils(par exemple, entre les téléphones et les tablettes, et même entre les différents téléphones),le contenu ne doit pas dépendre d’une largeur de fenêtre particulière pour bien rendre.

dans le passé, cela nécessitait des éléments de réglage utilisés pour créer percentages.In dans l’exemple ci-dessous, vous pouvez voir une disposition à deux colonnes avec des éléments flottants, dimensionnés en pixels.Une fois que la fenêtre devient plus petite que la largeur totale des colonnes, nous devons faire défiler horizontalement pour voir le contenu.,

En utilisant des pourcentages pour les largeurs de colonnes toujours un certain pourcentage du conteneur.Cela signifie que les colonnes deviennent plus étroites, plutôt que de créer une barre de défilement.

Les techniques de mise en page CSS modernes telles que Flexbox, Grid Layout et Multicolmake la création de ces grilles flexibles beaucoup plus facile.,

Flexbox #

Cette méthode de mise en page est idéale lorsque vous avez un ensemble d’éléments de différentes tailles et que vous souhaitez qu’ils s’intègrent confortablement dans une ou plusieurs rangées,les éléments plus petits prenant moins d’espace et les plus grands obtenant plus d’espace.

dans une conception réactive, vous pouvez utiliser Flexbox pour afficher les éléments en une seule ligne,ou enveloppés sur plusieurs lignes à mesure que l’espace disponible diminue.

en savoir plus sur Flexbox.

CSS Grid Layout #

CSS Grid Layout permet la création simple de grilles flexibles.,Si nous considérons l’exemple précédent, plutôt que de créer nos colonnes avec des pourcentages,nous pourrions utiliser la disposition de la grille et l’unité fr, qui représente une partie de l’espace disponible dans le conteneur.

la Grille peut également être utilisé pour créer une grille régulière mises en page,avec autant d’articles que possible.Le nombre de pistes disponibles sera réduit en fonction de la taille de l’écran shrinks.In la démo ci-dessous,nous avons autant de cartes que possible sur chaque ligne, avec une taille minimale de 200px.,

en savoir plus sur la disposition de la grille CSS

disposition à colonnes multiples #

pour certains types de disposition,vous pouvez utiliser la disposition à colonnes multiples (multicolore), qui peut créer un nombre réactif de colonnes avec le column-width property.In la démo ci-dessous, vous pouvez voir que des colonnes sont ajoutées s’il y a de la place pour une autre colonne 200px.,

En savoir plus sur Multicolore

utilisez CSS media queries pour la réactivité #

parfois, vous devrez apporter des modifications plus importantes à votre disposition pour prendre en charge une certaine taille d’écran que ne le permettront les techniques présentées ci-dessus.C’est là que les requêtes multimédias deviennent utiles.

les requêtes multimédias sont des filtres simples qui peuvent être appliqués aux styles CSS.,Ils facilitent le changement de style en fonction des types d’appareils qui rendent le contenu ou des caractéristiques de cet appareil,par exemple la largeur, la hauteur, l’orientation, la possibilité de survoler et le fait que l’appareil soit utilisé comme écran tactile.,

pour fournir différents styles d’impression,vous devez cibler un type de sortie afin d’inclure une feuille de style avec des styles d’impression comme suit:

Vous pouvez également inclure des styles d’impression dans votre feuille de style principale en utilisant une requête multimédia:

euilles de style dans votre fichier CSS principal en utilisant la syntaxe@import,@import url(print.css) print;, mais cette utilisation n’est pas recommandée pour des raisons de performances.Voir éviter les importations CSS pour plus de détails.,

pour la conception Web réactive, nous interrogeons généralement les fonctionnalités de l’appareilafin de fournir une mise en page différente pour les écrans plus petits,ou lorsque nous détectons que notre visiteur utilise un écran tactile.

les requêtes multimédias basées sur la taille de la fenêtre #

les requêtes multimédias nous permettent de créer une expérience réactive où des styles spécifiques sont appliqués aux petits écrans, aux grands écrans et n’importe où entre les deux.La fonctionnalité que nous détectons ici est donc la taille de l’écran,et nous pouvons tester les choses suivantes.,

• width (min-width, max-width)
• height (min-height, max-height)
• orientation
• aspect-ratio

All of these features have excellent browser support,for more details including browser support information seewidth,height,orientation, andaspect-ratio on MDN.

requêtes multimédias basées sur la capacité de l’appareil #

compte tenu de la gamme d’appareils disponibles, nous ne pouvons pas supposer que chaque grand appareil est un ordinateur de bureau ou un ordinateur portable ordinaire, ou que les gens utilisent uniquement un écran tactile sur un petit appareil.,Avec quelques ajouts plus récents à la spécification des requêtes multimédias, nous pouvons tester des fonctionnalités telles que le type de pointeur utilisé pour interagir avec l’appareil et si l’utilisateur peut survoler des éléments.

• hover
• pointer
• any-hover
• any-pointer

Essayez la visualisation de cette démonstration sur différents appareils,comme un ordinateur de bureau ordinaire et d’un téléphone ou d’une tablette.

Ces nouvelles fonctionnalités ont un bon soutien dans tous les navigateurs modernes., En savoir plus sur les pages MDN pourhover,any-hover,pointer,any-pointer.

en utilisantany-hover Etany-pointer #

les fonctionnalitésany-hover Etany-pointer testent si l’Utilisateur a la capacité de survoler, ou ce type de pointeur même si ce n’est pas la principale façon dont ils interagissent avec leur device.Be très prudent lors de l’utilisation de ces.Forcer un utilisateur à passer à une souris lorsqu’il utilise son écran tactile n’est pas très convivial!,Cependant, any-hover et any-pointer peut être utile s’il est important de travailler sur ce genre d’appareil d’un utilisateur.Par exemple,un ordinateur portable avec un écran tactile et un trackpad doit correspondre à des pointeurs grossiers et fins, en plus de la possibilité de survoler.

comment choisir les points d’arrêt #

Ne définissez pas les points d’arrêt en fonction des classes de périphériques.Définir des points d’arrêt en fonction de périphériques, de produits, de marques ou de systèmes d’exploitation spécifiques utilisés aujourd’hui peut entraîner un cauchemar en matière de maintenance.,Au lieu de cela, le contenu lui-même doit déterminer comment la mise en page s’adapte à son conteneur.

choisissez les principaux points d’arrêt en commençant petit, puis en travaillant #

concevez d’abord le contenu pour qu’il s’adapte à une petite taille d’écran,puis développez l’écran jusqu’à ce qu’un point d’arrêt devienne nécessaire.Cela vous permet d’optimiser les points d’arrêt en fonction du contenu et de maintenir le moins de points d’arrêt possible.

passons en revue l’exemple que nous avons vu au début: les prévisions météorologiques.La première étape consiste à faire bien paraître les prévisions sur un petit écran.,

ensuite, redimensionnez le navigateur jusqu’à ce qu’il y ait trop d’espace blanc entre les éléments,et la prévision ne semble tout simplement pas aussi bonne.La décision est quelque peu subjective, mais au-dessus de 600px est certainement trop large.

pour insérer un point d’arrêt à 600px, créez deux requêtes multimédias à la fin de votre CSS pour le composant,une à utiliser lorsque le navigateur est 600px et ci-dessous, et une 305c8c67b0″>.

enfin, refactorisez le CSS. Dans la requête multimédia pour un max-width de 600px,ajoutez le CSS qui est uniquement pour les petits écrans., Dans la requête multimédia pour un min-width de 601px ajouter CSS pour les écrans plus grands.

choisissez des points d’arrêt mineurs lorsque cela est nécessaire #

en plus de choisir des points d’arrêt majeurs lorsque la disposition change considérablement,il est également utile de s’ajuster pour les changements mineurs.Par exemple,entre les principaux points d’arrêt, il peut être utile d’ajuster les marges ou le remplissage d’un élément, ou d’augmenter la taille de la police pour la rendre plus naturelle dans la mise en page.

commençons par optimiser la mise en page du petit écran.,Dans ce cas, augmentons la police lorsque la largeur de la fenêtre est supérieure à 360px.Deuxièmement, quand il y a assez d’espace,nous pouvons séparer les températures élevées et basses de sorte qu’ils sont sur la même lineinstead de sur le dessus de l’autre.Et faisons aussi les icônes météo un peu plus grand.

de même, pour les grands écrans, il est préférable de limiter à la largeur maximale du panneau de prévision, de sorte qu’il ne consomme pas toute la largeur de l’écran.,

optimiser le texte pour la lecture #

la théorie classique de la lisibilité suggère qu’une colonne idéale devrait contenir 70 à 80 caractères par ligne(environ 8 à 10 mots en anglais).Ainsi, chaque fois que la largeur d’un bloc de texte dépasse environ 10 mots,envisagez d’ajouter un point d’arrêt.

examinons de plus près l’exemple d’article de blog ci-dessus.Sur les écrans plus petits, la police Roboto à 1em fonctionne parfaitement en donnant 10 mots par ligne, mais les écrans plus grands nécessitent un breakpoint.In dans ce cas, si la largeur du navigateur est supérieure à 575px, la largeur de contenu idéale est 550px.,

Évitez simplement le contenu caché #

soyez prudent au moment de choisir quel contenu pour masquer ou afficher en fonction de la taille de l’écran.Ne cachez pas simplement le contenu simplement parce que vous ne pouvez pas l »adapter à l » écran.Taille de l’écran n’est pas une indication de ce qu’un utilisateur peut vouloir.Par exemple, éliminer le nombre de pollens des prévisions météorologiques pourrait être un problème sérieux pour les personnes allergiques au printemps qui ont besoin de l’informationpour déterminer si elles peuvent sortir ou non.,

afficher les points d’arrêt de requête multimédia dans Chrome DevTools #

Une fois que vous avez configuré vos points d’arrêt de requête multimédia,vous voudrez voir à quoi ressemble votre site avec eux.Vous pouvez redimensionner la fenêtre de votre navigateur pour déclencher les points d’arrêt,mais Chrome DevTools dispose d’une fonctionnalité intégrée qui permet de voir facilement à quoi ressemble une page sous différents points d’arrêt.

pour afficher votre page sous différents points d’arrêt:

ouvrez DevToolsand puis activez le mode périphérique.Cela s’ouvre en mode responsive par défaut.

pour voir vos requêtes multimédias, ouvrez le menu Mode périphérique et sélectionnezafficher les requêtes multimédias pour afficher vos points d’arrêt sous forme de barres colorées au-dessus de votre page.

Cliquez sur l’une des barres pour afficher votre page pendant que cette requête multimédia est active.,Faites un clic droit sur une barre pour accéder à la définition de la requête multimédia.

---