Fermer

septembre 8, 2021

Décisions des développeurs pour la création de composants flexibles —


Résumé rapide ↬

L'une des compétences clés d'un développeur front-end est d'être capable de prendre des conceptions et de les transformer en code. Ces conceptions sont souvent présentées sous forme de maquettes statiques, qui visualisent l'expérience « idéale » de la navigation sur le site Web.

Dans le monde réel, le contenu diffère souvent considérablement du contenu soigné et parfaitement adapté présenté dans les conceptions. De plus, sur le Web moderne, les utilisateurs disposent d'une gamme toujours plus étendue d'options pour accéder aux sites que nous construisons.

Dans cet article, nous allons parcourir le processus de conception d'un texte apparemment simple. -and-media et décider de la meilleure façon de le traduire en code, en gardant à l'esprit les besoins des utilisateurs et des auteurs de contenu. Nous n'allons pas approfondir comment le coder – plutôt les facteurs qui détermineront nos décisions de développement. Nous examinerons les questions que nous devons nous poser (à nous-mêmes et aux autres parties prenantes) à chaque étape.

Changer notre mentalité de développement

Nous ne pouvons tout simplement plus concevoir et développer uniquement pour un contenu ou des conditions de navigation « optimales ». Au lieu de cela, nous devons adopter la flexibilité et l'imprévisibilité inhérentes au Web et créer des composants résilients. Les maquettes statiques ne peuvent pas répondre à tous les scénarios, de sorte que de nombreuses décisions de conception incombent aux développeurs au moment de la construction. Qu'on le veuille ou non, si vous êtes un développeur d'interface utilisateur, vous êtes un designer – même si vous ne vous considérez pas comme tel !

Dans mon travail à l'agence Web spécialisée WordPress Atomic Smash nous créons des sites Web pour les clients qui ont besoin d'une flexibilité maximale à partir des composants que nous fournissons, tout en veillant à ce que le site ait toujours fière allure, quel que soit le contenu qu'ils y lancent. Parfois, interpréter une conception signifie demander au concepteur de développer davantage ses idées (ou même de les réévaluer). D'autres fois, cela signifie prendre des décisions de conception à la volée ou faire des recommandations basées sur nos connaissances et notre expérience. Nous examinerons quelques-uns des cas où ces approches pourraient être appropriées dans cette étude de cas.

La ​​conception

Nous commençons par une conception simple pour un composant texte et média – quelque chose d'assez courant sur les pages de destination des produits . Il se compose d'une image ou d'une vidéo à gauche et d'une colonne à droite contenant un titre, un paragraphe de texte et un lien d'incitation à l'action. Cette conception est destinée à une startup (fictive) qui aide les personnes souhaitant acquérir une nouvelle compétence à trouver un tuteur.

La conception initiale du composant text-and-media

La conception initiale du text-and-media composant. ( Grand aperçu)

Remarque : Si vous souhaitez accéder directement au code et afficher toutes les solutions possibles sur ce composant, vous pouvez le trouver dans cette démo Codepen.

Plus après saut! Continuez à lire ci-dessous ↓

Layout And Order

Le concepteur a stipulé que chaque autre composant devrait avoir la mise en page inversée afin que l'image soit à droite et la colonne de texte sur la gauche.

Modèles de bureau et mobiles

Modèles de bureau et mobiles. ( Grand aperçu)

Dans la mise en page mobile, cependant, l'image est empilée au-dessus du contenu du texte dans tous les cas. En supposant que nous construisions cette mise en page à l'aide de Grid ou de flexbox, nous pourrions utiliser flex-direction ou la propriété order pour réorganiser la mise en page pour chaque deuxième composant :

.text-and- media:nième-enfant(pair) {
    flex-direction : rangée-inverse ;
}

Il convient de garder à l'esprit que bien que ceux-ci réorganisent visuellement le contenu, cela ne modifie pas l'ordre DOM. Cela signifie que pour une personne malvoyante naviguant sur le site à l'aide d'un lecteur d'écran, l'ordre du contenu peut ne pas sembler logique, sautant de gauche à droite à droite à gauche.

À titre personnel, dans le cas où le seul contenu dans l'une des colonnes est une image, je pense que l'utilisation de la propriété order est plus ou moins correcte. Mais si nous avions deux colonnes de texte, par exemple, la réorganisation avec CSS pourrait créer une expérience déroutante. Dans ces cas, nous avons d'autres options qui s'offrent à nous. Nous pourrions :

  1. Faire part de nos préoccupations en matière d'accessibilité et recommander que, pour les mises en page mobiles, l'ordre visuel soit modifié pour correspondre à l'ordre du bureau.
  2. Utilisez Javascript pour réorganiser les éléments dans le DOM.

