This page has been robot translated, sorry for typos if any. Original content here.

5 règles d'or du web design "adaptatif"

5 золотых правил «адаптивного» веб-дизайна

En mai 2010, Ethan Markott dans son article pour "A List Apart" a écrit le concept de web design adaptatif (responsive), lançant ainsi une nouvelle direction.

l'article a attiré l'attention d'un large public qui a forcé l'auteur à écrire un livre entier sur l'adaptation du design.

Une description détaillée des mises en page basées sur des maillages, des images flexibles et l'utilisation de requêtes média a radicalement changé le processus de création de sites magnifiques.

Depuis lors, la conception Web adaptative est devenue l'un des sujets les plus discutés dans la communauté du design.

Conception orientée contenu

Avant de prendre un crayon ou d'ouvrir Photoshop, il semble approprié d'armer la stratégie de contenu. Il est nécessaire de se faire une idée précise du contenu destiné à un site particulier. Après tout, cela n'a pas de sens d'exécuter le site sans se rendre compte du type de matériel sur lequel le matériel sera placé.

5 золотых правил «адаптивного» веб-дизайна

Si vous avez du contenu, vous pouvez déjà expérimenter la façon dont tout va ressembler - pour créer un cadre pour le contenu. Ce terme a été proposé par Stephen Hey dans le livre Responsive Design Workflow, qui consiste à utiliser les blocs rectangulaires de base pour créer une mise en page pour le contenu.

Cette technique est idéale pour démontrer la disposition de base des modèles de base. Les principaux composants de la navigation, éléments de navigation cachés, pied de page et modules secondaires. Tout d'abord, le cadre est créé, sans détails excessifs - des éléments supplémentaires seront ajoutés plus tard.

Il est alors nécessaire de penser aux points de contrôle "adaptatifs". Pour le contenu généré dans la stratégie de contenu, une mise en page simple colonne conçu pour les appareils mobiles fera l'affaire. Ceci est mieux fait dans le navigateur, en utilisant des éléments HTML de base, mais plus à ce sujet après.

En restreignant la conception à une colonne, vous pouvez déjà penser à la hiérarchie du contenu de la page. Quel est le composant d'information le plus important de la page? Où devrait être situé l'appel principal à l'action? Est-il sensé de lire la page du début à la fin?

Après avoir établi la procédure requise pour la soumission des informations, il semble approprié d'élargir le contenu du contenu, mais pas dans la mesure où le contenu semble trop étiré. Il est nécessaire de fixer la largeur. Ce sera le premier point de contrôle.

Ensuite, ajustez la disposition de la page pour qu'elle corresponde à la nouvelle largeur, en ajoutant une colonne, par exemple, pour la barre latérale.

Concevoir dans le navigateur

Gardez à l'esprit que les éléments visuels plats et les mises en page de Photoshop compliquent également le processus de création d'un site Web, fournissant une vue de l'apparence du site en fonction des paramètres du navigateur.

5 золотых правил «адаптивного» веб-дизайна

Mais le résultat final est presque toujours différent de celui initialement prévu. Expansion des éléments, en augmentant l'espace autour d'eux et d'autres nuances affectent tous le résultat.

Le problème avec les éléments visuels est qu'ils semblent trop bons. Les images sont claires, la typographie est lissée, l'application de l'effet d'ombre et les modes de fusion font du site une œuvre d'art. Mais les attentes du client doivent être équilibrées avec ce qui se traduira par la fin.

Cela aidera le prototype, créé avec HTML et CSS (feuilles de style en cascade), qui peuvent ensuite être soumis à diverses manipulations. Démontrer au client comment le design se présente sur différents appareils et à différentes largeurs d'écran.

Ne vous inquiétez pas que vous ne soyez pas un assistant d'interfaces externes, car il existe des outils qui vous permettent de réaliser des prototypes (Macaw, Webflow et Adobe Edge Reflow). Vous pouvez également utiliser les conseils d'un développeur, mais il est d'avis qu'au début, il est préférable d'apprendre les bases - cela vous aidera à avoir une idée du processus de création d'une conception web adaptative.

L'un des avantages de cette stratégie est qu'elle réduit le temps nécessaire pour apporter des modifications.

