Un petit pas pour l’em,
un grand pas pour le Web
Nicolas Hoizey @nhoizey
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é...
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
r...
5
Oui,la page est bien chargée…
6
…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
sm...
« Ma préférence à moi… »
Aujourd'hui,je parcours le Web
principalement sur mon ordinateur
portable,très souvent sur mon
sm...
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 technol...
Techniques de mise en œuvre
•  C14: Using em units for font sizes
•  C20: Using relative measurements to set column
widths...
«
AccessiWeb 2.2,critère 10.4 (argent)
Dans chaque page Web,le texte
reste-t-il lisible lorsque la taille des
caractères e...
«
Checklist Opquast V2 -Critère 142 (niveau 2)
La taille des polices destinées à
l'affichage écran est exprimée en
taille v...
«It is the nature of the web to be
flexible,and it should be our role as
designers and developers to embrace
this flexibilit...
«
John Allsopp,A Dao of Web Design (2000)
[Make] pages which adapt to the needs
of a reader,whose eyesight is less than
pe...
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...
Certains navigateurs ne sont pas en 16px
Certains matériels et navigateurs ont parfois une taille
de base (root font size)...
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éduir...
38
«
Understanding Success Criteria 1.4.4
Above 200%,[full] zoom (which resizes
text,images,and layout regions and
creates a ...
Le zoom global sur mobile
Un double tap —bien géré—permet d’accéder
rapidement au niveau de zoom exactement adapté à
l’élé...
Le zoom global sur mobile
Mais les aller-retours sont nécessaires entre vue
complète et vue zoomées,pas franchement confor...
Le zoom global sur desktop
Le contenu sort vite de l'écran —sur un ordinateur
« normal »—et nécessite un scroll horizontal...
Ça se discute !
Raphael Goetter a lancé un document pour partager les
possibilités et pratiques de zoom dans les navigateu...
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
un...
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...
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 sau...
La grille horizontale en em
•  Définir toutes les tailles de texte et conteneurs,
padding et margin verticaux en em
•  Pour...
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 :
bod...
Ce 62.5% pose différents problèmes
Il faut redéfinir toutes les tailles de textes pour ne pas
laisser trainer des textes il...
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	
  {	
  font-­‐siz...
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
$base-­‐font-­‐size:	
  16px;	
  
	
  
@function	
  em($target,	
  $context:	
  $base-­‐...
Attention aux arrondis
(on ne parle pas ici de border-radius…)
Un enchainement d’arrondis peut mener à une catastrophe :
•...
La grille verticale en design
élastique
C’est à dire —si vous avez suivi c’est simple—
le rythme horizontal,les colonnes…
...
Une grille verticale aussi en em
Si la largeur est fixée en pixels,le nombre de caractères
par ligne diminue fortement en g...
Attention aux images de contenus
Les images SVG peuvent être redimensionnées en em
et suivre les changements de taille de ...
Attention aux sprites
Images bitmap taillées en px,risque de « débordement »
d’images voisines quand on agrandi le texte :...
Solutions pour les sprites
Une solution simple et qui fonctionne partout :
•  « éloigner » plus les images dans les sprite...
Le design élastique posait un autre soucis
On défini une colonne principale en élastique,puis
•  Soit on limite la largeur ...
Responsive Web Design élastique
68
Le Responsive Web Design élastique
Il s’agit d’appliquer un design élastique,mais avec
adaptation automatique à l’espace h...
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	
  {	
  
	
  	...
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...
Mais…
Quand on veut changer les dimensions de tout une partie
du design,on ne peut pas utiliser la technique « Sizing
Web ...
vw,vh,etc.
Ces nouvelles unités sont des pourcentages du viewport :
•  vw: 1% de la largeur
•  vh: 1% de la hauteur
Certai...
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 l...
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 ...
…sans perdre le contrôle !
L’intégration en Responsive Web Design
élastique est —aujourd’hui,à mon avis—
le meilleur moyen...
103
Crédits photos
Empreinte de Buzz Aldrin sur la Lune,NASA,1969
http://en.wikipedia.org/wiki/File:Apollo_11_bootprint.jpg
10...
Prochain SlideShare
Chargement dans…5
×

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

6 385 vues

Publié le

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 à 24px 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.

Voir sur Lanyrd : http://lanyrd.com/2013/parisweb/sckdfg/

Publié dans : Technologie
0 commentaire
13 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
6 385
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 235
Actions
Partages
0
Téléchargements
47
Commentaires
0
J’aime
13
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

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

×