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

outils de détection de fuites de mémoire java

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

Pourquoi cela vaut-il la peine d'étudier site Web adaptatif exemples et vous vous concentrez sur RWD? Certains concepteurs Web, par exemple, s’efforcent de garantir une expérience utilisateur stable sur tous les navigateurs, passant souvent des jours entiers à résoudre de petits problèmes avec Internet Explorer.

C'est une approche insensée.

Certains concepteurs Web passent des jours entiers à résoudre de petits problèmes avec Internet Explorer et laissent leurs utilisateurs mobiles comme des visiteurs de seconde main. C'est une approche insensée.

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 tous navigateur trafic, en baisse d'environ 4% par rapport à la même période l'année dernière (selon W3Schools ). Si vous optimisez pour un navigateur spécifique, plutôt que pour la population mondiale de smartphones, vous manquez 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 pour taux de conversion , SEO , taux de rebond , et plus.

L'approche de conception Web réactive

Ce qui est souvent ignoré à propos de RWD, c'est qu'il ne s'agit pas seulement d'ajuster l'apparence de vos pages Web; à la place, l'accent doit ê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, par exemple, l'écran tactile. Tu n'es pas d'accord? Vos dispositions réactives pour mobile et bureau doivent refléter ces différences.

Dans le 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 consulté - une telle approche est tout simplement irréalisable. Au lieu de cela, la solution consiste à mettre en œuvre 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 tutoriel de responsive design: utilisation Requêtes multimédias CSS , pseudo-éléments , des dispositions de grille de jeu flexibles et d'autres outils pour s'ajuster dynamiquement à une résolution donnée.

Requêtes multimédias dans le Responsive Design

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

@media screen { * { background: silver } }

ou

max-width

Dans CSS3 , vous pouvez définir des styles en fonction de la largeur de la page. La largeur de la page étant en corrélation avec la taille de l'appareil de l'utilisateur, cette fonctionnalité vous permet donc de définir différentes dispositions 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 au paramétrage des propriétés de base: device-width, orientation, color et @media screen and (min-width: 480px) { div { float: left; background: red; } ....... } . 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 ou portrait).

L'exemple de CSS réactif ci-dessous montre la procédure pour lancer 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.

initial-scale

Nous pouvons également définir différents styles dans la même feuille de style CSS afin 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 à 480px:

user-scalable=false

«Zoom intelligent»

Les navigateurs mobiles utilisent ce qu'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) un zoom lancé par l'utilisateur (par exemple, en appuyant deux fois sur l'écran d'un iPhone pour zoomer sur le site Web actuel), et (2) en affichant initialement 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 susceptibles de cibler le zoom intelligent, il est souvent souhaitable (voire nécessaire) de désactiver le zoom et de garantir que le contenu de votre page remplit toujours le navigateur:

display: none;

Par réglage :before à 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 devrait 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 :after.

Largeurs de page

Supposons que vous souhaitiez proposer 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 devriez-vous cibler comme valeurs limites (par exemple, 480 pixels)?

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

réflexion conceptuelle pour la stratégie d'entreprise

• 320px
• 480px
• 600 px
• 768px
• 900px
• 1 024 pixels
• 1 200 px

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

Avec l'un 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 mentionnés ci-dessus - 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 téléphones intelligents, les tablettes / ordinateurs portables et les ordinateurs de bureau.

Éléments Psuedo

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

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

Mais au-delà de cela, vous pouvez également faire preuve de créativité avec CSS pseudo-éléments (sélecteurs), par exemple, p:first-line et p. Remarque: encore une fois, les pseudo-éléments sont supportés 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 a:visited pseudo-élément vous permet de définir des styles uniquement sur la première ligne d'un certain sélecteur (par exemple, a s'appliquera à la première ligne de tous les .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:''; } } s). De même, le :before Le pseudo-élément vous permettra de définir des styles sur tous les :after s avec des liens précédemment visités par l'utilisateur. De toute évidence, ceux-ci peuvent être utiles.

Voici un exemple de conception adaptative simple dans lequel nous créons trois mises en page différentes pour un bouton de connexion, une pour le bureau, la tablette et le smartphone. Sur le smartphone, nous aurons une icône isolée, 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'instructions ('Insérez votre nom d'utilisateur').

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

En utilisant uniquement le img { max-width: 100% } et

pseudo-éléments, nous réalisons ce qui suit:

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

la meilleure façon de différencier les éléments du graphique est d'utiliser

Alors, par où dois-je commencer?

Dans ce didacticiel, nous avons défini 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 à suivre consiste à organiser tous les éléments de votre page Web dans 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 de sorte de menu principal. Mais lorsque des appareils avec une résolution inférieure sont en cours d'utilisation (par exemple, une tablette ou un smartphone), il peut être judicieux que ce menu principal soit affiché en pleine largeur. Avec les requêtes multimédias, vous pouvez implémenter ce comportement comme suit:

|_+_|

Malheureusement, cette approche de base est souvent insuffisante car votre front-end se complique. L'organisation du contenu d'un site étant souvent très différente entre les versions mobile et de bureau, l'expérience utilisateur dépend finalement de l'utilisation non seulement de CSS réactif, mais également de HTML et de JavaScript.

Lors de la détermination des dispositions 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 smartphones est plus exigeant. Plus que jamais, il est nécessaire de regrouper des contenus spécifiques et de définir hiérarchiquement l’importance des différentes parties.

Pour un smartphone, il est plus important que jamais de regrouper des contenus spécifiques et de définir hiérarchiquement l'importance des pièces individuelles.

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

De plus, si vous laissez des boutons sur votre site qui s'affichent ensuite sur les smartphones plus petits qu'un doigt classique, vous créerez une incertitude dans l'utilisation et la sensation 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 visualisé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 des pages vues, moins de ventes et moins d'engagement global.

Autres éléments de conception adaptative

Lors de l'utilisation de requêtes multimédias, 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 proportionnellement la taille du contenu. Comme 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 telle disposition fluide. Pour les images, une solution est la suivante:

javascript obtenir la date sans heure

D'autres éléments devraient être traités de manière similaire. Par exemple, une excellente solution pour les icônes dans RWD est d'utiliser IcôneFonts .

Quelques mots sur les réseaux fluides

Lorsque nous discutons du processus d’adaptation complète de la conception, nous examinons souvent une 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 (en fonction des régions de page visibles), une lecture facilitée et une navigation intuitive. Parmi ces catégories, l'un des éléments les plus importants est ajustement de la largeur du contenu . Par exemple, les systèmes dits de grille fluide ont des éléments fixes, c'est-à-dire des éléments basés sur des largeurs relatives en tant que pourcentages de la page globale. De cette manière, tous les éléments du site Web adaptatif le système s'adapte automatiquement à la taille de la page.

Bien que ces systèmes de grille fluide soient étroitement liés à ce dont nous avons discuté ici, ils constituent en réalité une entité entièrement distincte qui nécessiterait un didacticiel supplémentaire pour en discuter en détail. Par conséquent, je mentionnerai simplement quelques cadres majeurs qui prennent en charge un tel comportement: Amorcer , Non sémantique , et Supports .

Conclusion

Jusqu'à récemment, l'optimisation du site Web était un terme exclusivement réservé à la personnalisation de 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. Pour le couper sur le web moderne, votre site doit savoir non seulement qui est le regarder, mais Comment .