• J'aime
10 Revelations sur le Web Mobile
Prochain SlideShare
Chargement dans... 5
×

10 Revelations sur le Web Mobile

  • 11,184 vues
Transféré le

Vous êtes concepteur web ? Genre un vrai de vrai ? Vous êtes presque l’inventeur ...

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

Plus dans : Technologies
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
Aucun téléchargement

Vues

Total des vues
11,184
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
29

Actions

Partages
Téléchargements
95
Commentaires
3
J'aime
16

Ajouts 0

No embeds

Signaler un contenu

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
    No notes for slide

Transcript

  • 1. 10RÉVÉLATIONSSUR LE WEB MOBILE
  • 2. Raphaël GoetterÜbercheerleaderAlsacréations
  • 3. <picture>media queriessrcsethandheldvw, vh, vmin, vmax@viewportdevice-width<meta> viewportaccélération matérielledpi, dpcm, dppxretinaDIPs
  • 4. IL EXISTE UN MEDIA« HANDHELD »since 1998RÉ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 HANDHELDRelisez vos specs CSS2 !n°1
  • 7. IL EXISTE UN MEDIA HANDHELDDans la pratique...n°1@media (handheld) {p {color : green}}YAY!YAY!
  • 8. IL EXISTE UN MEDIA HANDHELD n°11998 2007 2013Évolution du support au cours du temps...
  • 9. IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...n°11998 2007 2013
  • 10. IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...n°11998 2007 2013
  • 11. IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...n°11998 2007 2013
  • 12. TOUS LES IPHONES ONT UNE LARGEUR DE...« 320 PIXELS »Bouh, la honte !RÉVÉLATION N°2Crédits : Flickr / Potatojunkie (cc)Crédits : Flickr / Potatojunkie (cc)
  • 13. LES IPHONES FONT TOUS 320px n°2leboncoin.fr
  • 14. LES IPHONES FONT TOUS 320px n°2leboncoin.fr1240px1240px
  • 15. LES IPHONES FONT TOUS 320px n°2iPhone3 iPhone4 iPhone5320px320px 640px640px 640px640px
  • 16. LES IPHONES FONT TOUS 320px n°2iPhone3 iPhone4 iPhone5320px320px 640px640px 640px640px
  • 17. LES IPHONES FONT TOUS 320px n°2Largeur physiqueiPhone 3 : 320pxSamsung Galaxy S : 480pxiPhone 4, iPhone 5 : 640pxNokia Lumia 920 : 768pxiPad, iPad Mini : 768pxSony Xperia Z : 1080pxSamsung Galaxy S4 : 1080pxiPad 3 : 1536px
  • 18. LES IPHONES FONT TOUS 320px n°2« device-width »iPhone 3, 4, 5 : 320pxNokia Lumia 920 : 320pxSony Xperia Z : 360pxSamsung Galaxy S4 : 360pxiPad 1, 2, 3 : 768pxiPad mini : 768px
  • 19. LES IPHONES FONT TOUS 320px n°2« device-width »iPhone 3, 4, 5 : 320pxNokia Lumia 920 : 320pxSony Xperia Z : 360pxSamsung Galaxy S4 : 360pxiPad 1, 2, 3 : 768pxiPad mini : 768pxDeviceIndependantPixels(DIPs)Ressource : « a pixel is not a pixel »
  • 20. LES IPHONES FONT TOUS 320px n°2Viewport = largeur de fenêtreSafari : 980pxOpera mini : 850pxOpera mobile : 980pxAndroid 1 : 800pxAndroid 2 : 800pxAndroid 3 : 800pxAndroid 4 : 980pxIE mobile : 1024px
  • 21. LES IPHONES FONT TOUS 320px n°2Affichage (zoom) par défaut640px640pxiPhone4320px320px980px980pxlargeur physiquedevice-widthviewport
  • 22. LES IPHONES FONT TOUS 320px n°2Affichage (zoom) par défautiPhone4320px320px980px980pxNiveau de zoom :device-width / viewport320 / 980 = 0,33device-widthviewport
  • 23. LES IPHONES FONT TOUS 320px n°2Connaître les valeurs de son mobileRessource : www.mobitest.me
  • 24. A« WIDTH=DEVICE-WIDTH »NEST PAS « LA SOLUTION »RÉVÉLATION N°3Cré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 daffichage = 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 daffichage = device-width
  • 27. « WIDTH = DEVICE-WIDTH » ?Pas si sûr...n°3<meta name="viewport" content="width=device-width">Niveau de zoom :device / viewport320 / 320 = 1device-width = 320device-height = 568iPhone 5iPhone 5
  • 28. « WIDTH = DEVICE-WIDTH » ?Pas si sûr...n°3<meta name="viewport" content="width=device-width">device-width = 320device-height = 568iPhone 5iPhone 5Niveau de zoom :device / viewport568 / 320 = 1.775
  • 29. « WIDTH = DEVICE-WIDTH » ?Alternative : ne fixer que le niveau de zoomn°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 = 1device-width = 320device-height = 568iPhone 5iPhone 5
  • 31. « WIDTH = DEVICE-WIDTH » ?Initial-scale FTW !n°3<meta name="viewport" content="initial-scale=1.0">device-width = 320device-height = 568iPhone 5iPhone 5Niveau 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°3Ressource : http://kiwi.gg/initialscaleSur Apple iOS (uniquement), lavaleur de « device-width » estinvariable quelle que soitlorientation.“ 
  • 34. ALA <META> VIEWPORT EST VOUÉEÀ DISPARAîTRERÉVÉLATION N°4Crédits : Flickr / Cayusa (cc)Crédits : Flickr / Cayusa (cc)
  • 35. VIEWPORT BIENTOT OBSOLÈTE ?Cest le job de CSS, pas HTML !n°4<meta name="viewport" content="...">Inventé par Apple surSafari iOS1PropriétaireRepris par lensemble desautres navigateurs
  • 36. VIEWPORT BIENTOT OBSOLÈTE ?Cest le job de CSS, pas HTML !n°4<meta name="viewport" content="...">Du HTML pour gérer le designMaintenance plus complexeNon standard
  • 37. VIEWPORT BIENTOT OBSOLÈTE ?1- Le cas des .mobin°4Crédits : Flickr / davo39 (cc)osteofrance.mobimeta Viewportnon reconnuesur Safari
  • 38. VIEWPORT BIENTOT OBSOLÈTE ?1- Le cas des .mobin°4Crédits : Flickr / davo39 (cc)osteofrance.mobimeta Viewportnon reconnuesur SafariOK surm.osteofrance.com !
  • 39. VIEWPORT BIENTOT OBSOLÈTE ?2- Le cas du mode « snap »n°4Crédits : mobilexweb.comMode « snap »Sur WindowsPhone 8
  • 40. VIEWPORT BIENTOT OBSOLÈTE ?2- Le cas du mode « snap »n°4Crédits : mobilexweb.commeta Viewportnon reconnueen « snap » mode
  • 41. VIEWPORT BIENTOT OBSOLÈTE ?Cest quoi alors la solution standard ?n°4@viewport {...}Ici, les règles CSS pourdéfinir la largeur,la hauteur,le niveau de zoom,lorientation, etc.Ressource : http://www.w3.org/TR/css-device-adapt/
  • 42. VIEWPORT BIENTOT OBSOLÈTE ?Cest 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-viewportetc.
  • 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°41010Support actuel de @viewport :Encourageant !
  • 45. IL EXISTE DES UNITÉS CSSDE VIEWPORTvw, vh, vmin, vmaxRÉVÉLATION N°5Crédits : Flickr / abardwell (cc)Crédits : Flickr / abardwell (cc)
  • 46. LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5.content {height : 100%;}
  • 47. LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5body {height : 100%;}.content {height : 100%;}
  • 48. LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5html {height : 100%;}body {height : 100%;}.content {height : 100%;}
  • 49. LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5html {height : 100%;}body {height : 100%;}.content {height : 100vh;}Ressource : http://dev.w3.org/csswg/css-values/
  • 50. LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5Démo : http://kiwi.gg/vw
  • 51. LES UNITÉS VW, VH, VMIN, VMAXCompatibilité navigateursn°5Ressource : http://dev.w3.org/csswg/css-values/99Support actuel des unités de viewport  :66Plutôt bon !
  • 52. IL EXISTE DES UNITÉS CSSDE RÉSOLUTIONRÉVÉLATION N°6dpi, dpcm, dppxCrédits : Flickr / Kalexanderson (cc)Crédits : Flickr / Kalexanderson (cc)
  • 53. LES UNITES DPI, DPCM, DPPXCiblez selon la résolutionn°6Au début était...LE PIXEL-RATIO
  • 54. LES UNITES DPI, DPCM, DPPXCiblez selon la résolutionn°6640px640pxiPhone4320px320pxlargeur physiquedevice-width
  • 55. LES UNITES DPI, DPCM, DPPXCiblez selon la résolutionn°6640px640pxiPhone4320px320pxlargeur physiquedevice-widthDevice Pixel Ratio :640 / 320 = 2
  • 56. LES UNITES DPI, DPCM, DPPXAh 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, DPPXDé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, DPPXDé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 WebkitPropriétaireNon standard
  • 59. LES UNITES DPI, DPCM, DPPXLa propriété « resolution »n°6dpipoints par inchdpcmpoints par centimètredppxpoints par pixelÉquivalent « standard »de pixel-ratio
  • 60. LES UNITES DPI, DPCM, DPPXLa propriété « resolution »n°6dpipoints par inchdpcmpoints par centimètredppxpoints par pixel1 inch= 96 px = 2.54 cm1 dpi ≈ 2.54 dpcm1 dppx ≈ 96 dpi1 dpcm ≈ 0.39 dpi
  • 61. LES UNITES DPI, DPCM, DPPXLa propriété « resolution »n°6dpipoints par inchdpcmpoints par centimètredppxpoints par pixel@media (min-resolution : 1.5dppx) {div {background : url(concombre-big.jpg)}}1 inch= 96 px = 2.54 cm1 dpi ≈ 2.54 dpcm1 dppx ≈ 96 dpi1 dpcm ≈ 0.39 dpi
  • 62. LES UNITES DPI, DPCM, DPPXCompatibilité navigateursn°6Ressource : http://www.w3.org/TR/css3-values/#resolutionMouais bofSupport actuel de « resolution »  :Support actuel de « resolution » + unité dppx  :99
  • 63. LE RÉTINA DE DEMAINEST DÉJÀ LÀ !enfin presqueRÉVÉLATION N°7Crédits : Flickr / epiclectic (cc)Crédits : Flickr / epiclectic (cc)
  • 64. LE RÉTINA DE DEMAIN ? n°7iPhone3 iPhone4Pas rétinaPas rétina RétinaRétina
  • 65. LE RÉTINA DE DEMAIN ? n°7iPhone3 iPhone4Pas rétinaPas rétina RétinaRétinaconcombre.jpg?
  • 66. LE RÉTINA DE DEMAIN ? n°7iPhone3 iPhone4Pas rétinaPas rétina RétinaRétinaconcombre-big.jpgconcombre-small.jpg
  • 67. LE RÉTINA DE DEMAIN ?Remplacer limage conditionnellementn°7Petits é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 limage conditionnellementn°7Petits é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 imagessont 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 : picturefillRessource : http://www.w3.org/community/respimg/
  • 70. LE RÉTINA DE DEMAIN ?Lattribut « srcset »n°7<img src="concombre-small.jpg" srcset="concombre-big.jpg 2x" alt="" >
  • 71. LE RÉTINA DE DEMAIN ?Lattribut « srcset »n°7<img src="concombre-small.jpg" srcset="concombre-big.jpg 2x" alt="" >Alternative : srcset polyfillRessource : 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é navigateursn°7Support actuel de <picture> et srcset  :Lamentable !
  • 73. IL EXISTE DES MEDIA QUERIES« CSS4 »RÉVÉLATION N°8Crédits : Flickr / makelessnoise (cc)Crédits : Flickr / makelessnoise (cc)
  • 74. DES MEDIA QUERIES « CSS4 »Affinez vos conditionsn°8@media (pointer)présence ou non dun 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é navigateursn°8Ressource : http://dev.w3.org/csswg/mediaqueries4Support actuel des Media Queries 4  :Vide !
  • 80. JAVASCRIPT POUR GÉRERVOS MEDIA QUERIES !RÉVÉLATION N°9Crédits : Flickr / swirlingthoughts (cc)Crédits : Flickr / swirlingthoughts (cc)
  • 81. JAVASCRIPT ET MEDIA QUERIESParce que CSS est limité...N°9CSS Media Queries offrent de larges possibilités de détection,mais...CSS ne peut pas modifier la structure HTMLCSS dispose dévénements limités (pas de onresize, etc.)CSS ne permet pas de charger des ressourcestelles que des scripts externes ou des imagesetc.
  • 82. JAVASCRIPT ET MEDIA QUERIESParce que JS est limité...N°9JavaScript : vastes possibilités (DOM, boucles, if else), mais...JS offre moins de possibilités de détection que CSSDé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 lorientationPas de détection (simple) du touch, de la luminositéetc.
  • 83. JAVASCRIPT ET MEDIA QUERIESLe meilleur des deux mondesN°9matchMedia() !<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 QUERIESLe meilleur des deux mondesN°9matchMedia() !<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 QUERIESLe meilleur des deux mondesN°9matchMedia() !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 QUERIESCompatibilité navigateursN°9Ressource : La méthode matchMedia()Support actuel de matchMedia() :Très abordable !101033
  • 87. LACCÉLÉRATION MATÉRIELLE :UNE BÉNÉDICTION POUR VOTRE MOBILERÉVÉLATION N°10Crédits : Flickr / theloushe (cc)Crédits : Flickr / theloushe (cc)
  • 88. LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10Les transitions et animations CSS3sont 5 à 10 fois plus rapides etfluides quen JavaScript.– source bradshawenterprises.com“ 
  • 89. LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10Les transitions et animations CSS3sont 5 à 10 fois plus rapides etfluides quen JavaScript.“ MAIS EN FAIT PAS TOUT LE TEMPS !
  • 90. LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10Un certain nombre de propriétés imposent au navigateur derecalculer à chaque étape de lanimation (repaint)...margin, margin-top /-right /-bottom / -leftpadding, padding-top /-right /-bottom / -lefttop, right, bottom, leftetc.
  • 91. LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10Un certain nombre de propriétés imposent au navigateur derecalculer à chaque étape de lanimation (repaint)...margin, margin-top /-right /-bottom / -leftpadding, padding-top /-right /-bottom / -lefttop, right, bottom, leftetc.ET CEST TOUT SACCADÉ SUR MOBILES :(
  • 92. LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10On peut décharger le CPU et demander à la carte graphique(GPU) de faire le boulot, en activant laccé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. LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10Et pour être compatible au maximum :nav {left : -90%;transform: translate3d(0, 0, 0);transition : left 0.5s}nav:hover {left : 0;}Hop ! On activelaccélérationmatérielle
  • 94. LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10transform: translateZ(0); (noubliez 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 laccélération matérielle en CSS avec destransformation 3D :
  • 95. LACCÉLÉRATION MATÉRIELLECompatibilité navigateursn°10Support actuel de laccé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 LARGE3. WIDTH=DEVICE-WIDTH NEST PAS « LA » SOLUTION4. LA MÉTA VIEWPORT EST VOUÉE À DISPARAÎTRE5. 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>, SRCSET8. IL EXISTE DES MEDIA QUERIES CSS49. MATCHMEDIA = JS + MEDIA QUERIES10. ON PEUT ACTIVER LACCÉLÉRATION MATÉRIELLE EN CSS
  • 98. CRÉDITSPhotos, illustrations :FotoliaFlickr.com (licence CC)Police :Segoe UIDelicious HeavyIcônes et pictos :IconfinderFindicons
  • 99. MERCI !Raphaël Goetter www.alsacreations.fr @goetter