Introduction à la conception Web réactive : pseudo-éléments, requêtes multimédias, etc.

De nos jours, votre site Web sera visité par une grande variété d'appareils : ordinateurs de bureau avec de grands écrans, ordinateurs portables de taille moyenne, tablettes, smartphones, etc.

Pour obtenir une expérience utilisateur optimale en tant qu'ingénieur front-end, votre site doit ajuster sa mise en page en réponse à ces différents appareils (c'est-à-dire à leurs différentes résolutions et dimensions d'écran). Le processus de réponse à la forme de l'appareil de l'utilisateur est appelé (vous l'avez deviné) conception Web réactive (RWD).

Pourquoi vaut-il la peine d'étudier des exemples de conception de sites Web réactifs et de vous concentrer sur RWD ? Certains concepteurs de sites Web, par exemple, se donnent pour tâche de garantir une expérience utilisateur stable sur tous les navigateurs, passant souvent des journées entières à résoudre de petits problèmes avec Internet Explorer.

C'est une approche stupide.

Mashable a appelé 2013 l'année de la conception Web réactive. Pourquoi? Plus de 30 % de leur trafic provient d'appareils mobiles. Ils prévoient que ce nombre pourrait atteindre 50% d'ici la fin de l'année. Sur le Web en général, 17,4 % du trafic Web provenait des smartphones en 2013. Dans le même temps, l'utilisation d'Internet Explorer, par exemple, ne représente que 12 % de l'ensemble du trafic des navigateurs , en baisse d'environ 4 % par rapport à la même période l'an dernier (selon à W3Schools). Si vous optimisez pour un navigateur spécifique, plutôt que pour la population mondiale de smartphones, il vous manque la forêt pour les arbres. Et dans certains cas, cela peut faire la différence entre le succès et l'échec - la conception réactive a des implications sur les taux de conversion, le référencement, les taux de rebond, etc.

L'approche de la conception Web réactive

Ce qui est souvent passé sous silence à propos de RWD, c'est qu'il ne s'agit pas seulement d'ajuster l'apparence de vos pages Web ; au lieu de cela, l'accent devrait être mis sur l'adaptation logique de votre site pour une utilisation sur différents appareils. Par exemple : l'utilisation de la souris n'offre pas la même expérience utilisateur que, disons, l'écran tactile. Vous n'êtes pas d'accord ? Vos mises en page réactives pour mobile et ordinateur de bureau doivent refléter ces différences.

En même temps, vous ne voulez pas réécrire complètement votre site pour chacune des dizaines de tailles d'écran différentes sur lesquelles il pourrait être visualisé - une telle approche est tout simplement irréalisable. Au lieu de cela, la solution consiste à implémenter des éléments de conception réactifs flexibles qui utilisent le même code HTML pour s'adapter à la taille de l'écran de l'utilisateur.

D'un point de vue technique, la solution réside dans ce didacticiel de conception réactive : utilisation de requêtes multimédia CSS, de pseudo-éléments, de dispositions de grille d'ensemble flexibles et d'autres outils pour s'adapter dynamiquement à une résolution donnée.

Media Queries dans le Responsive Design

Les types de médias sont apparus pour la première fois dans HTML4 et CSS2.1, ce qui a permis le placement de CSS distincts pour l'écran et l'impression. De cette manière, il était possible de définir des styles distincts pour l'affichage informatique d'une page vis-à-vis de son impression.

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

ou

 @media screen { * { background: silver } }

En CSS3, vous pouvez définir des styles en fonction de la largeur de la page. Comme la largeur de la page est en corrélation avec la taille de l'appareil de l'utilisateur, cette capacité vous permet donc de définir différentes mises en page pour différents appareils. Remarque : les requêtes multimédias sont prises en charge par tous les principaux navigateurs.

Cette définition est possible grâce à la définition des propriétés de base : max-width , device-width , orientation et color . D'autres définitions sont également possibles ; mais dans ce cas, les choses les plus importantes à noter sont la résolution minimale (largeur) et les paramètres d'orientation (paysage vs portrait).

L'exemple de CSS réactif ci-dessous montre la procédure d'initialisation d'un certain fichier CSS par rapport à la largeur de la page. Par exemple, si 480px est la résolution maximale de l'écran de l'appareil actuel, les styles définis dans main_1.css seront appliqués.

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

Nous pouvons également définir différents styles dans la même feuille de style CSS de sorte qu'ils ne soient utilisés que si certaines contraintes sont satisfaites. Par exemple, cette partie de notre CSS réactif ne serait utilisée que si l'appareil actuel avait une largeur supérieure à 480 px :

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

"Zoom intelligent"

