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
   

   View Slide

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
   

   View Slide

3. Je suis passionné · taré · obsédé · obnubilé par la typographie

   (rayez la ou les mentions inutiles)
   Crédit photo : Kevin Hackert
   

   View Slide

4. La typographie :

   une histoire de plombs
   Crédit photo : Marcus Lyra
   

   View Slide

5. Et le plomb, ça pèse…
   Crédit photo : Marcus Lyra
   

   View Slide

6. Le poids d’une variante de Source Sans Pro

   (Source Sans Pro Regular • format TTF)
   150 Ko
   Crédit photo : timlewisnm
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. En desktop, ça passe…

   En mobile, ça casse !
   

   View Slide

10. Le temps nécessaire avant de pouvoir lire le titre principal sur CNN

    (CNN • WebPageTest • Dulles, VA • Motorola G • Chrome • 3G)
    15s
    

    View Slide

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
    

    View Slide

12. Le chargement du texte :

    deux conceptions radicalement différentes
    Crédit photo : Tony & Wayne
    

    View Slide

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
    

    View Slide

14. FOUT :

    Flash of Unstyled Text
    Information rapidement accessible et lisible

    même si non optimisée
    Identité définie

    rapidement
    

    View Slide

15. Privilégier un accès rapide à l’information,
    même si l’affichage est imparfait
    

    View Slide

16. Ce n’est pas qu’une histoire de développeur :
    le designer a aussi une responsabilité.
    

    View Slide

17. Designers, l’heure est venue d’en finir
    avec le choix unique en typographie
    Crédit photo : Marcus Lyra
    

    View Slide

18. Choisir un font-stack adapté à son projet

    et ne pas avoir peur de l’exploiter
    Crédit photo : Marcus Lyra
    

    View Slide

19. Crédit photo : Marcus Lyra
    

    View Slide

20. Soyez acteurs de vos fichiers de police 

    en utilisant des outils simples
    Crédit photo : Stéphanie Walter
    

    View Slide

21. FontSquirrel Webfont Generator
    

    View Slide

22. Connaître les capacités 

    des plateformes de ses clients
    

    View Slide

23. Je jette un œil sur le tableau de diffusion 

    des polices sur les OS mobiles :

    jordanm.co.uk/tinytype
    

    View Slide

24. Pour éviter d’être un facteur bloquant :
    forçons les fallbacks typographiques
    

    View Slide

25. Prendre l’exemple du Guardian :
    le chargement différé des fichiers de police
    Crédit photo : Phil Gyford
    

    View Slide

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 :
    

    View Slide

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é :
    

    View Slide

28. Transformer le plomb en plume :
    allégeons nos fichiers de police
    

    View Slide

29. Fournir et utiliser des fichiers compressés :

    WOFF (ou WOFF2)
    Crédit photo : marcovdz
    9+
    

    View Slide

30. Pour le corps de labeur :

    essayer le faux-gras et le faux italique
    Crédit photo : Garry Knight
    

    View Slide

31. Mais tout ça ne fonctionne qu’à une condition :
    avoir le plein contrôle sur vos fichiers
    Crédit photo : Robert Couse-Baker
    

    View Slide

32. MERCI DE VOTRE ATTENTION :)

    À VOUS LA PAROLE !
    parce que oui, pour une fois, j’ai oublié Yoshi à Strasbourg…
    Damien Senger

    @iamhiwelo
    

    View Slide