Nous devons également déterminer si pour appliquer l'ordre via le sélecteur :nth-child ou pour permettre au client de contrôler l'ordre (en ajoutant une classe au composant, par exemple). La pertinence de chaque option dépendra probablement du projet. Il permet à l'image de conserver un rapport hauteur/largeur idéal. Mais que se passe-t-il si le texte est plus long ou plus court que ce qui est présenté ? Commençons par le premier.

Contenu plus long

Nous pouvons définir une limite de caractères sur le champ de texte dans notre CMS choisi (si nous sommes si enclins), mais nous devrions autoriser au moins certains variation de notre composant. Si nous ajoutons un paragraphe plus long, la colonne média opposée pourrait se comporter de plusieurs manières :

  1. L'image ou la vidéo reste en haut, tandis que l'espace est ajouté en dessous (fig. 1).
  2. L'image ou la vidéo est centré, en ajoutant de l'espace en haut ou en bas (fig. 2).
  3. Les proportions de l'image ou de la vidéo sont mises à l'échelle pour correspondre à la hauteur, en utilisant object-fit: cover pour éviter la distorsion et assurer la l'image remplit l'espace disponible. Cela signifierait que certaines parties de l'image peuvent être coupées (fig. 3).

L'image ou la vidéo reste en haut, tandis que l'espace est ajouté en dessous

Fig. 1. ( Grand aperçu)

L'image ou la vidéo est centrée, ajoutant de l'espace en haut ou en bas

Fig. 2. ( Grand aperçu)

 Les proportions de l'image ou de la vidéo sont mises à l'échelle pour correspondre à la hauteur, en utilisant « ajustement à l'objet : couverture » ​​pour éviter la distorsion et garantir que l'image remplit l'espace disponible.

Fig. 3. ( Grand aperçu)

Nous avons décidé que l'option 3 était la plus agréable visuellement et que, pour la plupart, les auteurs de contenu seraient en mesure de trouver des images appropriées où une petite quantité de coupures serait acceptable. Mais cela présentait davantage un défi pour le contenu vidéo, où il y a plus de risque que des parties importantes puissent être coupées. Nous avons opté pour une autre option, qui consistait à créer une variante différente de la conception où la vidéo conserverait son rapport hauteur/largeur d'origine et serait contenue dans une largeur maximale au lieu de s'aligner sur le bord de la page.

 la vidéo conserve son origine. rapport hauteur/largeur, et il est contenu dans une largeur maximale au lieu de s'aligner sur le bord de la page.

( Grand aperçu)

Les auteurs de contenu pouvaient choisir cette option lorsqu'elle convenait mieux à leurs besoins.

De plus, nous avons choisi d'étendre ce choix aux cas où une image était utilisée à la place d'une vidéo. Il offre au client une plus grande variété d'options de mise en page sans nuire à la conception. Vu dans le contexte plus large de la page, cela pourrait même être considéré comme une amélioration, permettant des pages plus intéressantes lorsque plusieurs de ces blocs sont utilisés sur une page.

Contenu plus court

Traiter avec moins de contenu est un peu plus simple, mais toujours présent nous avec quelques problèmes. Comment l'image doit-elle se comporter lorsque le contenu du texte est plus court ? Doit-il devenir moins profond, de sorte que la hauteur totale du composant soit déterminée par le contenu du texte (fig. 4) ? Ou devrions-nous définir un rapport hauteur/largeur minimum, afin que l'image ne devienne pas une boîte aux lettres, ou permettre à l'image de prendre sa hauteur naturelle et intrinsèque ? Dans ce cas, nous avons également la considération d'aligner le texte au centre ou vers le haut (fig. 5 et 5a).

l'image où la hauteur totale du composant est déterminée par le contenu du texte

Fig . 4. ( Grand aperçu)

l'image où le texte est aligné au centre

Fig. 5. ( Grand aperçu)

l'image où le texte est aligné en haut

Fig. 5a. ( Grand aperçu)

Heading Length

