10 révélations sur le Web mobile

Web-5 Béziers, 2012

Vous êtes concepteur web ? Genre un vrai de vrai ? Vous êtes presque l’inventeur du Responsive Web Design et pensez que le Web mobile n’a plus de secret pour vous ?

Je vous propose pourtant de découvrir une poignée de subtilités encore méconnues, même de vous (ouais enfin j’espère) !
On évoquera le media handheld, les tailles d’écran, les valeurs de pixels indépendants, le retina, @viewport en CSS, la meta width=device-width, l’accélération matérielle, les unités nouvelles telles que vw, vh, ou encore dpi, dppx, etc.

Soyons joueurs et faisons un pari : si vous n’avez rien appris pendant cette présentation, je vous paye une bière alsacienne (ou un jus de kiwi) !

Transcript

1. 10 RÉVÉLATIONS SUR LE WEB MOBILE
2. Raphaël Goetter Übercheerleader Alsacréations
3. <picture> media queries srcset handheld vw, vh, vmin, vmax @viewport device-width <meta> viewport accélération matérielle dpi, dpcm, dppx retina DIPs
4. IL EXISTE UN MEDIA « HANDHELD » since 1998 RÉVÉLATION N°1
5. IL EXISTE UN MEDIA HANDHELD … Et ça fait 15 ans ma bonne dame ! n°1 « handheld » : intended for handheld devices (typically small screen, limited bandwidth). – W3C 1998 “
6. IL EXISTE UN MEDIA HANDHELD Relisez vos specs CSS2 ! n°1
7. IL EXISTE UN MEDIA HANDHELD Dans la pratique... n°1 @media (handheld) { p {color : green} } YAY! YAY!
8. IL EXISTE UN MEDIA HANDHELD n°1 1998 2007 2013 Évolution du support au cours du temps...
9. IL EXISTE UN MEDIA HANDHELD Évolution du support au cours du temps... n°1 1998 2007 2013
10. IL EXISTE UN MEDIA HANDHELD Évolution du support au cours du temps... n°1 1998 2007 2013
11. IL EXISTE UN MEDIA HANDHELD Évolution du support au cours du temps... n°1 1998 2007 2013
12. TOUS LES IPHONES ONT UNE LARGEUR DE... « 320 PIXELS » Bouh, la honte ! RÉVÉLATION N°2 Crédits : Flickr / Potatojunkie (cc) Crédits : Flickr / Potatojunkie (cc)
13. LES IPHONES FONT TOUS 320px n°2 leboncoin.fr
14. LES IPHONES FONT TOUS 320px n°2 leboncoin.fr 1240px 1240px
15. LES IPHONES FONT TOUS 320px n°2 iPhone3 iPhone4 iPhone5 320px 320px 640px 640px 640px 640px
16. LES IPHONES FONT TOUS 320px n°2 iPhone3 iPhone4 iPhone5 320px 320px 640px 640px 640px 640px
17. LES IPHONES FONT TOUS 320px n°2 Largeur physique iPhone 3 : 320px Samsung Galaxy S : 480px iPhone 4, iPhone 5 : 640px Nokia Lumia 920 : 768px iPad, iPad Mini : 768px Sony Xperia Z : 1080px Samsung Galaxy S4 : 1080px iPad 3 : 1536px
18. LES IPHONES FONT TOUS 320px n°2 « device-width » iPhone 3, 4, 5 : 320px Nokia Lumia 920 : 320px Sony Xperia Z : 360px Samsung Galaxy S4 : 360px iPad 1, 2, 3 : 768px iPad mini : 768px
19. LES IPHONES FONT TOUS 320px n°2 « device-width » iPhone 3, 4, 5 : 320px Nokia Lumia 920 : 320px Sony Xperia Z : 360px Samsung Galaxy S4 : 360px iPad 1, 2, 3 : 768px iPad mini : 768px Device Independant Pixels (DIPs) Ressource : « a pixel is not a pixel »
20. LES IPHONES FONT TOUS 320px n°2 Viewport = largeur de fenêtre Safari : 980px Opera mini : 850px Opera mobile : 980px Android 1 : 800px Android 2 : 800px Android 3 : 800px Android 4 : 980px IE mobile : 1024px
21. LES IPHONES FONT TOUS 320px n°2 Affichage (zoom) par défaut 640px 640px iPhone4 320px 320px 980px 980px largeur physique device-width viewport
22. LES IPHONES FONT TOUS 320px n°2 Affichage (zoom) par défaut iPhone4 320px 320px 980px 980px Niveau de zoom : device-width / viewport 320 / 980 = 0,33 device-width viewport
23. LES IPHONES FONT TOUS 320px n°2 Connaître les valeurs de son mobile Ressource : www.mobitest.me
24. A« WIDTH=DEVICE-WIDTH » N'EST PAS « LA SOLUTION » RÉVÉLATION N°3 Crédits : Flickr / Taylor Dawn Fortune (cc) Crédits : Flickr / Taylor Dawn Fortune (cc)
25. « WIDTH = DEVICE-WIDTH » ? Pas si sûr... n°3 <meta name="viewport" content="width=320"> Largeur d'affichage = 320px
26. « WIDTH = DEVICE-WIDTH » ? Pas si sûr... n°3 <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width"> Largeur d'affichage = device-width
27. « WIDTH = DEVICE-WIDTH » ? Pas si sûr... n°3 <meta name="viewport" content="width=device-width"> Niveau de zoom : device / viewport 320 / 320 = 1 device-width = 320 device-height = 568 iPhone 5 iPhone 5
28. « WIDTH = DEVICE-WIDTH » ? Pas si sûr... n°3 <meta name="viewport" content="width=device-width"> device-width = 320 device-height = 568 iPhone 5 iPhone 5 Niveau de zoom : device / viewport 568 / 320 = 1.775
29. « WIDTH = DEVICE-WIDTH » ? Alternative : ne fixer que le niveau de zoom n°3 <meta name="viewport" content="width=device-width"> <meta name="viewport" content="initial-scale=1.0"> Niveau de zoom = 1
30. « WIDTH = DEVICE-WIDTH » ? Initial-scale FTW ! n°3 <meta name="viewport" content="initial-scale=1.0"> Niveau de zoom = 1 device-width = 320 device-height = 568 iPhone 5 iPhone 5
31. « WIDTH = DEVICE-WIDTH » ? Initial-scale FTW ! n°3 <meta name="viewport" content="initial-scale=1.0"> device-width = 320 device-height = 568 iPhone 5 iPhone 5 Niveau de zoom = 1
32. « WIDTH = DEVICE-WIDTH » ? Initial-scale FTW ! n°3 <meta name="viewport" content="initial-scale=1.0"> Niveau de zoom = 1 <meta name="viewport" content="width=device-width, initial-scale=1.0"> aussi OK avec :
33. « WIDTH = DEVICE-WIDTH » ? Préférez-lui la valeur « initial-scale=1.0 » n°3 Ressource : http://kiwi.gg/initialscale Sur Apple iOS (uniquement), la valeur de « device-width » est invariable quelle que soit l'orientation. “
34. ALA <META> VIEWPORT EST VOUÉE À DISPARAîTRE RÉVÉLATION N°4 Crédits : Flickr / Cayusa (cc) Crédits : Flickr / Cayusa (cc)
35. VIEWPORT BIENTOT OBSOLÈTE ? C'est le job de CSS, pas HTML ! n°4 <meta name="viewport" content="..."> Inventé par Apple sur Safari iOS1 Propriétaire Repris par l'ensemble des autres navigateurs
36. VIEWPORT BIENTOT OBSOLÈTE ? C'est le job de CSS, pas HTML ! n°4 <meta name="viewport" content="..."> Du HTML pour gérer le design Maintenance plus complexe Non standard
37. VIEWPORT BIENTOT OBSOLÈTE ? 1- Le cas des .mobi n°4 Crédits : Flickr / davo39 (cc) osteofrance.mobi meta Viewport non reconnue sur Safari
38. VIEWPORT BIENTOT OBSOLÈTE ? 1- Le cas des .mobi n°4 Crédits : Flickr / davo39 (cc) osteofrance.mobi meta Viewport non reconnue sur Safari OK sur m.osteofrance.com !
39. VIEWPORT BIENTOT OBSOLÈTE ? 2- Le cas du mode « snap » n°4 Crédits : mobilexweb.com Mode « snap » Sur Windows Phone 8
40. VIEWPORT BIENTOT OBSOLÈTE ? 2- Le cas du mode « snap » n°4 Crédits : mobilexweb.com meta Viewport non reconnue en « snap » mode
41. VIEWPORT BIENTOT OBSOLÈTE ? C'est quoi alors la solution standard ? n°4 @viewport { ... } Ici, les règles CSS pour définir la largeur, la hauteur, le niveau de zoom, l'orientation, etc. Ressource : http://www.w3.org/TR/css-device-adapt/
42. VIEWPORT BIENTOT OBSOLÈTE ? C'est quoi alors la solution standard ? n°4 @viewport { width: device-width; height: device-height; zoom: 1; max-zoom: 1; min-zoom: 1; user-zoom: fixed; orientation: portrait; } Dans la « vraie » vie : @-ms-viewport @-o-viewport @-moz-viewport etc.
43. VIEWPORT BIENTOT OBSOLÈTE ? Dans la « vraie » vie... n°4 @media (orientation: portrait) { @viewport {width: device-width} } @media (orientation: landscape) { @viewport {width: device-height} }
44. VIEWPORT BIENTOT OBSOLÈTE ? Dans la « vraie » vie... n°4 10 10 Support actuel de @viewport : Encourageant !
45. IL EXISTE DES UNITÉS CSS DE VIEWPORT vw, vh, vmin, vmax RÉVÉLATION N°5 Crédits : Flickr / abardwell (cc) Crédits : Flickr / abardwell (cc)
46. LES UNITÉS VW, VH, VMIN, VMAX Calculez selon la taille de fenêtre n°5 .content {height : 100%;}
47. LES UNITÉS VW, VH, VMIN, VMAX Calculez selon la taille de fenêtre n°5 body {height : 100%;} .content {height : 100%;}
48. LES UNITÉS VW, VH, VMIN, VMAX Calculez selon la taille de fenêtre n°5 html {height : 100%;} body {height : 100%;} .content {height : 100%;}
49. LES UNITÉS VW, VH, VMIN, VMAX Calculez selon la taille de fenêtre n°5 html {height : 100%;} body {height : 100%;} .content {height : 100vh;} Ressource : http://dev.w3.org/csswg/css-values/
50. LES UNITÉS VW, VH, VMIN, VMAX Calculez selon la taille de fenêtre n°5 Démo : http://kiwi.gg/vw
51. LES UNITÉS VW, VH, VMIN, VMAX Compatibilité navigateurs n°5 Ressource : http://dev.w3.org/csswg/css-values/ 9 9 Support actuel des unités de viewport : 6 6 Plutôt bon !
52. IL EXISTE DES UNITÉS CSS DE RÉSOLUTION RÉVÉLATION N°6 dpi, dpcm, dppx Crédits : Flickr / Kalexanderson (cc) Crédits : Flickr / Kalexanderson (cc)
53. LES UNITES DPI, DPCM, DPPX Ciblez selon la résolution n°6 Au début était... LE PIXEL-RATIO
54. LES UNITES DPI, DPCM, DPPX Ciblez selon la résolution n°6 640px 640px iPhone4 320px 320px largeur physique device-width
55. LES UNITES DPI, DPCM, DPPX Ciblez selon la résolution n°6 640px 640px iPhone4 320px 320px largeur physique device-width Device Pixel Ratio : 640 / 320 = 2
56. LES UNITES DPI, DPCM, DPPX Ah ouais quand-même ! n°6 ✔ Pixel-ratio : 1 ✔ Ordinateurs (non retina) ✔ iPhone 2, iPhone 3 ✔ iPad 1, iPad 2 ✔ Samsung Galaxy Tab 10 ✔ Samsung Galaxy S ✔ Pixel-ratio : 1.3 ✔ Google Nexus 7 ✔ Pixel-ratio : 1.5 ✔ Google Nexus S ✔ Samsung Galaxy S2 ✔ Samsung Wave ✔ HTC Desire ✔ HTC Incredible S ✔ HTC Velocity ✔ HTC Sensation ✔ Pixel-ratio : 2 ✔ iPhone 4, iPhone 4S ✔ iPhone 5 ✔ iPad 3, iPad 4 ✔ Retina MacBooks ✔ Google Galaxy Nexus ✔ Google Nexus 4 ✔ Google Nexus 10 ✔ Samsung Galaxy S3 ✔ Samsung Galaxy Note 2 ✔ Sony Xperia S ✔ HTC One X ✔ Pixel-ratio : 3 ✔ Sony Xperia Z et ZL ✔ Samsung Galaxy S4
57. LES UNITES DPI, DPCM, DPPX Détecter la résolution avec pixel-ratio ? n°6 @media (min-device-pixel-ratio: 1.5) { div {background : url(concombre-big.jpg) } @media (max-device-pixel-ratio: 1) { div {background : url(concombre-small.jpg) }
58. LES UNITES DPI, DPCM, DPPX Détecter la résolution avec pixel-ratio ? n°6 @media (min-device-pixel-ratio: 1.5) { div {background : url(concombre-big.jpg) } @media (max-device-pixel-ratio: 1) { div {background : url(concombre-small.jpg) } Inventé par Webkit Propriétaire Non standard
59. LES UNITES DPI, DPCM, DPPX La propriété « resolution » n°6 dpi points par inch dpcm points par centimètre dppx points par pixel Équivalent « standard » de pixel-ratio
60. LES UNITES DPI, DPCM, DPPX La propriété « resolution » n°6 dpi points par inch dpcm points par centimètre dppx points par pixel 1 inch= 96 px = 2.54 cm 1 dpi ≈ 2.54 dpcm 1 dppx ≈ 96 dpi 1 dpcm ≈ 0.39 dpi
61. LES UNITES DPI, DPCM, DPPX La propriété « resolution » n°6 dpi points par inch dpcm points par centimètre dppx points par pixel @media (min-resolution : 1.5dppx) { div { background : url(concombre-big.jpg) } } 1 inch= 96 px = 2.54 cm 1 dpi ≈ 2.54 dpcm 1 dppx ≈ 96 dpi 1 dpcm ≈ 0.39 dpi
62. LES UNITES DPI, DPCM, DPPX Compatibilité navigateurs n°6 Ressource : http://www.w3.org/TR/css3-values/#resolution Mouais bof Support actuel de « resolution » : Support actuel de « resolution » + unité dppx : 9 9
63. LE RÉTINA DE DEMAIN EST DÉJÀ LÀ ! enfin presque RÉVÉLATION N°7 Crédits : Flickr / epiclectic (cc) Crédits : Flickr / epiclectic (cc)
64. LE RÉTINA DE DEMAIN ? n°7 iPhone3 iPhone4 Pas rétina Pas rétina Rétina Rétina
65. LE RÉTINA DE DEMAIN ? n°7 iPhone3 iPhone4 Pas rétina Pas rétina Rétina Rétina concombre.jpg ?
66. LE RÉTINA DE DEMAIN ? n°7 iPhone3 iPhone4 Pas rétina Pas rétina Rétina Rétina concombre-big.jpg concombre-small.jpg
67. LE RÉTINA DE DEMAIN ? Remplacer l'image conditionnellement n°7 Petits écrans : <img src="concombre-small.jpg"> Grands écrans (>640px) : <img src="concombre-big.jpg"> if(window.innerWidth >= 640) { blablabla src.replace("small", "big"); } Exemple :
68. LE RÉTINA DE DEMAIN ? Remplacer l'image conditionnellement n°7 Petits écrans : <img src="concombre-small.jpg"> Grands écrans (>640px) : <img src="concombre-big.jpg"> if(window.innerWidth >= 640) { blablabla src.replace("small", "big"); } Exemple : Les 2 images sont chargées
69. LE RÉTINA DE DEMAIN ? L'élément <picture> n°7 <picture width="640" height="480"> <source media="(min-resolution: 1.5dppx)" src="concombre-big.jpg"> <source media="(max-resolution: 1dppx)" src="concombre-small.jpg"> <img src="concombre-small.jpg" alt=""> </picture> Alternative : picturefill Ressource : http://www.w3.org/community/respimg/
70. LE RÉTINA DE DEMAIN ? L'attribut « srcset » n°7 <img src="concombre-small.jpg" srcset="concombre-big.jpg 2x" alt="" >
71. LE RÉTINA DE DEMAIN ? L'attribut « srcset » n°7 <img src="concombre-small.jpg" srcset="concombre-big.jpg 2x" alt="" > Alternative : srcset polyfill Ressource : http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ <img src="concombre-small.jpg" srcset=" concombre-small.jpg 480w, concombre-medium.jpg 768w, concombre-big.jpg 1x " alt="" > Ou encore :
72. LE RÉTINA DE DEMAIN ? Compatibilité navigateurs n°7 Support actuel de <picture> et srcset : Lamentable !
73. IL EXISTE DES MEDIA QUERIES « CSS4 » RÉVÉLATION N°8 Crédits : Flickr / makelessnoise (cc) Crédits : Flickr / makelessnoise (cc)
74. DES MEDIA QUERIES « CSS4 » Affinez vos conditions n°8 @media (pointer) présence ou non d'un dispositif de pointage @media (hover) support ou non de l'événement de survol @media (luminosity) mesure de la luminosité ambiante @media (script) support ou non de JavaScript
75. DES MEDIA QUERIES « CSS4 » @media (pointer) n°8 @media (pointer : none) pas de dispositif de pointage @media (pointer : coarse) pointage limité (tablette, smartphone tactile) @media (pointer : fine) pointage précis (souris, stylet) @media (pointer : coarse) and not (pointer : fine) { .button {font-size : 3rem} }
76. DES MEDIA QUERIES « CSS4 » @media (hover) n°8 @media (hover) { nav:hover {margin-left : 100%} }
77. DES MEDIA QUERIES « CSS4 » @media (luminosity) n°8 @media (luminosity: dim) environnement sombre @media (luminosity: normal) environnement normal @media (luminosity: washed) environnement très clair @media (luminosity : washed) { body { filter: brightness(0.8) contrast(1.2); } }
78. DES MEDIA QUERIES « CSS4 » @media (script) n°8 @media (script) { .kiwi {ici un truc à faire si JS est activé} }
79. DES MEDIA QUERIES « CSS4 » Compatibilité navigateurs n°8 Ressource : http://dev.w3.org/csswg/mediaqueries4 Support actuel des Media Queries 4 : Vide !
80. JAVASCRIPT POUR GÉRER VOS MEDIA QUERIES ! RÉVÉLATION N°9 Crédits : Flickr / swirlingthoughts (cc) Crédits : Flickr / swirlingthoughts (cc)
81. JAVASCRIPT ET MEDIA QUERIES Parce que CSS est limité... N°9 CSS Media Queries offrent de larges possibilités de détection, mais... CSS ne peut pas modifier la structure HTML CSS dispose d'événements limités (pas de onresize, etc.) CSS ne permet pas de charger des ressources telles que des scripts externes ou des images etc.
82. JAVASCRIPT ET MEDIA QUERIES Parce que JS est limité... N°9 JavaScript : vastes possibilités (DOM, boucles, if else), mais... JS offre moins de possibilités de détection que CSS Détection de largeurs complexe (screen.width, window.innerWidth, …) + compatibilités (IE) Pas de détection de résolution (DPI, DPCM, DPPX) Pas de détection (simple) de l'orientation Pas de détection (simple) du touch, de la luminosité etc.
83. JAVASCRIPT ET MEDIA QUERIES Le meilleur des deux mondes N°9 matchMedia() ! <script> if (window.matchMedia("(min-device-width: 640px)").matches) { /* La largeur du périphérique est au-moins 640px */ } else { /* La largeur est inférieure à 640px */ } </script>
84. JAVASCRIPT ET MEDIA QUERIES Le meilleur des deux mondes N°9 matchMedia() ! <script> if (window.matchMedia("(min-device-width: 640px)").matches) { On charge jQuery + slideshow.js et on se lâche ! } else { On ne charge pas les ressources superflues } </script>
85. JAVASCRIPT ET MEDIA QUERIES Le meilleur des deux mondes N°9 matchMedia() ! if (window.matchMedia("(orientation : landscape)").matches) { if (window.matchMedia("(min-resolution: 192dpi)").matches) { if (window.matchMedia("(min-resolution: 2ppx)").matches) { if (window.matchMedia("(pointer : coarse)").matches) { if (window.matchMedia("(luminosity : dim)").matches) {
86. JAVASCRIPT ET MEDIA QUERIES Compatibilité navigateurs N°9 Ressource : La méthode matchMedia() Support actuel de matchMedia() : Très abordable ! 10 10 3 3
87. L'ACCÉLÉRATION MATÉRIELLE : UNE BÉNÉDICTION POUR VOTRE MOBILE RÉVÉLATION N°10 Crédits : Flickr / theloushe (cc) Crédits : Flickr / theloushe (cc)
88. L'ACCÉLÉRATION MATÉRIELLE L'art de rendre vos transitions fluides n°10 Les transitions et animations CSS3 sont 5 à 10 fois plus rapides et fluides qu'en JavaScript. – source bradshawenterprises.com “
89. L'ACCÉLÉRATION MATÉRIELLE L'art de rendre vos transitions fluides n°10 Les transitions et animations CSS3 sont 5 à 10 fois plus rapides et fluides qu'en JavaScript. “ MAIS EN FAIT PAS TOUT LE TEMPS !
90. L'ACCÉLÉRATION MATÉRIELLE L'art de rendre vos transitions fluides n°10 Un certain nombre de propriétés imposent au navigateur de recalculer à chaque étape de l'animation (repaint)... margin, margin-top /-right /-bottom / -left padding, padding-top /-right /-bottom / -left top, right, bottom, left etc.
91. L'ACCÉLÉRATION MATÉRIELLE L'art de rendre vos transitions fluides n°10 Un certain nombre de propriétés imposent au navigateur de recalculer à chaque étape de l'animation (repaint)... margin, margin-top /-right /-bottom / -left padding, padding-top /-right /-bottom / -left top, right, bottom, left etc. ET C'EST TOUT SACCADÉ SUR MOBILES :(
92. L'ACCÉLÉRATION MATÉRIELLE L'art de rendre vos transitions fluides n°10 On peut décharger le CPU et demander à la carte graphique (GPU) de faire le boulot, en activant l'accélération matérielle... en CSS (via transformation 3D) : nav { transform: translate3d(-90%, 0, 0); transition : transform 0.5s; } nav:hover { transform: translate3d(0, 0, 0); }
93. L'ACCÉLÉRATION MATÉRIELLE L'art de rendre vos transitions fluides n°10 Et pour être compatible au maximum : nav { left : -90%; transform: translate3d(0, 0, 0); transition : left 0.5s } nav:hover { left : 0; } Hop ! On active l'accélération matérielle
94. L'ACCÉLÉRATION MATÉRIELLE L'art de rendre vos transitions fluides n°10 transform: translateZ(0); (n'oubliez pas les préfixes) transform: translate3d(0,0,0); (+préfixes) perspective: 1000; backface-visibility: hidden; (+préfixes) les CSS filters (grayscale, sepia, blur, saturate, …) etc. Activez l'accélération matérielle en CSS avec des transformation 3D :
95. L'ACCÉLÉRATION MATÉRIELLE Compatibilité navigateurs n°10 Support actuel de l'accélération matérielle (via transform 3D) : Tranquille !
96. EN RÉSUMÉ...
97. 1. IL EXISTE UN MÉDIA HANDHELD (INUTILE) 2. TOUS LES IPHONE FONT 320PX DE LARGE 3. WIDTH=DEVICE-WIDTH N'EST PAS « LA » SOLUTION 4. LA MÉTA VIEWPORT EST VOUÉE À DISPARAÎTRE 5. IL EXISTE DES UNITÉS DE VIEWPORT (VW, VH, VMIN, VMAX) 6. IL EXISTE DES UNITÉS DE RÉSOLUTION (DPI, DPCM, DPPX) 7. LE RETINA DE DEMAIN : <PICTURE>, SRCSET 8. IL EXISTE DES MEDIA QUERIES CSS4 9. MATCHMEDIA = JS + MEDIA QUERIES 10. ON PEUT ACTIVER L'ACCÉLÉRATION MATÉRIELLE EN CSS
98. CRÉDITS Photos, illustrations : Fotolia Flickr.com (licence CC) Police : Segoe UI Delicious Heavy Icônes et pictos : Iconfinder Findicons
99. MERCI ! Raphaël Goetter www.alsacreations.fr @goetter