Un petit pas pour l'em, un grand pas pour le web - Paris Web 2013

Slide 1

Slide 1 text

Un petit pas pour l’em, un grand pas pour le Web Nicolas Hoizey @nhoizey

Slide 2

Slide 2 text

Nicolas Hoizey Co-fondateur de Clever Age Directeur de l’Innovation 2 100% fait avec nos doigts

Slide 3

Slide 3 text

« Marie Guillaumet, L’intégration web, cette leçon d’humilité (2013) Aucun savoir n’est immuable. Aucune technique n’est pérenne. Aucune pratique n’est parfaite. Le métier d’intégrateur web en particulier est une leçon d’humilité permanente. Toute bonne pratique doit être discutée. Tout intégrateur doit se remettre en question. 3 http://www.lesintegristes.net/2013/03/19/integration-web-humilite/

Slide 4

Slide 4 text

Préambule Cette présentation s’appuie en partie sur des copies d’écran de sites divers et variés. Les erreurs relevées ne représentent en aucun cas des jugements de valeurs sur les sites concernés ou ceux qui les ont mis en œuvre. La potentielle difﬁculté de mise en œuvre de certaines techniques présentées comme des bonnes pratiques n’est pas prise à la légère. 4

Slide 5

Slide 5 text

5 Oui, la page est bien chargée…

Slide 6

Slide 6 text

6 …mais j’ai choisi une taille de texte de base à 18px !

Slide 7

Slide 7 text

7 Heureusement, ça passe au moins en 16px…

Slide 8

Slide 8 text

Slide 9

Slide 9 text

« Ma préférence à moi… » Aujourd'hui, je parcours le Web principalement sur mon ordinateur portable, très souvent sur mon smartphone, occasionnellement sur ma tablette et ma télévision Full HD, mais plutôt rarement sur ma liseuse. 9

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Mes préférences de navigateurs 11

Slide 12

Slide 12 text

12 18px dans le navigateur, mais 11px forcé dans la CSS

Slide 13

Slide 13 text

À situation exceptionnelle, mesures exceptionnelles 13

Slide 14

Slide 14 text

14 14px forcé même où la CSS indique 11px

Slide 15

Slide 15 text

Slide 16

Slide 16 text

« WCAG 2.0 Success Criterion 1.4.4 (niveau AA) […] le texte peut être redimensionné jusqu'à 200% sans l'aide d'une technologie d'assistance et sans perte de contenu ou de fonctionnalité. 16 http://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast-scale

Slide 17

Slide 17 text

Techniques de mise en œuvre •  C14: Using em units for font sizes •  C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized •  C28: Specifying the size of text containers using em units •  Etc. 17 http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-scale

Slide 18

Slide 18 text

« AccessiWeb 2.2, critère 10.4 (argent) Dans chaque page Web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu'à 200%, au moins ? 18 http://www.accessiweb.org/index.php/accessiweb_2.2_liste_generale.html#crit-10-4

Slide 19

Slide 19 text

« Checklist Opquast V2 - Critère 142 (niveau 2) La taille des polices destinées à l'afﬁchage écran est exprimée en taille variable et non en taille ﬁxe. 19 http://checklists.opquast.com/11/criteria/641/

Slide 20

Slide 20 text

«It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility and produce pages which, by being flexible, are accessible to all. 20 …/…

Slide 21

Slide 21 text

« John Allsopp, A Dao of Web Design (2000) [Make] pages which adapt to the needs of a reader, whose eyesight is less than perfect, and who wishes to read pages with a very large font size. 21 http://alistapart.com/article/dao

Slide 22

Slide 22 text

Slide 23

Slide 23 text

23 16px

Slide 24

Slide 24 text

24 18px

Slide 25

Slide 25 text

25 24px

Slide 26

Slide 26 text

26 72px

Slide 27

Slide 27 text

27 16px

Slide 28

Slide 28 text

28 Du rose en l’honneur de @hellgy Paris Web !

Slide 29

Slide 29 text

29 18px

Slide 30

Slide 30 text

30 24px

Slide 31

Slide 31 text

31 24px

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Enquête WebAIM de mai 2012 Enquête auprès de 1782 utilisateurs de lecteurs d'écrans, notamment pour savoir quelles sont les fonctions visuelles utilisées : 33 Fonction % Zoom écran 11,8% Zoom texte du navigateur 8,3% Zoom graphique du navigateur 7,2% Mode « High contrast » ou feuille de styles 8,5% http://webaim.org/projects/screenreadersurvey4/#visual