Les navigateurs mobiles utilisent ce que l'on appelle le « zoom intelligent » pour offrir aux utilisateurs une expérience de lecture « supérieure ». Fondamentalement, le zoom intelligent est utilisé pour réduire proportionnellement la taille de la page. Cela peut se manifester de deux manières : (1) zoom initié par l'utilisateur (par exemple, en appuyant deux fois sur l'écran d'un iPhone pour zoomer sur le site Web actuel) et (2) affichage initial d'une version agrandie d'une page Web sur charge.

Étant donné que nous pouvons simplement utiliser des requêtes multimédias réactives pour résoudre tous les problèmes auxquels le zoom intelligent pourrait être ciblé, il est souvent souhaitable (voire nécessaire) de désactiver le zoom et de s'assurer que le contenu de votre page remplit toujours le navigateur :

 <meta name="viewport" content="width=device-width, initial-scale=1" />

En définissant initial-scale sur 1, nous contrôlons le niveau de zoom initial de la page (c'est-à-dire la quantité de zoom lors du chargement de la page). Si vous avez conçu votre page Web pour qu'elle soit réactive, votre mise en page fluide et dynamique doit remplir l'écran du smartphone de manière intelligente sans nécessiter de zoom initial.

De plus, nous pouvons désactiver complètement le zoom avec user-scalable=false .

Largeurs de page

Supposons que vous cherchiez à fournir trois mises en page réactives différentes : une pour les ordinateurs de bureau, une pour les tablettes (ou ordinateurs portables) et une pour les smartphones. Quelles dimensions de page devez-vous cibler comme limites (par exemple, 480 px) ?

Malheureusement, il n'y a pas de norme définie pour les largeurs de page à cibler, mais les exemples de valeurs responsives suivants sont souvent utilisés :

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

Cependant, il existe un certain nombre de définitions de largeur différentes. Par exemple, 320 et plus ont cinq incréments par défaut de CSS3 Media Query : 480, 600, 768, 992 et 1382px. Parallèlement à l'exemple donné dans ce didacticiel de développement Web réactif, je pourrais énumérer au moins dix autres approches.

Avec n'importe lequel de ces ensembles d'incréments raisonnables, vous pouvez cibler la plupart des appareils. En pratique, il n'est généralement pas nécessaire de gérer séparément tous les exemples de largeurs de page susmentionnés - sept résolutions différentes sont probablement exagérées. D'après mon expérience, 320px, 768px et 1200px sont les plus couramment utilisés ; ces trois valeurs devraient être suffisantes pour cibler respectivement les smartphones, les tablettes/ordinateurs portables et les ordinateurs de bureau.

Psuedo-éléments

En vous appuyant sur vos requêtes multimédias réactives de l'exemple précédent, vous pouvez également afficher ou masquer certaines informations par programmation en fonction de la taille de l'appareil de l'utilisateur. Heureusement, cela aussi peut être accompli avec du CSS pur, comme indiqué dans le didacticiel ci-dessous.

Pour commencer, masquer certains éléments ( display: none; ) peut être une excellente solution lorsqu'il s'agit de réduire le nombre d'éléments à l'écran pour une disposition de smartphone, où l'espace est presque toujours insuffisant.

Mais au-delà de cela, vous pouvez également faire preuve de créativité avec des pseudo-éléments CSS (sélecteurs), par exemple :before et :after . Remarque : encore une fois, les pseudo-éléments sont pris en charge par tous les principaux navigateurs.

Les pseudo-éléments sont utilisés pour appliquer des styles spécifiques à des parties spécifiques d'un élément HTML ou pour sélectionner un certain sous-ensemble d'éléments. Par exemple, le pseudo-élément :first-line vous permet de définir des styles uniquement sur la première ligne d'un certain sélecteur (par exemple, p:first-line s'appliquera à la première ligne de tous les p s). De même, le pseudo-élément a:visited vous permettra de définir des styles sur tous les a s avec des liens précédemment visités par l'utilisateur. De toute évidence, ceux-ci peuvent être utiles.

Voici un exemple simple de conception réactive dans lequel nous créons trois dispositions différentes pour un bouton de connexion, une pour le bureau, la tablette et le smartphone. Sur le smartphone, nous aurons une seule icône, tandis que la tablette aura la même icône accompagnée de "Nom d'utilisateur". Enfin, pour le bureau, nous ajouterons également un court message d'instruction ("Insérez votre nom d'utilisateur").

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

En utilisant uniquement les pseudo-éléments :before et :after , nous obtenons ce qui suit :

Pour en savoir plus sur la magie des pseudo-éléments, Chris Coyier a un bon article sur CSS-Tricks.

Alors, par où dois-je commencer ?