Supposons qu'il existe 20 mises en page Photoshop (ou Fireworks), chacune en trois versions (pour le bureau, la tablette et l'appareil mobile), et que la tâche consiste à mettre à jour le style du bouton pour le site ou les éléments de navigation. Cela signifie que vous devez traiter 60 pages pour changer le style, bref, le travail prend beaucoup de temps.

Mais grâce à de simples manipulations avec CSS, un tel changement ne devra être fait qu'une seule fois - les mises à jour seront appliquées à toutes les pages disponibles. À long terme, cela permettra de gagner du temps.

Entre autres choses, il sera possible de tester les capacités des appareils avec différentes tailles d'écran. La plupart des outils mentionnés sont remplacés par les paramètres déjà définis des fenêtres de visualisation, mais vous pouvez exporter votre propre design et l'adapter à un navigateur spécifique. Ainsi, il est possible de transférer l'expérience de mobilité souhaitée.

Développement d'une bibliothèque de patterns

L'un des éléments clés de presque tous les projets RWD est un guide de style. Il comprend généralement les styles de base du projet et les dispositions interactives de tous les modules.

5 золотых правил «адаптивного» веб-дизайна

À ce stade, il est nécessaire de déterminer chacun des modèles d'expérience d'interaction.

Fireworks utilise des symboles et des styles pour les composants et modules communs. Pour une bonne conception, il est nécessaire d'illustrer comment chaque module sera adapté aux points de contrôle sélectionnés.

Le développeur Brad Frost a proposé le concept de conception Web atomique, pour sa description, il utilise une terminologie quelque peu scientifique. Les principaux styles de la marque, il appelle les atomes qui constituent la base du design. Des éléments tels que la couleur, la police et les icônes correspondent aux éléments de base de HTML pour la formulation de "molécules". Les molécules sont utilisées pour créer des "organismes". Prenez, par exemple, un bouton de recherche. Dans ce cas, un formulaire d'entrée et une étiquette peuvent être ajoutés au bouton.

Ensuite, il y a un mélange avec d'autres organismes pour créer des «gabarits», par exemple des en-têtes. À leur tour, les modèles vous permettent de créer des pages déjà - et voilà! Vous avez Atomic Web Design.

Cette théorie est applicable à la structure de la bibliothèque de motifs. Tout d'abord, les styles de la marque sont créés, puis ils peuvent être adaptés aux éléments HTML, etc. Votre bibliothèque de modèles sera en mesure de raconter l'histoire du projet - sur la façon dont la marque du client a commencé à regarder d'une nouvelle manière sur le réseau. Pour les développeurs, vous devez ajouter des notes et des fragments de programme liés à une option de menu spécifique à l'écran.

Après un certain temps, le laboratoire de modèles peut se transformer en une conception Web modifiable, à mesure que le passage de la conception de la page à la conception des composants du système est effectué.

Polyvalence

Lors de la conception d'un design, il est impossible de prévoir toutes les nuances de l'expérience utilisateur, en particulier en ce qui concerne les appareils mobiles. Il existe littéralement des centaines de scénarios différents sur la façon d'utiliser le site - tout cela à cause du grand nombre de smartphones et de tablettes, qui diffèrent par la taille de l'écran, les paramètres de résolution et le type de saisie de données.

5 золотых правил «адаптивного» веб-дизайна

Le design devrait s'adapter à n'importe quel environnement. Énumérés ci-dessous sont les points qui peuvent être utiles.

Méthode éprouvée

La plupart des appareils mobiles modernes sont équipés d'un écran tactile, vous devez donc prendre en compte la taille des éléments d'interface interactifs. Il n'y a pas de consensus sur la zone idéale pour un smartphone à exploiter. Les ingénieurs d'Apple choisissent 44px, les gens de Microsoft affirment que 34px est meilleur.

Peut-être que l'utilisation de 48px semble plus pratique lors du développement d'éléments interactifs. Pour chaque zone, au moins 6px est à gauche, et généralement 12px est pour la couche de base. À l'ère de la conception générale et de la grande taille, beaucoup de sites d'aujourd'hui laissent un peu plus de place aux ordinateurs de bureau. Ces éléments élargis devraient également être utilisés sous forme de formulaires - pour la simplicité et la conformité avec les appareils mobiles. Certaines personnes préfèrent concevoir leurs propres champs de formulaire étendus pour correspondre au style du site.