Slide 34

Slide 34 text

Certains navigateurs ne sont pas en 16px Certains matériels et navigateurs ont parfois une taille de base (root font size) différente de 16px : 34 Navigateur Taille de base Opera Mini 4.5 13 Palm webOS 2.0 & webOS TouchPad 14 Opera Mini 7 17 AOL 9 20 Cybook Odyssey 21 Blackberry 6.0 22 NetFront NX 23 Kindle 3 26

Slide 35

Slide 35 text

http://isitrwd.com/rfs/ 35

Slide 36

Slide 36 text

36 http://goo.gl/R54ZuC

Slide 37

Slide 37 text

Certains utilisateurs zooment sans le vouloir Sur Facebook, 15% des hits sont faits avec un zoom modiﬁé : •  5% pour réduire la taille •  10% pour l’augmenter Une part de ces zooms sont à priori faits par erreur, probablement les premiers 5% notamment. 37 https://plus.google.com/+PaulIrish/posts/gg8xiDMcS2t

Slide 38

Slide 38 text

Slide 39

Slide 39 text

« Understanding Success Criteria 1.4.4 Above 200%, [full] zoom (which resizes text, images, and layout regions and creates a larger canvas that may require both horizontal and vertical scrolling) may be more effective than text resizing. 39 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html

Slide 40

Slide 40 text

Le zoom global sur mobile Un double tap —bien géré— permet d’accéder rapidement au niveau de zoom exactement adapté à l’élément concerné, ou revenir plein écran. 40 © h$p://www.androidpa$erns.com/

Slide 41

Slide 41 text

Le zoom global sur mobile Mais les aller-retours sont nécessaires entre vue complète et vue zoomées, pas franchement confortable. Un site adapté au mobile —qu’il soit en Responsive Web Design ou non— est plus agréable à parcourir. 41

Slide 42

Slide 42 text

Le zoom global sur desktop Le contenu sort vite de l'écran —sur un ordinateur « normal »— et nécessite un scroll horizontal très perturbateur. Seuls les navigateurs vraiment récents appliquent les Media Queries déﬁnies en px, comme si le viewport était réduit lorsque le zoom augmente. 42

Slide 43

Slide 43 text

Ça se discute ! Raphael Goetter a lancé un document pour partager les possibilités et pratiques de zoom dans les navigateurs : http://kiwi.gg/zoom 43

Slide 44

Slide 44 text

Nous ne savons (presque) rien du futur du Web, des appareils et navigateurs sur lesquels nos pages devront s’afﬁcher… 44

Slide 45

Slide 45 text

« Future Friendly, A New Hope While we can't know exactly what the future will bring, we can: §  Acknowledge and embrace unpredictability §  Think and behave in a future-friendly way §  Help others do the same The future is ours to make —friendly. 45 http://futurefriend.ly/ #ffly

Slide 46

Slide 46 text

46 http://futurefriend.ly/

Slide 47

Slide 47 text

« Olivier Thereaux et Karl Dubost, Esthétique et pratique du Web qui rouille Artisans du Web, parlons de notre matériau. Le Web : extraordinaire, ﬂexible, formidable et fragile, étonnant et changeant. Méconnu. 47 http://www.paris-web.fr/2013/conferences/esthetique-et-pratique-du-web-qui-rouille.php «

Slide 48

Slide 48 text

Slide 49

Slide 49 text

49 Marie Guillaumet & Vincent Valentin, atelier Paris Web 2012

Slide 50

Slide 50 text

50 http://typographisme.net/post/Macro-typographie-sur-le-Web-Mise-en-pratique

Slide 51

Slide 51 text

La grille horizontale C’est à dire le rythme horiz… vertical, les hauteurs de lignes quoi… Si ça vous intrigue, Vincent saura vous convaincre… il a réussi avec moi… 51

Slide 52

Slide 52 text

La grille horizontale en em •  Déﬁnir toutes les tailles de texte et conteneurs, padding et margin verticaux en em •  Pour les éléments dont la hauteur ne peut pas simplement être déﬁnie par leurs contenus, utiliser aussi des em 52

Slide 53

Slide 53 text

53 Richard Rutter http://clagnut.com/blog/348/

Slide 54

