Slide 1
Slide 2
Nicolas Hoizey Co-fondateur de Clever Age Directeur de l’Innovation
2 100% fait avec nos doigts
Slide 3
« 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
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
Slide 5
5 Oui, la page est bien chargée…
Slide 6
…mais j’ai choisi une taille de texte de base à 18px !
Slide 7
7 Heureusement, ça passe au moins en 16px…
Slide 8
8
Slide 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 . 9
Slide 10
« 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
Slide 11
Mes préférences de navigateurs 11
Slide 12
12 18px dans le navigateur, mais 11px forcé dans la CSS
Slide 13
À situation exceptionnelle, mesures exceptionnelles 13
Slide 14
14 14px forcé même où la CSS indique 11px
Slide 15
15
Slide 16
« 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
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
« 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
« 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/
Slide 20
« 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
« 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
22
Slide 23
23 16px
Slide 24
24 18px
Slide 25
25 24px
Slide 26
26 72px
Slide 27
27 16px
Slide 28
28 Du rose en l’honneur de @ hellgy Paris Web !
Slide 29
29 18px
Slide 30
30 24px
Slide 31
31 24px
Slide 32
32
Slide 33
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
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
http:// isitrwd.com / rfs / 35
Slide 36
36 http:// goo.gl /R54ZuC
Slide 37
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
Slide 38
38
Slide 39
« 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
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
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
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
Slide 43
Ç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
Nous ne savons (presque) rien du futur du Web , des appareils et navigateurs sur lesquels nos pages devront s’afficher… 44
Slide 45
« 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
46 http:// futurefriend.ly /
Slide 47
« 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
«
Slide 48
48
Slide 49
49 Marie Guillaumet & Vincent Valentin , atelier Paris Web 2012
Slide 50
50 http:// typographisme.net /post/Macro-typographie-sur-le-Web-Mise-en-pratique
Slide 51
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
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
Slide 53
53 Richard Rutter
http:// clagnut.com /blog/348/
Slide 54
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
Slide 55
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
56 http:// alistapart.com /article/ howtosizetextincss
Slide 57
57 http:// filamentgroup.com / lab / how_we_learned_to_leave_body_font_size_alone /
Slide 58
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
Slide 59
Convertir les valeur de px en
em
?
PXtoEM.com
fourni
des tableaux de
calculs pré
définis,
et une calculette
59
Slide 60
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
Slide 61
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
Slide 62
La grille verticale en design élastique
C’est à dire —si vous avez suivi c’est simple— le rythme horizontal, les colonnes…
62
Slide 63
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
Slide 64
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
Attention aux sprites
Images bitmap taillées en px, risque de « débordement » d’images voisines quand on agrandi le texte : 65
Slide 66
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
Slide 67
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
Slide 68
Responsive Web Design élastique
68
Slide 69
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
Slide 70
70 16px http:// goldilocksapproach.com / 33em = 528px
Slide 71
71 20px 33em = 660px
Slide 72
72 24px 33em = 792px
Slide 73
73 http:// blog.cloudfour.com /the- ems -have- it
proportional -media- queries
ftw /
Slide 74
74 https :// github.com / htmlzengarden / outline
Slide 75
Bonus
75
Slide 76
76 https://medium.com/p/8f433689736f
Slide 77
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
Slide 78
Sizing Web Components 78 Possibilité de modifier la taille globale du composant juste avec sa font-size : %
Slide 79
79
Slide 80
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
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
Slide 82
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
Slide 83
http://css-tricks.com/viewport-sized-typography/ 42px%!% 83
Slide 84
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
85
Slide 86
86 16px http:// etchapps.com /
Slide 87
87 18px
Slide 88
88 24px
Slide 89
89 16px http:// marieguillaumet.com /
Slide 90
90 24px
Slide 91
91 32px
Slide 92
92 http:// marieguillaumet.com /refonte-mon-portfolio-du-responsive-en- em
premiere -partie/
Slide 93
93 16px Maquette statique, site live dans quelques jours
Slide 94
94 18px
Slide 95
95 24px
Slide 96
96 16px http:// www.smashingmagazine.com /
Slide 97
97 18px
Slide 98
98 24px
Slide 99
99 32px
Slide 100
100
Slide 101
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
…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
Slide 103
103
Slide 104
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…
