Un petit pas pour l’em, un grand pas pour le Web
A presentation at Paris-Web 2013 in in Paris, France by Nicolas Hoizey
Un petit pas pour l’em, un grand pas pour le Web
Nicolas Hoizey Co-fondateur de Clever Age Directeur de l’Innovation
2 100% fait avec nos doigts
« 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 /
Attention 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 difficulté de mise en œuvre de certaines techniques présentées comme des bonnes pratiques n’est pas prise à la légère . 4
5 Oui, la page est bien chargée…
…mais j’ai choisi une taille de texte de base à 18px !
7 Heureusement, ça passe au moins en 16px…
8
« 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
« 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 . 10 18px 16px 24px 21px 16px
Mes préférences de navigateurs 11
12 18px dans le navigateur, mais 11px forcé dans la CSS
À situation exceptionnelle, mesures exceptionnelles 13
14 14px forcé même où la CSS indique 11px
15
« 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
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
« 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
« Checklist
Opquast V2 - Critère 142 (niveau 2) La taille des polices destinées à l'affichage écran est exprimée en taille variable et non en taille fixe. 19 http:// checklists.opquast.com /11/ criteria /641/
« 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 …/…
« 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
22
23 16px
24 18px
25 24px
26 72px
27 16px
28 Du rose en l’honneur de @ hellgy Paris Web !
29 18px
30 24px
31 24px
32
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
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
http:// isitrwd.com / rfs / 35
36 http:// goo.gl /R54ZuC
Certains utilisateurs zooment sans le vouloir Sur Facebook, 15% des hits sont faits avec un zoom modifié : • 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
38
« 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
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 /"
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
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éfinies en px , comme si le viewport était réduit lorsque le zoom augmente. 42
Ç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
Nous ne savons (presque) rien du futur du Web , des appareils et navigateurs sur lesquels nos pages devront s’afficher… 44
« 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
46 http:// futurefriend.ly /
« Olivier Thereaux et Karl Dubost , Esthétique et pratique du Web qui rouille
Artisans du Web, parlons de notre matériau. Le Web : extraordinaire, flexible , formidable et fragile, étonnant et changeant . Méconnu. 47 http:// www.paris-web.fr /2013/ conferences / esthetique -et-pratique-du-web-qui- rouille.php
«
48
49 Marie Guillaumet & Vincent Valentin , atelier Paris Web 2012
50 http:// typographisme.net /post/Macro-typographie-sur-le-Web-Mise-en-pratique
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
La grille horizontale en em
• Définir 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éfinie par leurs contenus, utiliser aussi des em
52
53 Richard Rutter
http:// clagnut.com /blog/348/
font- size : 62.5%; Se placer d’emblée sur une base (théorique) de 10px pour simplifier le calcul des valeurs suivantes :
body%{%fontsize:%62.5%;%}% h1%{%fontsize:%2.4em;%}%//=24px% h2%{%fontsize:%2.1em;%}%//=21px% p%%{%fontsize:%1.6em;%}%//=16px% 54
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
56 http:// alistapart.com /article/ howtosizetextincss
57 http:// filamentgroup.com / lab / how_we_learned_to_leave_body_font_size_alone /
font- size : 100%; Respecter la taille définie par le navigateur ou personnalisée par l’utilisateur :
body%{%fontsize:%100%;%}% h1%{%fontsize:%1.5em;%}%%%%//=24px% h2%{%fontsize:%1.3125em;%}%//=21px% p%%{%fontsize:%1em;%}%%%%%%//=16px% 58
Convertir les valeur de px en
em
?
PXtoEM.com
fourni
des tableaux de
calculs pré
définis,
et une calculette
59
Les
préprocesseurs à la rescousse
$basefontsize:%16px;% % @ function % em ($ target ,%$ context :%$basefontsize)%{% %%%@if%$ target %==%0%{%@return%0%}% %%%@return%$ target %/%$ context %+%0em;% }% % body%{%fontsize:%100%;%}% h1%{%fontsize:% em (24px);%}%//%1.5em% h2%{%fontsize:% em (21px);%}%//%1.3125em% p%%{%fontsize:% em (16px);%}%//%1em% % ul %{%fontsize:% em (14px);%}%//%0.875em% ul % ul %{%fontsize:% em (14,%14px);%}%//%1em% % 60
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éfinies 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
La grille verticale en design élastique
C’est à dire —si vous avez suivi c’est simple— le rythme horizontal, les colonnes…
62
Une grille verticale aussi en em
Si la largeur est fixé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éfinir la largeur des zones de texte en fonction du corps, soit 30em en moyenne . 63
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
Attention aux sprites
Images bitmap taillées en px, risque de « débordement » d’images voisines quand on agrandi le texte : 65
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 final
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
Le design élastique posait un autre soucis On défini 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
Responsive Web Design élastique
68
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éfinies en em .
Attention, la base de calcul des Media Queries exprimées en em est la taille de texte du navigateur. 69
70 16px http:// goldilocksapproach.com / 33em = 528px
71 20px 33em = 660px
72 24px 33em = 792px
73 http:// blog.cloudfour.com /the- ems -have- it
proportional -media- queries
ftw /
74 https :// github.com / htmlzengarden / outline
Bonus
75
76 https://medium.com/p/8f433689736f
Sizing Web Components Définition 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
Sizing Web Components 78 Possibilité de modifier la taille globale du composant juste avec sa font-size : %
79
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
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éfini en rem.
Il faut repasser sur toutes les valeurs comme avec px . 81
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éfinir la taille du texte avec ces unités, le texte devenant d’autant plus grand que la fenêtre est large… 82
http://css-tricks.com/viewport-sized-typography/ 42px%!% 83
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
85
86 16px http:// etchapps.com /
87 18px
88 24px
89 16px http:// marieguillaumet.com /
90 24px
91 32px
92 http:// marieguillaumet.com /refonte-mon-portfolio-du-responsive-en- em
premiere -partie/
93 16px Maquette statique, site live dans quelques jours
94 18px
95 24px
96 16px http:// www.smashingmagazine.com /
97 18px
98 24px
99 32px
100
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
…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’affiche, tout en
respectant les préférences de vos visiteurs. 102
103
Crédits photos Empreinte de Buzz Aldrin sur la Lune, NASA, 1969 http:// en.wikipedia.org /wiki/File:Apollo_11_bootprint.jpg 104 Chris Hadfield
https :// twitter.com / Cmdr_Hadfield / status /384703312341114880 Nicolas Hoizey http://500px.com/ nhoizey
Toutes les autres…
Aujourd’hui, je parcours le Web principalement sur mon ordinateur portable, très souvent sur mon smartphone, parfois sur ma tablette et ma TV, et plutôt exceptionnellement sur ma liseuse. Ces différents appareils ont bien entendu des formats — paysage ou portrait — et tailles très différents, ce que les adeptes du Responsive Web Design ont bien intégré dans leur conception du Web.
Mais ils ont aussi des tailles de base de police de caractère très différents —une échelle de 16 à 24 px dans mon cas—, ce que presque tous les intégrateurs Web ignorent, ou choisissent d’ignorer pour se faciliter la tâche. Cela fait pourtant déjà quelque temps que l’on sait qu’il faut utiliser une unité proportionnelle et non fixe pour définir les hauteurs de texte, mais ce n’est que trop peu appliqué, les intégrateurs refusant souvent de lâcher prise.
L’étape suivante, qui devrait être un enchainement naturel —mais pose plus de contraintes—, est d’utiliser ces mêmes unités pour d’autres dimensions, notamment les largeurs de « boîtes » et les seuils de Media Queries.
L’objectif de cette conférence est d’illustrer les avantages et inconvénients d’une telle intégration complètement élastique, en espérant convaincre que les uns l’emportent suffisamment sur les autres pour améliorer notre pratique de l’intégration Web.
Video
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Un petit pas pour l’em, un grand pas pour le Web, par Nicolas Hoizey
-
Ma conférence à Paris Web 2013
Après y avoir assisté plusieurs années en tant qu’auditeur, j’ai eu la joie — le privilège — d’être sélectionné parmi les orateurs de l’édition 2013. Sélectionné qui plus est avec un sujet plutôt pointu, sur une bonne pratique que tout le monde devrait appliquer depuis plus de 10 ans, mais qui est très largement sous estimée.
-
Paris Web : Un petit pas pour l’em, un grand pas pour le Web
-
Retour d'expérience - Paris Web 2013 jour 1
« Cette conférence a été l’occasion d’un vaste tour d’horizon de l’utilisation des em dans l’intégration. Plus largement, l’idée sur laquelle insiste Nicolas Hoizey est la suivante : le web est flexible, et il faut exploiter cette particularité. »
-
Mes rêves sont devenus réalité à Paris web
« moment instructif limpide pour moi, riches en informations. Qui répondait à des interrogations que j’avais en terme d’intégration web. »
-
Paris Web 2013 – Review
« a great reminder why we should use Em or Rem instead of pixels simply because screens have become so many that it becomes almost impossible to anticipate what the user habit is. Therefore having Em or REM allows users to have fonts fitting exactly each screen resolutions. »
-
Paris Web 2013
-
Paris Web 2013 : conférences du jeudi
« Armé de pas mal d’arguments chiffrés et extrêmement bien documenté, Nicolas Hoizey présente les avantages et inconvénients de l’utilisation des em comme unité de mesure de l’ensemble d’un site – et pas seulement. La quantité d’information partagée pendant la conférence est assez impressionnante et il cite systématiquement les sources de ses réflexions, qu’il s’agisse d’articles ou d’outils utiles. Je ne vais donc tout pas répéter ici, sa présentation et la vidéo de la conférences se suffisent à elles-même. […] Je n’ai qu’une chose à dire après cette présentation : ça donne foutrement envie de s’y essayer ! »
-
Paris Web 2013 – retour sur la première journée
« Ce que j’en ai retenu: l’unité em permet de ne pas “exploser” le design sur un zoom texte et favorise l’accessibilité. Par contre pour les calcules il faut tenir compte de l’héritage de contexte, mais une mixin Sass peut vous aider pour ça. L’unité rem permet de s’abstraire du contexte, mais pose des problèmes quand on veut justement qu’un bloc en hérite, il faut alors repasser par le pixel. L’idée des em sur les padding et margin verticaux me plaisent bien, surtout pour garder le rythme vertical du texte. Définir des composants d’UI en em permet de les agrandir proportionnellement quand on agrandi la taille du texte. »
-
Paris Web 2013
« Ordinateur de bureau, smartphone, liseuse, TV, etc. ont chacun une taille de base de texte (root font size) différente par défaut. Nicolas Hoizey nous invite donc à travailler en unité relative et non fixe, en em plutôt qu’en px : « Un petit pas pour l’em, un grand pas pour le web ». Bref, il faut penser fluide, designer élastique et coder zoomable. « Je suis DA web et je passe ma journée à faire des maquettes en pixels. Est-ce qu’on parle encore le même langage ? » demande une personne de la salle. Et oui, il y a une vraie incohérence dans notre chaîne de production ! »
Buzz and feedback
Here’s what was said about this presentation on social media.