Dans ce didacticiel, nous avons établi certains des éléments constitutifs de la conception Web réactive (c'est-à-dire les requêtes multimédias et les pseudo-éléments) et présenté quelques exemples de chacun. Où allons-nous à partir d'ici?

La première étape consiste à organiser tous les éléments de votre page Web en différentes tailles d'écran.

Jetez un œil à la version de bureau de la mise en page présentée ci-dessus. Dans ce cas, le contenu de gauche (le rectangle vert) pourrait servir en quelque sorte de menu principal. Mais lorsque des appareils avec une résolution inférieure sont utilisés (par exemple, une tablette ou un smartphone), il peut être judicieux d'afficher ce menu principal en pleine largeur. Avec les media queries, vous pouvez implémenter ce comportement comme suit :

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

Malheureusement, cette approche de base est souvent insuffisante car votre front-end se complique. Comme l'organisation du contenu d'un site diffère souvent considérablement entre les versions mobiles et de bureau, l'expérience utilisateur dépend finalement de l'utilisation non seulement du CSS réactif, mais aussi du HTML et du JavaScript.

Lors de la détermination de mises en page réactives pour différents appareils, plusieurs éléments clés sont importants. Contrairement aux versions de bureau où nous avons suffisamment d'espace pour le contenu, le développement de smartphone est plus exigeant. Plus que jamais, il est nécessaire de regrouper des contenus spécifiques et de définir hiérarchiquement l'importance de chaque partie.

Les diverses utilisations de votre contenu sont également importantes. Par exemple, lorsque votre utilisateur a une souris, il peut placer le curseur au-dessus de certains éléments pour obtenir plus d'informations, de sorte que vous (en tant que développeur Web) pouvez laisser certaines informations à collecter de cette manière, mais ce ne sera pas le cas. cas où votre utilisateur est sur un smartphone.

De plus, si vous laissez des boutons sur votre site qui s'affichent ensuite sur les smartphones comme étant plus petits qu'un doigt typique, vous créerez une incertitude dans l'utilisation et la convivialité de votre site. Notez que dans l'image ci-dessus, la vue Web standard (à gauche) rend certains éléments complètement inutilisables lorsqu'ils sont affichés sur un appareil plus petit.

Un tel comportement augmentera également les chances que votre utilisateur fasse une erreur, ralentissant son expérience. En pratique, cela peut se manifester par une diminution du nombre de pages vues, moins de ventes et moins d'engagement global.

Autres éléments de conception réactifs

Lors de l'utilisation de requêtes média, il convient de garder à l'esprit le comportement de tous les éléments de la page, pas seulement ceux qui sont ciblés, en particulier lors de l'utilisation de grilles fluides, auquel cas (par opposition aux dimensions fixes) la page sera entièrement remplie à tout moment. moment, augmentant et diminuant la taille du contenu proportionnellement. Étant donné que les largeurs sont définies en pourcentages, les éléments graphiques (c'est-à-dire les images) peuvent être déformés et mutilés sous une disposition aussi fluide. Pour les images, une solution est la suivante :

 img { max-width: 100% }

D'autres éléments doivent être traités de manière similaire. Par exemple, une excellente solution pour les icônes dans RWD consiste à utiliser IconFonts.

Quelques mots sur les réseaux fluides

Lorsque nous discutons du processus d'adaptation complète de la conception, nous examinons souvent l'expérience visuelle optimale (du point de vue de l'utilisateur). Une telle discussion devrait inclure une utilisation facilitée maximale, l'importance des éléments (basée sur les régions de page visibles), une lecture facilitée et une navigation intuitive. Parmi ces catégories, l'un des composants les plus importants est l'ajustement de la largeur du contenu . Par exemple, les systèmes dits de grille fluide ont des éléments définis, c'est-à-dire des éléments basés sur des largeurs relatives en pourcentage de la page globale. De cette façon, tous les éléments du système de conception Web réactif s'adaptent automatiquement à la taille de la page.

Bien que ces systèmes de grilles fluides soient étroitement liés à ce dont nous avons discuté ici, ils constituent en réalité une entité à part entière qui nécessiterait un didacticiel supplémentaire pour en discuter en détail. Par conséquent, je mentionnerai simplement quelques frameworks majeurs qui prennent en charge un tel comportement : Bootstrap, Unsemantic et Brackets.

Conclusion

Jusqu'à récemment, l'optimisation de site Web était un terme exclusivement réservé à la personnalisation des fonctionnalités en fonction de différents navigateurs Web. Parallèlement à la lutte inévitable avec les différentes normes de navigateur auxquelles nous sommes confrontés aujourd'hui, ce terme suppose désormais de s'adapter aux appareils et aux tailles d'écran avec une conception Web réactive également. Pour le couper sur le Web moderne, votre site doit savoir non seulement qui le consulte, mais aussi comment .