Performance typographique – Le web et ses sales caractères

Ton site est responsive ? C'est bien ! Et tes polices dans l'histoire ? L'idée c'est de faire un petit tour d'horizon des techniques d'optimisation responsive pour nos sales caractères.

Cette conférence donnée à Blend Web Mix en 2015 présente des astuces d'intégration qui peuvent exister aujourd'hui pour travailler sa typographie et les adaptations à réaliser pour avoir un site complètement responsive (utilisation du "faux gras", forcer les fallbacks sur mobile pour éviter les gros fichiers, etc.).

Transcript

1. LE WEB ET SES SALES CARACTÈRES Damien Senger · @iamhiwelo · Blend Web Mix 2015 · Lyon Crédit photo : Marcus Lyra
2. ça c’est moi :) Damien Senger je suis designer & développeur web je suis passionné par la typographie web autodidacte, j’ai créé mon studio hiwelo. et je travaille chez Alsacréations @iamhiwelo
3. Je suis passionné · taré · obsédé · obnubilé par la typographie
 (rayez la ou les mentions inutiles) Crédit photo : Kevin Hackert
4. La typographie :
 une histoire de plombs Crédit photo : Marcus Lyra
5. Et le plomb, ça pèse… Crédit photo : Marcus Lyra
6. Le poids d’une variante de Source Sans Pro
 (Source Sans Pro Regular • format TTF) 150 Ko Crédit photo : timlewisnm
7. Crédit photo : timlewisnm Le poids d’une famille « courante » de Source Sans Pro pour un blog
 (Source Sans Pro Regular, Italic, Bold & Bold Italic • format TTF) 532 Ko
8. Crédit photo : timlewisnm Le poids d’une famille complète de Source Sans Pro
 (Source Sans pro complète issue de Google Fonts • format TTF) 1 597 Ko
9. En desktop, ça passe…
 En mobile, ça casse !
10. Le temps nécessaire avant de pouvoir lire le titre principal sur CNN
 (CNN • WebPageTest • Dulles, VA • Motorola G • Chrome • 3G) 15s
11. Un accès à l’information 3x plus rapide sur un site avec lazyloading des polices
 (Site en développement • WebPageTest • Dulles, VA • Motorola G • Chrome • 3G) 5s
12. Le chargement du texte :
 deux conceptions radicalement différentes Crédit photo : Tony & Wayne
13. Crédit photo : Dr. Azzacov FOIT :
 Flash of Invisible Text Le logo apparaît tardivement Plus de 15 secondes pour
 avoir accès à l’information recherchée
14. FOUT :
 Flash of Unstyled Text Information rapidement accessible et lisible
 même si non optimisée Identité définie
 rapidement
15. Privilégier un accès rapide à l’information, même si l’affichage est imparfait
16. Ce n’est pas qu’une histoire de développeur : le designer a aussi une responsabilité.
17. Designers, l’heure est venue d’en finir avec le choix unique en typographie Crédit photo : Marcus Lyra
18. Choisir un font-stack adapté à son projet
 et ne pas avoir peur de l’exploiter Crédit photo : Marcus Lyra
19. Crédit photo : Marcus Lyra
20. Soyez acteurs de vos fichiers de police 
 en utilisant des outils simples Crédit photo : Stéphanie Walter
21. FontSquirrel Webfont Generator
22. Connaître les capacités 
 des plateformes de ses clients
23. Je jette un œil sur le tableau de diffusion 
 des polices sur les OS mobiles :
 jordanm.co.uk/tinytype
24. Pour éviter d’être un facteur bloquant : forçons les fallbacks typographiques
25. Prendre l’exemple du Guardian : le chargement différé des fichiers de police Crédit photo : Phil Gyford
26. Crédit photo : Marcus Lyra Navigateur 
 moderne ? Suppo du
 format WOFF ? La police est
 déjà stockée ? On affiche
 la police On affiche
 le fallback On affiche
 le fallback On affiche
 le fallback Pendant le chargement :
27. Crédit photo : Marcus Lyra Le stockage
 est-il possible ? On récupère
 les fichiers en
 base64 via
 JSON Le JSON
 n’est pas déjà
 stocké On stocke
 et on affiche 
 la police On ne modifie
 pas la page On ne modifie
 pas la page Une fois le chargement terminé :
28. Transformer le plomb en plume : allégeons nos fichiers de police
29. Fournir et utiliser des fichiers compressés :
 WOFF (ou WOFF2) Crédit photo : marcovdz 9+
30. Pour le corps de labeur :
 essayer le faux-gras et le faux italique Crédit photo : Garry Knight
31. Mais tout ça ne fonctionne qu’à une condition : avoir le plein contrôle sur vos fichiers Crédit photo : Robert Couse-Baker
32. MERCI DE VOTRE ATTENTION :)
 À VOUS LA PAROLE ! parce que oui, pour une fois, j’ai oublié Yoshi à Strasbourg… Damien Senger
 @iamhiwelo