Mais pour les appareils mobiles, il est recommandé d'utiliser des commandes "natives" si possible. Les claviers et un menu déroulant doivent être optimisés pour un périphérique particulier. Et encore une chose: supprimer la sélection du lien lorsque vous passez le curseur sur les appareils mobiles.

Certains ajustements peuvent considérablement élargir l'expérience de l'interaction. Mais rien ne peut être pire que de presser plusieurs fois l'écran tactile pour effectuer une tâche spécifique. Et tout cela à cause de l'omission dans la partie de sélection lorsque vous passez le curseur.

Navigation

L'une des questions les plus fréquentes qui se posent au cours du développement d'un site Web «adaptatif» est la façon d'organiser la navigation. Pour cela, il existe plusieurs façons, en fonction du nombre de points de contrôle.

Liens de saut

L'une des techniques les plus simples et les plus polyvalentes pour la navigation mobile est le menu du lien de saut. C'est essentiellement un lien-ancre, qui fournit à l'utilisateur un menu au bas de la page.

Cela ne nécessite pas de JavaScript ou d'autres scripts supplémentaires, ce qui permettra une universalisation pour tous les navigateurs et appareils.

Liste déroulante

Un autre modèle de navigation commun est le menu déroulant, lorsque l'icône de menu offre la possibilité de naviguer avec l'ajout d'une animation fluide. Pour cette technique, javascript est nécessaire - pour placer le menu sous le bouton, puis le cacher jusqu'à ce que l'utilisateur en a besoin.

Dans certains éléments de navigation, un élément graphique "Garnishka" peut être utilisé à cette fin, ce qui vous permet d'afficher les niveaux de navigation sans télécharger chacune des pages.

Sans toile

Cette méthode est peut-être la plus populaire dans RWD, car les sites ont de plus en plus recours à des applications. Le pionnier est devenu Facebook avec ses applications mobiles, il donne aux développeurs Web une chance de placer la navigation du site au bord de la fenêtre de visualisation et de le déplacer à la demande de l'utilisateur.

Sur des sites comme Teehan + Lax et Squarespace, la technique décrite est utilisée comme seule méthode de navigation. Il y a une opinion que dans peu de temps cela deviendra une tendance dans RWD.

Versions mobiles de sites orientés sur les tâches

Un autre point important à prendre en compte lors du développement d'une version mobile est l'emplacement des contrôles en haut de la page. Au dessus du "pli".

Les développeurs affirment que dans le domaine de la conception de sites Web, il n'y a pas de "pli", il est apparu récemment un grand nombre de nouveaux périphériques avec une résolution différente, ce qui complique encore la tâche de déterminer la ligne de pliage. En fonction de la taille du plus petit appareil, il est possible de déterminer ce que l'on appelle la "zone de sécurité".

En raison du fait que les utilisateurs d'appareils mobiles ont tendance à être mobiles et ont un temps et une bande passante limités, il est important que la surface de tout élément de la catégorie "appel à l'action" soit toujours située en haut de l'écran. - ci-dessous.

Un exemple frappant est le design mobile pour le commerce électronique, où de nombreuses pages consacrées aux produits contiennent, avec la navigation sur le site, le nom du produit, le prix, les images en miniature et les appels pour acheter tout ce qui est au-dessus du seuil. Le contenu secondaire, tel que les caractéristiques et spécifications du produit, peut être placé au bas du site.

Cela est possible grâce à une stricte conformité à la stratégie de contenu et à une analyse attentive de l'apparence du haut du site dans l'application.

5 золотых правил «адаптивного» веб-дизайна

Productivité

Il est impossible de prédire quel appareil sera entre les mains de l'utilisateur et quelle connectivité il aura. Par conséquent, il est nécessaire de créer la conception d'un site «adaptatif», en gardant à l'esprit la performance. Personne ne veut perdre de temps et attendre, surtout sur Internet. Si le site ne se charge pas dans quelques secondes, l'utilisateur peut partir.

5 золотых правил «адаптивного» веб-дизайна

Si le site a un bon design et que tous les autres composants sont également en ordre, les utilisateurs y reviendront certainement. La principale chose que vous devriez faire attention est de rendre les pages aussi légères que possible. Plus de 60% du "poids" de la plupart des sites - ce sont juste des images. Le reste: scripts, feuilles de style et autres éléments multimédias.

Le moyen le plus simple de réduire la taille des fichiers de site consiste à les exporter directement depuis l'application graphique. Cependant, cela ne suffit pas. En particulier, lors de l'utilisation de fichiers PNG.