N'oublions pas que nous devrons également tester des titres de différentes longueurs. Dans la conception, les en-têtes sont courts et accrocheurs, s'enroulant rarement sur une deuxième ligne. Mais que se passe-t-il si un titre comporte plusieurs lignes ou si le contenu utilise beaucoup de mots longs, ce qui entraîne un habillage du texte différent ? Cela peut particulièrement poser problème dans des langues telles que l'allemand, où les mots ont tendance à être beaucoup plus longs que l'anglais, par exemple. La taille de la police de titre dans la conception permet-elle une longueur de ligne appropriée lorsqu'elle est utilisée dans cette mise en page ? Les mots longs doivent-ils être coupés lorsqu'ils se terminent ? Cet article d'Ahmad Shadeed aborde le problème de la longueur du contenu et inclut quelques conseils pratiques sur les moyens de le gérer dans CSS.

Les auteurs de contenu sont-ils autorisés à omettre complètement un titre là où cela leur convient ? Cela nous amène à la considération suivante.

Omission de contenu

Construire ce composant de la manière la plus flexible possible signifie s'assurer que les auteurs de contenu peuvent omettre certains champs tout en conservant l'apparence et le fonctionnement corrects de la conception. Il semble raisonnable que le client souhaite omettre le corps du texte, le lien ou même l'en-tête lorsqu'il utilise ce composant à l'état sauvage. Nous devons prendre soin de tester avec toutes les combinaisons imaginables de contenu, afin que nous puissions être sûrs que notre composant ne se brisera pas sous l'effet du stress. Il est recommandé de s'assurer que nous n'affichons pas de balises HTML vides lorsque le contenu du champ n'est pas présent. Cela nous aidera à éviter les bogues de mise en page imprévus.

Test du composant avec le corps du texte omis et les liens omis, respectivement

Test du composant avec le corps du texte omis et les liens omis, respectivement. ( Grand aperçu)

Nous pouvons restreindre les auteurs de contenu avec des champs « requis » dans le CMS, mais peut-être pourrions-nous également envisager des scénarios dans lesquels un client pourrait choisir d'omettre l'image, ou, au contraire, sans tout du contenu du texte ? Il pourrait être utile de leur fournir ces options. Voici un exemple de la façon dont nous pourrions choisir de rendre le composant dans ces cas :

le scénario dans lequel un client choisit d'omettre l'image

(Large preview)

En indentant un peu plus le texte et en augmentant la largeur du corps du texte, nous pouvons le garder équilibré, même s'il n'y a pas d'image.

Omettre du contenu est un scénario. Mais chez Atomic Smash, nous avons constaté que le plus souvent, les clients voulaient avoir la possibilité d'ajouter plus d'un lien au composant. Cela nous présente un autre choix : comment mettre en page plusieurs liens ? Est-ce qu'on les dispose côte à côte (fig. 8), ou les empile verticalement (fig. 8a) ? 8. ( Grand aperçu)

 le composant où les multiples maillons étaient disposés verticalement

Fig. 8a. ( Grand aperçu)

Comment traiter les titres de liens de longueurs très différentes ? Une astuce intéressante consiste à régler les largeurs des deux maillons sur la largeur maximale du plus long (fig. 9). (Cet article couvre juste cela.) Cela fonctionne bien pour les boutons empilés verticalement, alors que leur disposition horizontale nous offre encore plus de choix (fig. 9a).

le composant où les largeurs des deux liens sont réglés sur la largeur maximale du plus long

Fig. 9. ( Grand aperçu)

le composant où les boutons étaient disposés horizontalement

Fig. 9a. ( Grand aperçu)

Avons-nous besoin d'un style de lien secondaire pour les différencier ? Ce sont toutes des questions à considérer.

boutons avec deux styles différents qui aident à différencier les liens

Nous avons choisi d'ajouter un style de lien secondaire, pour aider à différencier les liens. ( Grand aperçu)

