Upgrade to Pro — share decks privately, control downloads, hide ads and more …

10 révélations sur le Web mobile

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) !

Raphael Goetter

June 13, 2013
Tweet

More Decks by Raphael Goetter

Other Decks in Programming

Transcript

  1. <picture> media queries srcset handheld vw, vh, vmin, vmax @viewport

    device-width <meta> viewport accélération matérielle dpi, dpcm, dppx retina DIPs
  2. 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 “
  3. IL EXISTE UN MEDIA HANDHELD Dans la pratique... n°1 @media

    (handheld) { p {color : green} } YAY! YAY!
  4. 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)
  5. 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
  6. 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
  7. 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 »
  8. 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
  9. LES IPHONES FONT TOUS 320px n°2 Affichage (zoom) par défaut

    640px 640px iPhone4 320px 320px 980px 980px largeur physique device-width viewport
  10. 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
  11. LES IPHONES FONT TOUS 320px n°2 Connaître les valeurs de

    son mobile Ressource : www.mobitest.me
  12. 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)
  13. « WIDTH = DEVICE-WIDTH » ? Pas si sûr... n°3

    <meta name="viewport" content="width=320"> Largeur d'affichage = 320px
  14. « 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
  15. « 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
  16. « 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
  17. « 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
  18. « 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
  19. « 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
  20. « 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 :
  21. « 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. “
  22. ALA <META> VIEWPORT EST VOUÉE À DISPARAîTRE RÉVÉLATION N°4 Crédits

    : Flickr / Cayusa (cc) Crédits : Flickr / Cayusa (cc)
  23. 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
  24. 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
  25. VIEWPORT BIENTOT OBSOLÈTE ? 1- Le cas des .mobi n°4

    Crédits : Flickr / davo39 (cc) osteofrance.mobi meta Viewport non reconnue sur Safari
  26. 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 !
  27. VIEWPORT BIENTOT OBSOLÈTE ? 2- Le cas du mode «

    snap » n°4 Crédits : mobilexweb.com Mode « snap » Sur Windows Phone 8
  28. VIEWPORT BIENTOT OBSOLÈTE ? 2- Le cas du mode «

    snap » n°4 Crédits : mobilexweb.com meta Viewport non reconnue en « snap » mode
  29. 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/
  30. 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.
  31. VIEWPORT BIENTOT OBSOLÈTE ? Dans la « vraie » vie...

    n°4 @media (orientation: portrait) { @viewport {width: device-width} } @media (orientation: landscape) { @viewport {width: device-height} }
  32. VIEWPORT BIENTOT OBSOLÈTE ? Dans la « vraie » vie...

    n°4 10 10 Support actuel de @viewport : Encourageant !
  33. 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)
  34. LES UNITÉS VW, VH, VMIN, VMAX Calculez selon la taille

    de fenêtre n°5 .content {height : 100%;}
  35. LES UNITÉS VW, VH, VMIN, VMAX Calculez selon la taille

    de fenêtre n°5 body {height : 100%;} .content {height : 100%;}
  36. 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%;}
  37. 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/
  38. LES UNITÉS VW, VH, VMIN, VMAX Calculez selon la taille

    de fenêtre n°5 Démo : http://kiwi.gg/vw
  39. 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 !
  40. 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)
  41. LES UNITES DPI, DPCM, DPPX Ciblez selon la résolution n°6

    640px 640px iPhone4 320px 320px largeur physique device-width
  42. 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
  43. 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
  44. 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) }
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. 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)
  51. LE RÉTINA DE DEMAIN ? n°7 iPhone3 iPhone4 Pas rétina

    Pas rétina Rétina Rétina concombre.jpg ?
  52. 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
  53. 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 :
  54. 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
  55. 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/
  56. LE RÉTINA DE DEMAIN ? L'attribut « srcset » n°7

    <img src="concombre-small.jpg" srcset="concombre-big.jpg 2x" alt="" >
  57. 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 :
  58. IL EXISTE DES MEDIA QUERIES « CSS4 » RÉVÉLATION N°8

    Crédits : Flickr / makelessnoise (cc) Crédits : Flickr / makelessnoise (cc)
  59. 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
  60. 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} }
  61. DES MEDIA QUERIES « CSS4 » @media (hover) n°8 @media

    (hover) { nav:hover {margin-left : 100%} }
  62. 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); } }
  63. DES MEDIA QUERIES « CSS4 » @media (script) n°8 @media

    (script) { .kiwi {ici un truc à faire si JS est activé} }
  64. DES MEDIA QUERIES « CSS4 » Compatibilité navigateurs n°8 Ressource

    : http://dev.w3.org/csswg/mediaqueries4 Support actuel des Media Queries 4 : Vide !
  65. JAVASCRIPT POUR GÉRER VOS MEDIA QUERIES ! RÉVÉLATION N°9 Crédits

    : Flickr / swirlingthoughts (cc) Crédits : Flickr / swirlingthoughts (cc)
  66. 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.
  67. 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.
  68. 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>
  69. 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>
  70. 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) {
  71. JAVASCRIPT ET MEDIA QUERIES Compatibilité navigateurs N°9 Ressource : La

    méthode matchMedia() Support actuel de matchMedia() : Très abordable ! 10 10 3 3
  72. 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)
  73. 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 “
  74. 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 !
  75. 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.
  76. 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 :(
  77. 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); }
  78. 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
  79. 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 :
  80. 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
  81. CRÉDITS Photos, illustrations : Fotolia Flickr.com (licence CC) Police :

    Segoe UI Delicious Heavy Icônes et pictos : Iconfinder Findicons