Slide 54 text

font-size: 62.5%; Se placer d’emblée sur une base (théorique) de 10px pour simpliﬁer le calcul des valeurs suivantes : body { font-‐size: 62.5%; } h1 { font-‐size: 2.4em; } //=24px h2 { font-‐size: 2.1em; } //=21px p { font-‐size: 1.6em; } //=16px 54

Slide 55

Slide 55 text

Ce 62.5% pose différents problèmes Il faut redéfinir toutes les tailles de textes pour ne pas laisser trainer des textes illisibles en 10px. En Responsive Web Design, les Media Queries ne tiennent pas compte de la définition de font-size du body, même si elles sont définies en em —on y viendra—, donc elles ne sont plus cohérentes. 55

Slide 56

Slide 56 text

56 http://alistapart.com/article/howtosizetextincss

Slide 57

Slide 57 text

57 http://ﬁlamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/

Slide 58

Slide 58 text

font-size: 100%; Respecter la taille déﬁnie par le navigateur ou personnalisée par l’utilisateur : body { font-‐size: 100%; } h1 { font-‐size: 1.5em; } //=24px h2 { font-‐size: 1.3125em; } //=21px p { font-‐size: 1em; } //=16px 58

Slide 59

Slide 59 text

Convertir les valeur de px en em ? PXtoEM.com fourni des tableaux de calculs pré déﬁnis, et une calculette 59

Slide 60

Slide 60 text

Les préprocesseurs à la rescousse $base-‐font-‐size: 16px; @function em($target, $context: $base-‐font-‐size) { @if $target == 0 { @return 0 } @return $target / $context + 0em; } body { font-‐size: 100%; } h1 { font-‐size: em(24px); } // 1.5em h2 { font-‐size: em(21px); } // 1.3125em p { font-‐size: em(16px); } // 1em ul { font-‐size: em(14px); } // 0.875em ul ul { font-‐size: em(14, 14px); } // 1em 60

Slide 61

Slide 61 text

Attention aux arrondis (on ne parle pas ici de border-radius…) Un enchainement d’arrondis peut mener à une catastrophe : •  Design dans un outil graphique –  Éléments de tailles déﬁnies en valeurs entières de px •  Conversion par le préprocesseur –  Valeurs em décimales avec arrondis plus ou moins important •  Interprétation par le navigateur –  Valeurs px décimaux avec arrondis (différent selon navigateurs) 61

Slide 62

Slide 62 text

La grille verticale en design élastique C’est à dire —si vous avez suivi c’est simple— le rythme horizontal, les colonnes… 62

Slide 63

Slide 63 text

Une grille verticale aussi en em Si la largeur est ﬁxée en pixels, le nombre de caractères par ligne diminue fortement en grossissant le texte. Il est recommandé d’avoir 55 à 65 caractères par ligne. Il faut donc déﬁnir la largeur des zones de texte en fonction du corps, soit 30em en moyenne. 63

Slide 64

Slide 64 text

Attention aux images de contenus Les images SVG peuvent être redimensionnées en em et suivre les changements de taille de texte. Les images bitmap peuvent avoir un aspect dégradé, pixelisé, si on les agrandi trop. On peut soit accepter cette dégradation, soit essayer de conserver les dimensions natives en pixel, si le design le permet. 64

Slide 65

Slide 65 text

Attention aux sprites Images bitmap taillées en px, risque de « débordement » d’images voisines quand on agrandi le texte : 65

Slide 66

Slide 66 text

Solutions pour les sprites Une solution simple et qui fonctionne partout : •  « éloigner » plus les images dans les sprites, mais avec un impact sur le poids ﬁnal La meilleure solution pour l’avenir, mais qui ne fonctionne que dans les navigateurs récents : •  Utiliser background-size pour forcer une taille adaptée •  Utiliser des images au format SVG pour des redimensionnements sans perte 66

Slide 67

Slide 67 text

Le design élastique posait un autre soucis On déﬁni une colonne principale en élastique, puis •  Soit on limite la largeur globale en pixel – Le « reste » de l’espace total est réparti pour les autres colonnes, qui se retrouvent du coup souvent à l’étroit quand la taille est agrandie •  Soit on agrandi tout proportionnellement, mais on se retrouve avec une largeur qui ne rentre plus dans le viewport 67

Slide 68

Slide 68 text

Responsive Web Design élastique 68

