Après une courte pause avec des conférences, nous commençons le sprint du Nouvel An. Comme il y a un an, il sera entièrement composé de documents de la grande conférence FrontTalks, que Yandex a tenue à Iekaterinbourg. Commençons par un discours d'Anton Kastritsky - un développeur de Yandex.Market. Anton a montré par des exemples comment et à partir de quelles interfaces sont assemblées, et a également parlé des textes, de leur conception, de leur accessibilité et de leurs performances dans le contexte des applications Web modernes.
- Je m'appelle Anton, je travaille en tant que développeur d'interface dans l'équipe d'interface partenaire de Yandex.Market. Aujourd'hui, je veux parler de la typographie sur le web.
Avant cela, je veux raconter une courte histoire sur la façon dont il s'est avéré que ce sujet est proche et intéressant pour moi.
Une fois, j'ai pensé au fait que tout le monde ne comprend peut-être pas comment travailler avec du texte, des polices et afficher sur le Web. Et peut-être la première fois que j'y ai pensé, c'est quand j'ai voulu monter sur Yandex. J'ai été interviewé, j'avais une section avec mise en page. J'adore la mise en page, rien de compliqué, j'aime ça. Il fallait faire le composant, j'ai tout fait, super. Dans la description de la mission, il était écrit qu'il fallait définir les polices, il y avait Arial, Helvetica. Eh bien pas de problème, j'ai écrit Helvetica, Arial, sans-serif. Tout est comme il se doit. Mais l'intervieweur n'était pas d'accord, a dit que j'avais mal écrit. Cela m'a dérouté, je pensais que Yandex est une grande entreprise, ils attendent probablement beaucoup de moi. Sachez quelles sont les polices système et quelles sont les polices sûres. J'ai expliqué comment ils fonctionnaient et pourquoi j'avais tout noté tel quel.
L'intervieweur n'était pas immédiatement d'accord avec moi, mais en conséquence, nous avons compris que nous devions écrire Helvetica, Arial et non l'inverse. Je suis donc arrivé à Yandex. J'ai commencé à interviewer, j'ai trouvé ce problème, je l'ai résolu. Alors venez chez nous pour travailler, c’est super avec nous.
Avant de passer à la typographie, parlons de ce qu'est le texte.
Texte
Le texte est un outil qui nous aide à informer l'utilisateur de ses prochaines actions. Une grande partie du contenu sur Internet est du texte. Malgré le fait que des services tels qu'Instagram et YouTube soient désormais populaires, les gens consomment beaucoup de contenu multimédia, le texte occupe également une énorme place sur Internet et les gens le lisent toujours. C'est très important.
Qui travaille dans les entreprises où il y a un rédacteur ou un écrivain, qui est engagé dans les textes? Presque la moitié. Et qui propose le texte de l'application elle-même? Aussi à moitié.
Parfois, il arrive que le designer vous donne le design, vous commencez à le faire. Mais il y avait plusieurs conditions imprévues, et vous devez penser le texte vous-même. Presque tout wow. Dans de telles situations, cela devrait être dommage. J'ai eu l'impression que les développeurs sous-estiment le rôle des rédacteurs-rédacteurs dans l'entreprise, les méprisent et les présentent en quelque sorte.
Juste un tas de femmes d'art qui s'assoient au bureau et simulent très habilement le travail. Ce n'est en fait pas le cas.
Rédacteurs - comme ce prophète qui essaie de montrer à la jeune fille développeur comment cela devrait être en réalité, et elle fait de son mieux pour l'ignorer.
Le rôle des rédacteurs est très important. Ils peuvent avoir un impact direct sur le produit, proposer des solutions plus harmonieuses, des interactions, de la mécanique. Une personne, après avoir lu le texte sur la page, peut percevoir votre produit d'une manière complètement différente. Leur rôle est vraiment très important, ils doivent toujours être écoutés et pas comme cette fille qui essaie de travailler et de ne pas faire attention à ce que ce prophète lui diffuse. Essayez d'écouter vos rédacteurs et n'hésitez pas à leur poser des questions.
Il est également très important non seulement ce que vous écrivez, mais généralement en général. Je veux montrer un exemple réel. Nous avions un composant où l'utilisateur devait ajouter un numéro de téléphone.
Une énorme page avec des paramètres, tout est comme d'habitude. Il y avait une étiquette, un numéro, un bouton «Ajouter», l'utilisateur a cliqué dessus et une entrée téléphonique est apparue.
Après avoir réussi à entrer le numéro de téléphone, il devait cliquer sur la coche grise pour enregistrer.
Lorsque nous avons commencé à effectuer des tests UX, nous avons appris qu'un très petit nombre d'utilisateurs ont même deviné qu'il fallait cliquer sur le bouton gris pour enregistrer le numéro de téléphone. Qu'avons-nous fait? Une fois que l'utilisateur a correctement entré le numéro de téléphone, nous avons peint la coche en jaune et l'utilisateur a pu l'enregistrer.
Nous avons effectué des tests UX répétés. Un peu plus de gens ont compris comment enregistrer un numéro de téléphone.
À ce stade, il peut vous sembler que nos utilisateurs ont des problèmes d'interaction avec nos interfaces, ils les utilisent d'une manière ou d'une autre.
Mais en fait, le problème n'est pas avec les utilisateurs, mais avec nous, car nous ne pouvions pas clairement leur transmettre exactement ce que nous attendons d'eux. Par conséquent, aujourd'hui, ce composant est un peu différent: tout clique également sur le bouton, mais maintenant il a une fenêtre contextuelle avec des boutons explicites «annuler» et «enregistrer».
Après avoir correctement saisi le numéro de téléphone, le bouton «enregistrer» s'allume et l'utilisateur peut décider indépendamment s'il souhaite l'enregistrer ou non. S'il clique en dehors de la fenêtre contextuelle, la fenêtre contextuelle disparaîtra et il n'a pas encore ajouté le numéro.
De cela, nous pouvons conclure: n'ayez pas peur d'écrire des choses évidentes. Nous, les développeurs, passons beaucoup de temps sur Internet, nous voyons de nombreuses options d'interface graphique différentes pour savoir comment faire la même chose. Mais tous nos utilisateurs n'ont pas cette expérience. Faisons donc des interfaces plus simples et plus intuitives qu'il sera plus facile pour l'utilisateur de comprendre par lui-même.
Affichage
Parlons de la cartographie en général. Il est facile de deviner que toutes les règles d'affichage nous sont venues de l'impression.
Il est important de remplacer le fait que je suis développeur, et je ne peux pas le faire magnifiquement. Je sais comment le faire fonctionner, et quand tout va bien, et cela a fonctionné de manière productive. Par conséquent, je ne parlerai pas des empattements ou des différents types de polices. Je le ferai, mais plus tard.
Il y a beaucoup de contenu textuel et de services sur Internet où les utilisateurs vont exclusivement pour lire quelque chose.
Il me semble que l'un des services les plus pratiques est Medium. Je pense que tout le monde le connaît, ils entrent, lisent les nouvelles, surtout sur le sujet du frontend. Le service présente vraiment un contenu facile à lire. Mais je vais donner un contre-exemple, que nous avons tous utilisé.
Je ne connais pas une seule personne qui visite Wikipédia et qui lit quoi que ce soit avec plaisir. Il me semble que ce n'est pas une option lisible, bien qu'elle puisse être corrigée en suivant seulement deux ou trois règles.
La première consiste à avoir environ 10 mots par ligne.
Nous devons limiter la largeur du contenu du texte à environ 80 caractères. Cette règle peut ressembler aux paramètres de votre linter, car l'affichage du code, et le code lui-même, ainsi que le texte sur les sites, sont écrits de manière à être facilement perçus par une personne, pas un ordinateur.
Le deuxième est l'espacement des lignes. Lorsque vos lignes sont trop proches les unes des autres, les utilisateurs commencent déjà à avoir des difficultés avec la perception de cela.
Et agrandissez la police pour en faciliter la perception. Maintenant, Wikipédia prend une forme qui est déjà nettement plus facile à percevoir.
Et aussi, si l'espace d'écran est très important pour vous, vous pouvez ajouter des tirets.
Cela peut ne pas toujours fonctionner correctement avec du texte russe, mais cela peut aider à enregistrer quelques lignes.
N'oubliez pas que dans la langue russe, il existe de nombreuses règles d'orthographe. Nous devons nous débarrasser de choses comme suspendre des prétextes, nous assurer que, le cas échéant, il devrait y avoir de grands tirets, etc. Des outils comme
le Typographer peuvent vous y aider. Il suffit de passer votre texte à travers et c'est tout.
Si vous avez du texte statique, vous pouvez ajouter un
plugin babel pour le convertir lorsque vous créez votre application. Si votre texte est stocké dans un stockage externe, un tel
paquet npm peut être utile; avec lui, vous pouvez convertir le texte avant de l'envoyer au client.
Polices Web
Comment est-il arrivé que nous puissions utiliser différentes polices sur le Web?
Les développeurs adultes peuvent se rappeler que pendant longtemps, nous avons dû ajouter des images différentes si nous voulions transformer l'apparence du texte sur les pages. Plus tard, nous avons obtenu une balise de police. Et aujourd'hui, nous utilisons la propriété font-family, où nous listons les polices elles-mêmes dans l'ordre dans lequel nous voulons qu'elles soient appliquées. Si du coup le navigateur n'en trouve pas et n'en reconnaît pas, il ira tout simplement plus loin sur cette liste et utilisera ce qui suit.
Déjà aujourd'hui, nous avons un grand nombre de propriétés pour transformer l'affichage du texte.
Et je ne peux pas m'empêcher de mentionner une chose telle que les polices variables.
Cela nous aide à transformer davantage l'affichage de nos interfaces. Aujourd'hui, le soutien est déjà assez bon.
Une énorme quantité d'informations a été écrite sur cette technologie sur Internet au cours des deux dernières années, que nous ne nous attarderons pas sur elles maintenant.
Les polices
Il existe un grand nombre de polices. Mais je voulais aborder d'un point de vue technique et les diviser en plusieurs types.
Je pense que tous ceux qui lisent les spécifications, et pas seulement, savent qu'il existe des polices système préinstallées dans le système d'exploitation à partir de la boîte; Il existe des polices installées que l'utilisateur a installées indépendamment; ainsi que les polices téléchargeables ou web, c'est tout ce que l'utilisateur télécharge en allant sur votre application.
Je ne peux que mentionner des polices sûres. Comment s'est-il avéré que nous les avions? Auparavant, nous ne pouvions pas nous attendre à ce que l'utilisateur ait telle ou telle police.Par conséquent, au tout début des années 2000, Microsoft a proposé une liste de six polices qui étaient présentes sur tous les systèmes depuis le tout début de la dernière décennie, et les développeurs pouvaient les utiliser en toute conscience, sachant que ces polices sont déjà présentes chez les utilisateurs et n'auront pas à envoyer de demandes supplémentaires.
Et ici, nous voyons le même Arial. Pour l'avenir: quelqu'un sait déjà que Helvetica est une police système sur macOS, elle y est présente depuis de nombreuses années. Par conséquent, dans l'histoire que j'ai mentionnée au début, j'ai dit que nous devrions enregistrer Helvetica, Arial, et non l'inverse.
Après cela, j'ai beaucoup remarqué ce record sur une variété de ressources, et je me demandais d'où il venait, comment il s'est avéré que les gens pouvaient faire une erreur aussi fondamentale. Après tout, nous l'apprenons lorsque nous commençons à peine à apprendre le CSS.
J'ai été très surpris quand j'ai réalisé qu'il provenait d'une ressource aussi respectée que w3schools, je leur ai envoyé un rapport de bogue, mais ils ne l'ont toujours pas corrigé, hein.
Revenons maintenant aux polices. Comment connecter des polices? Nous avons CSS et JavaScript.
Nous pouvons déclarer une police personnalisée et spécifier plusieurs formats à partir desquels le navigateur sélectionnera et téléchargera le premier qu'il connaît.
- WOFF2 est mieux compressé et pris en charge par tous les navigateurs modernes.
- WOFF se comprime un peu moins bien, mais il a un excellent support.
- EOT est nécessaire exclusivement pour les anciens IE. - TTF, il a également un bon support, et en le téléchargeant, nous pouvons l'installer sur le système d'exploitation.
- SVG, qui, à mon avis, est obsolète, n'est pris en charge que dans un ou deux navigateurs aujourd'hui.
Nous avons également une fonction CSS aussi cool que locale, avec son aide, nous pouvons vérifier si la police est présente dans le système d'exploitation de l'utilisateur. Mais vous n'avez pas vraiment besoin de compter sur elle. Même si les polices ont le même nom, cela ne signifie pas du tout qu'elles sont de la même police. Par conséquent, si vous l'utilisez, soyez prudent.
Après avoir annoncé la police, n'oubliez pas de spécifier quelques solutions de rechange, au cas où le navigateur ne parviendrait pas à la télécharger.
Je pense que beaucoup de gens savent que nous pouvons spécifier une plage Unicode pour les polices, et après le téléchargement de la police, elle sera utilisée exclusivement pour les caractères spécifiés. Par exemple, vous souhaitez afficher uniquement du texte en anglais dans cette police ou uniquement des chiffres, etc.
Il vous permet également de réduire considérablement le trafic que nous envoyons aux utilisateurs.
Ci-dessus, nous pouvons diviser la police en deux fichiers distincts, dans l'un il n'y a que des caractères latins et dans le second - cyrillique. Nous leur avons donné le même nom de famille de polices afin que le navigateur comprenne qu'il s'agit de parties d'une seule police. Maintenant, si nous n'avons que des caractères cyrilliques sur la page, l'utilisateur téléchargera uniquement le deuxième fichier, ce qui réduit le trafic téléchargé par l'utilisateur.
En conséquence, il n'est pas si difficile de faire un sous-ensemble, il existe des outils GUI et CLI pour cela, il n'est pas difficile de les trouver et de les gérer.
Le support est assez bon aujourd'hui. N'hésitez pas à l'utiliser.
N'oubliez pas le grand proverbe "mesure sept fois - sabseth une fois", sinon vous pouvez vous retrouver dans une situation plutôt inconfortable.
Nous pouvons également télécharger des polices à l'aide de JS, nous avons une API FontFace pour cela, cela semble assez similaire.
Nous déclarons une nouvelle police, chargez-la, elle se charge de manière asynchrone. Après son chargement, nous pouvons l'ajouter à la page.
À première vue, cette approche peut sembler inutile, sauf si vous êtes impliqué dans un service de polices. Mais à la fin du rapport, vous pourriez changer d'avis.
Eh bien, nous avons un service, nous y avons ajouté plusieurs polices. Et notre utilisateur vient sur notre page et rencontre une telle image.
Comment est-ce arrivé? Le HTML est arrivé, les styles se sont chargés et les polices ne sont pas encore arrivées, et ici le comportement du navigateur peut varier. Certains navigateurs bloquent le rendu du texte, il semblerait qu'il n'y ait pas de texte, mais en fait, les navigateurs dessinent le texte avec leur propre police transparente, car ils ont besoin de savoir combien d'espace sur la page le texte prend pour que toute l'indentation soit similaire. Lorsque la police se charge, le texte est redessiné avec votre police et affiché dans le navigateur.
Ce serait formidable si nous pouvions unifier le comportement du navigateur dans de tels cas. En effet, certains navigateurs peuvent restituer du texte avec une police transparente, tandis que d'autres avec une police pliée. Pour cela, nous n'avons qu'une seule ligne de code.
Fondamentalement, seul le blocage ou l'échange vous sera utile. Block fera attendre le navigateur et rendra le contenu de la page avec une police transparente, car il est fort possible que vous ayez une très belle police personnalisée qui ne ressemble à rien. Par conséquent, vous ne voulez pas que l'utilisateur voit le texte, alors laissez-le patienter. Il n'attendra pas éternellement, seulement trois secondes, après quoi il utilisera la police suivante et attendra l'infini complet jusqu'à votre arrivée.
Ou permutez, lorsque le navigateur prend immédiatement la police repliée suivante, dessine le contenu avec et attend un temps infini pour que votre police arrive.
Aujourd'hui, le support est assez bon, cela peut déjà être utilisé. Après tout, CSS n'est pas JS, si tout à coup le navigateur ne comprend pas quelque chose - ça va, il ignorera cette règle et ira plus loin. Dans de tels cas, nous obtenons le même comportement qu'auparavant.
Très bien, nous avons invité le navigateur, nous avons maintenant le même comportement sur presque tous les navigateurs non hérités.
Mais nous n'avons pas résolu le problème lui-même. Comment se fait-il que les polices soient si longues? Il y a longtemps, alors que je ne travaillais pas déjà chez Yandex, j'ai fait un petit atterrissage, rien de spécial, mais beaucoup de photos et un peu de style.
J'ai rencontré un tel problème que la police est arrivée littéralement au bout de 6 à 7 secondes, et ce n'était qu'avec la limitation du réseau à la 3G rapide, bien que le premier rendu ait déjà été affiché quelque part pendant 2,5 secondes, et l'utilisateur a simplement regardé une page vierge.
Le HTML bleu est chargé en haut, puis les styles violets disparaissent. Où est notre police?
Il est là. Comment est-ce arrivé? Nous avons une petite clarification, même si nous déclarons notre police au tout début de nos styles, le navigateur n'en enverra une demande qu'après avoir téléchargé tout le CSS, l'analysera complètement et verra qu'il y a du texte sur la page qui doit être dessiné avec cette police .
Ce serait génial si nous pouvions dire au navigateur: écoutez, je vais certainement utiliser cette police et la télécharger dès maintenant.
Nous pouvons donc. C'est ce qu'on appelle le chargement des polices. Nous pouvons dire au navigateur en une seule ligne que nous devons télécharger cette police particulière et envoyer une demande avant d'envoyer la demande de styles. Maintenant, la cascade de demandes semble différente.
Notre texte avec la police correcte apparaît avec tous les autres contenus pendant environ 3 secondes. Cela n'accélère pas notre site, mais l'utilisateur peut immédiatement commencer à naviguer dans ce contenu. Et c'est bien.
le préchargement de lien ne fonctionne que dans les navigateurs assez modernes, et cela vaut la peine de l'utiliser principalement avec woff2, si ce n'est pas le cas, alors juste woff. Parce que la demande est toujours envoyée.
Autre bonne pratique avec le préchargement: il vous suffit de spécifier un fichier que le navigateur comprendra. Si vous commencez à lire à ce sujet sur MDN, vous verrez quelque chose de similaire.
Cela ne vaut jamais la peine, car c'est ainsi que nous envoyons de nombreuses demandes de polices de chaque format, bien que le navigateur n'en utilise qu'une. Pourquoi ont-ils ajouté le format eot ici, qui n'est utilisé que pour IE, qui n'est plus développé et n'est même pas pris en charge par Microsoft? Il est peu probable qu'ils nous le disent.
Un code similaire devrait être plus probable.
Peut-être avez-vous d'autres tâches à accomplir lorsque vous initialisez votre demande?
Par exemple, des mesures importantes que vous devez mesurer lors du chargement d'une page et que vous ne souhaitez pas envoyer immédiatement une demande de polices, mais télécharger d'autres ressources.Il existe une autre approche pour cela: le remplacement des polices. Après tout, nous pouvons charger des polices dans JS, et après le chargement des polices, il suffit d'ajouter une classe à la page où nous décrirons quelle police le texte doit être affiché.
. , , . . Font style matcher, , CSS , , , , , , “”.
-? , , .
, . ? , , , Yandex Sans. , . , ? , , ?
«», -. , . ? , . .
, system-ui, , stage 2, , Windows, .
, , . , , . , github, Twitter, Medium. , .
, , , , bootstrap. .
, , accessibility, , , , .
? , - ?
, , -, , . , , .
,
axe pa11y , accessibility test runners, CI-. . pa11y .
- . , , ? .
, , . , color picker dev tools, Chromium- — .
, , , , . , , , , , , .
, , , .
.
, localStorage, . , , . , , , - , .
, : localStorage , key-value-, — . - , , .
— . head HTML- . , . , , bounce rate. , — , , .
, , . : , 200 , . — , . , — , , svg. , . svg CSS- .
, . . , , . — svg.
. , , . — : , , , . .
. , . . , . , , .
Vous pouvez probablement désactiver vos polices personnalisées, réduire le trafic et accélérer l'affichage de votre contenu sur le site. Mais si tout à coup vous ne pouvez pas, regardez les options telles que le chargement et le remplacement des polices. Je vous remercie!