Performance typographique – Le web et ses sales caractères

6362477fcff413a76db8da108fade362?s=47 Damien Senger
October 29, 2015

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.).

6362477fcff413a76db8da108fade362?s=128

Damien Senger

October 29, 2015
Tweet

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