Slide 69

Slide 69 text

Le Responsive Web Design élastique Il s’agit d’appliquer un design élastique, mais avec adaptation automatique à l’espace horizontal disponible via des Media Queries déﬁnies en em. Attention, la base de calcul des Media Queries exprimées en em est la taille de texte du navigateur. 69

Slide 70

Slide 70 text

70 16px http://goldilocksapproach.com/ 33em = 528px

Slide 71

Slide 71 text

71 20px 33em = 660px

Slide 72

Slide 72 text

72 24px 33em = 792px

Slide 73

Slide 73 text

73 http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

Slide 74

Slide 74 text

74 https://github.com/htmlzengarden/outline

Slide 75

Slide 75 text

Bonus 75

Slide 76

Slide 76 text

76 https://medium.com/p/8f433689736f

Slide 77

Slide 77 text

Sizing Web Components Déﬁnition de composants de base dont les dimensions sont exprimées en em : .Component { width: 5em; height: 2em; border-‐radius: .5em; border: 1px solid gold; } 77

Slide 78

Slide 78 text

Sizing Web Components 78 Possibilité de modiﬁer la taille globale du composant juste avec sa font-size :

Slide 79

Slide 79 text

Slide 80

Slide 80 text

rem c’est magique ! Pour faire simple : rem c’est comme em, mais sans héritage, l’em de référence est toujours la racine. Du coup plus besoin de « trainer » le contexte systématiquement, magique ! 80

Slide 81

Slide 81 text

Mais… Quand on veut changer les dimensions de tout une partie du design, on ne peut pas utiliser la technique « Sizing Web Components » si on a tout déﬁni en rem. Il faut repasser sur toutes les valeurs comme avec px. 81

Slide 82

Slide 82 text

vw, vh, etc. Ces nouvelles unités sont des pourcentages du viewport : •  vw: 1% de la largeur •  vh: 1% de la hauteur Certains veulent déﬁnir la taille du texte avec ces unités, le texte devenant d’autant plus grand que la fenêtre est large… 82

Slide 83

Slide 83 text

http://css-tricks.com/viewport-sized-typography/ 42px ! 83

Slide 84

Slide 84 text

vw, vh, etc. Cela impose une taille arbitraire, sans possibilité de respecter la préférence du visiteur. Quelle que soit la largeur de ma fenêtre, je veux la même taille de texte à distance de vision constante ! 84

Slide 85

Slide 85 text

Slide 86

Slide 86 text

86 16px http://etchapps.com/

Slide 87

Slide 87 text

87 18px

Slide 88

Slide 88 text

88 24px

Slide 89

Slide 89 text

89 16px http://marieguillaumet.com/

Slide 90

Slide 90 text

90 24px

Slide 91

Slide 91 text

91 32px

Slide 92

Slide 92 text

92 http://marieguillaumet.com/refonte-mon-portfolio-du-responsive-en-em-premiere-partie/

Slide 93

Slide 93 text

93 16px Maquette statique, site live dans quelques jours

Slide 94

Slide 94 text

94 18px

Slide 95

Slide 95 text

95 24px

Slide 96

Slide 96 text

96 16px http://www.smashingmagazine.com/

Slide 97

Slide 97 text

97 18px

Slide 98

Slide 98 text

98 24px

Slide 99

Slide 99 text

99 32px

Slide 100

Slide 100 text

100

Slide 101

Slide 101 text

Lâchez prise… Votre objectif est de diffuser un message, un service, et d’atteindre un public le plus large possible en lui proposant une expérience positive. Respecter son public et s’adapter à ses préférences tant que possible à ses préférences est bien évidemment une bonne pratique. 101

Slide 102

Slide 102 text

…sans perdre le contrôle ! L’intégration en Responsive Web Design élastique est —aujourd’hui, à mon avis— le meilleur moyen de choisir vous-même comment votre site s’afﬁche, tout en respectant les préférences de vos visiteurs. 102

Slide 103

Slide 103 text

103

Slide 104

Slide 104 text

Crédits photos Empreinte de Buzz Aldrin sur la Lune, NASA, 1969 http://en.wikipedia.org/wiki/File:Apollo_11_bootprint.jpg 104 Chris Hadﬁeld https://twitter.com/Cmdr_Hadﬁeld/status/384703312341114880 Nicolas Hoizey http://500px.com/nhoizey Toutes les autres…