Nous devrons peut-être également déterminer (dans le cas d'un seul lien) si, en fait, la zone cliquable du lien doit englober l'intégralité du composant – afin que les utilisateurs puissent cliquer n'importe où dessus pour activer le lien. Ce choix pourrait peut-être dépendre du contexte plus large. C'est certainement courant dans les interfaces utilisateur basées sur des cartes.

Vidéo

Lorsque le composant est utilisé pour la vidéo plutôt que pour une image statique, nous pouvons remarquer que la conception omet certaines informations clés. Comment la lecture vidéo est-elle contrôlée ? En vol stationnaire? Est-ce qu'il joue automatiquement au défilement ? Devrait-il y avoir des commandes visibles pour l'utilisateur ?

Si la vidéo est lue en survol, nous devons considérer comment l'utilisateur d'un appareil sans capacité de survol accède au contenu vidéo. Alternativement, si la vidéo se lance automatiquement, nous devrions envisager de l'empêcher pour les utilisateurs ayant une préférence pour les mouvements réduits, qui peuvent souffrir de troubles vestibulaires (ou qui souhaitent simplement éviter les animations discordantes). Nous devrions également fournir un moyen à tous les utilisateurs d'arrêter la vidéo quand ils le souhaitent. les composants que nous construisons apparaîtront dans le contexte de la page Web globale. Nous devrons tenir compte de l'espacement, à la fois entre les composants du même type et dans une mise en page où d'autres composants sont intercalés.

Ces composants texte et multimédia sont conçus pour être utilisés avec parcimonie, créant un éclaboussement accrocheur de couleur et une rupture par rapport à une disposition par ailleurs linéaire. Mais en utilisant WordPress, un auteur de contenu pourrait facilement décider de créer une page entière composée uniquement de ces composants. Cela pourrait finir par sembler plutôt terne, et pas du tout l'effet que nous espérions!

Au cours du processus de construction, nous avons décidé d'ajouter une option pour omettre la couleur de fond. Cela nous permet de diviser la page et de la rendre plus intéressante :

Une page composée de différentes variantes du composant text-and-media

Une page composée de différentes variantes du composant text-and-media . ( Grand aperçu)

Nous pouvions soit appliquer un modèle à l'aide de :nth-childsoit ajouter un champ dans le CMS pour donner au client plus de contrôle créatif.

Bien que cela ne fasse pas partie de la conception d'origine, cela se voit qu'une ligne de communication ouverte entre le concepteur et le développeur peut aider à créer de meilleurs résultats en termes de conceptions plus flexibles et plus robustes. éléments HTML réels qui pourraient être autorisés dans le champ de texte du corps. Les auteurs de contenu peuvent vouloir ajouter plusieurs paragraphes, liens d'ancrage, listes, etc. au corps du texte. Chez Atomic Smash, nous aimons fournir un champ WYSIWYG (What You See Is What You Get) ou un champ de texte enrichi pour ces zones, ce qui peut permettre de nombreux éléments différents. Il est important de tester avec différents types de contenu et de style de manière appropriée, y compris en testant un contraste de couleur suffisant sur toutes les couleurs d'arrière-plan utilisées. ]Le style de lien dans le corps du texte ne respecte pas les directives WCAG pour le contraste des couleurs – nous devrons modifier le style en conséquence. ( Grand aperçu)

Conclusion

Nous avons abordé de nombreuses décisions différentes impliquées dans la construction de ce composant apparemment simple. Vous pourriez même penser à quelques autres que nous n'avons pas abordés ici ! En considérant chaque aspect du design et comment il pourrait être utilisé dans son contexte, nous avons abouti à quelque chose de beaucoup plus polyvalent, qui devrait, espérons-le, rendre les clients plus heureux ! plus de temps et d'attention seront nécessaires de la part d'un développeur. J'ai rassemblé ci-dessous une liste de contrôle des éléments à tester et à interroger lors de la création d'un composant, que vous pourriez trouver utile. Il peut également être adapté à différents composants.

Pouvoir dépasser la simplicité apparente, décomposer un composant en ses éléments constitutifs, poser des questions clés (avant même tout développement) et même envisager des utilisations futures, sont tous des compétences qui serviront bien à tout développeur lors de la création de sites Web – et vous aideront à fournir des estimations beaucoup plus précises si nécessaire. Une bonne communication d'équipe et un processus collaboratif solide sont inestimables pour la construction de sites résilients, mais le résultat final vaut la peine d'investir pour nourrir cette culture. Incorporons la flexibilité à nos processus de conception et de création.

La ​​liste de contrôle

Points à tester :

  1. Accessibilité de la mise en page (mobile et bureau). sont-ils rognés de manière appropriée ?
  2. Corps de texte plus long et plus court (y compris plusieurs paragraphes).
  3. Titre plus long et plus court (y compris différentes longueurs de mots).
  4. En omettant (diversement) le titre, le corps du texte, les liens et l'image.
  5. Plusieurs liens (y compris différentes longueurs de texte de lien).
  6. Accessibilité du contenu vidéo.
  7. Contenu texte WYSIWYG (inclure des liens, des listes, etc. dans le corps du texte).
  8. Test en contexte : inclure plusieurs composants (avec différentes options de contenu), ainsi que d'autres composants mélangés dans la mise en page.
Smashing Editorial" width="35" height="46" loading="lazy" decoding="async(vf, yk, il)




Source link