Des sites tels que TinyPNG aident à réduire le poids des fichiers, à réinitialiser le ballast des données supplémentaires et à réduire la couleur. De tels portails sont une véritable découverte, et de nombreux concepteurs ajoutent TinyPNG à un ensemble d'outils fréquemment utilisés.

Images "adaptatives"

En plus de réduire la taille des images, il est parfois important que différentes images conviennent à différents appareils. Après tout, les énormes images (pour des centaines de kilooctets) ne sont pas destinées aux appareils mobiles qui ont des limitations de données et une mauvaise connectivité 3G.

Il existe de nombreux scripts qui aideront à atteindre cet objectif (Picturefill Scotia Gelfi et Adaptive Images), en fonction des besoins du site et des capacités du serveur. Mais ne t'en fais pas pour ça. Les concepteurs de sites Web indiquent généralement comment les images seront adaptées aux différents points de contrôle et appareils et effectuent les ajustements nécessaires. Idéalement dans le guide de style ou les modèles de laboratoire.

Tronquer le script

Une taille de site importante peut également dépendre de divers scripts, tels que Javascript et des feuilles de style CSS supplémentaires.

Quelqu'un peut dire que les développeurs devraient s'inquiéter de tout cela, et auront raison - mais seulement en partie.

Si la compatibilité d'un site avec un appareil mobile est placée au premier plan, CSS, ainsi que toutes les autres feuilles de style pour les grands points de contrôle, doivent être correctement écrits.

Le montant total de l'animation est quelque chose qui nécessite une surveillance constante. Par l'animation dans ce cas, tout ce qui bouge et nécessite l'écriture de scripts est implicite. L'animation augmente considérablement la taille des fichiers.

Pour les néophytes, pour la première fois travaillant sur des sites mobiles, il est préférable d'aller d'abord sur le chemin de moindre résistance, en se limitant à la plupart des éléments statiques. S'il y a un besoin d'ajouter une belle diapositive - vous pouvez expérimenter un peu et voir comment cela va affecter les performances du site.

Soumission du contenu en petites portions

Un bon moyen de réduire la taille des fichiers et d'augmenter ainsi la productivité consiste à «couper» le contenu en petites parties et à le fournir au besoin lorsque les utilisateurs sont invités à le faire. Il ne s'agit pas de segmenter tout le contenu, mais seulement secondaire.

Il existe de nombreuses techniques progressives, par exemple, «load on scroll» - utilisé par de nombreux réseaux sociaux pour les flux de nouvelles - afin que les utilisateurs puissent télécharger plus de contenu en fonction des besoins (au lieu de charger accidentellement plus de contenu).

Un autre moyen utile qui fournit plus de détails et vous permet de visualiser plus d'informations secondaires est d'afficher du contenu sur la page suivante pour la visualisation mobile. Par exemple, vous pouvez mettre un lien soigné pour aller à une page où il y a plus d'informations.

Et en conclusion ...

Les jours où les concepteurs de sites Web devaient se soucier seulement de combiner le contenu avec la couleur, les styles typographiques des pages Web et d'autres choses, ont irrémédiablement disparu. Le monde du design a subi des changements dramatiques: maintenant, les développeurs Web ne sont pas embauchés pour simplement peindre un cadre détaillé dans un projet cascade typique.

Il est nécessaire de prendre en compte beaucoup de points, d'avoir une idée sur le processus de construction d'un site et de sélectionner des priorités pour un contenu qui réponde aux exigences de l'utilisateur. Tout est sélectionné expérimentalement, seulement en transférant la théorie sur le plan pratique, il est possible de comprendre toutes ces nuances.

L'industrie du design Web essaie de suivre l'époque et de prendre en compte les réalités modernes, lorsqu'un grand nombre d'appareils mobiles sont produits. Il est temps d'élargir l'horizon de conception et de faire un peu mieux la portée de la conception Web - pour chaque appareil électronique.

Dans cette note, cinq caractéristiques de la conception Web adaptative ont été présentées, mais il y en a, bien sûr, beaucoup plus. Et au moment où le lecteur maîtrise ce texte, une liste de toutes sortes de nuances sera réapprovisionné avec quelque chose de nouveau.

Nous exprimons notre gratitude à la rusabilité pour l'excellent matériel.