10RÉVÉLATIONSSUR LE WEB MOBILE
Raphaël GoetterÜbercheerleaderAlsacréations
<picture>media queriessrcsethandheldvw, vh, vmin, vmax@viewportdevice-width<meta> viewportaccélération matérielledpi, dpcm...
IL EXISTE UN MEDIA« HANDHELD »since 1998RÉVÉLATION N°1
IL EXISTE UN MEDIA HANDHELD… Et ça fait 15 ans ma bonne dame !n°1« handheld » : intended for handheld devices(typically sm...
IL EXISTE UN MEDIA HANDHELDRelisez vos specs CSS2 !n°1
IL EXISTE UN MEDIA HANDHELDDans la pratique...n°1@media (handheld) {p {color : green}}YAY!YAY!
IL EXISTE UN MEDIA HANDHELD n°11998 2007 2013Évolution du support au cours du temps...
IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...n°11998 2007 2013
IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...n°11998 2007 2013
IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...n°11998 2007 2013
TOUS LES IPHONES ONT UNE LARGEUR DE...« 320 PIXELS »Bouh, la honte !RÉVÉLATION N°2Crédits : Flickr / Potatojunkie (cc)Créd...
LES IPHONES FONT TOUS 320px n°2leboncoin.fr
LES IPHONES FONT TOUS 320px n°2leboncoin.fr1240px1240px
LES IPHONES FONT TOUS 320px n°2iPhone3 iPhone4 iPhone5320px320px 640px640px 640px640px
LES IPHONES FONT TOUS 320px n°2iPhone3 iPhone4 iPhone5320px320px 640px640px 640px640px
LES IPHONES FONT TOUS 320px n°2Largeur physiqueiPhone 3 : 320pxSamsung Galaxy S : 480pxiPhone 4, iPhone 5 : 640pxNokia Lum...
LES IPHONES FONT TOUS 320px n°2« device-width »iPhone 3, 4, 5 : 320pxNokia Lumia 920 : 320pxSony Xperia Z : 360pxSamsung G...
LES IPHONES FONT TOUS 320px n°2« device-width »iPhone 3, 4, 5 : 320pxNokia Lumia 920 : 320pxSony Xperia Z : 360pxSamsung G...
LES IPHONES FONT TOUS 320px n°2Viewport = largeur de fenêtreSafari : 980pxOpera mini : 850pxOpera mobile : 980pxAndroid 1 ...
LES IPHONES FONT TOUS 320px n°2Affichage (zoom) par défaut640px640pxiPhone4320px320px980px980pxlargeur physiquedevice-widt...
LES IPHONES FONT TOUS 320px n°2Affichage (zoom) par défautiPhone4320px320px980px980pxNiveau de zoom :device-width / viewpo...
LES IPHONES FONT TOUS 320px n°2Connaître les valeurs de son mobileRessource : www.mobitest.me
A« WIDTH=DEVICE-WIDTH »NEST PAS « LA SOLUTION »RÉVÉLATION N°3Crédits : Flickr / Taylor Dawn Fortune (cc)Crédits : Flickr /...
« WIDTH = DEVICE-WIDTH » ?Pas si sûr...n°3<meta name="viewport" content="width=320">Largeur daffichage = 320px
« WIDTH = DEVICE-WIDTH » ?Pas si sûr...n°3<meta name="viewport" content="width=320"><meta name="viewport" content="width=d...
« WIDTH = DEVICE-WIDTH » ?Pas si sûr...n°3<meta name="viewport" content="width=device-width">Niveau de zoom :device / view...
« WIDTH = DEVICE-WIDTH » ?Pas si sûr...n°3<meta name="viewport" content="width=device-width">device-width = 320device-heig...
« WIDTH = DEVICE-WIDTH » ?Alternative : ne fixer que le niveau de zoomn°3<meta name="viewport" content="width=device-width...
« WIDTH = DEVICE-WIDTH » ?Initial-scale FTW !n°3<meta name="viewport" content="initial-scale=1.0">Niveau de zoom = 1device...
« WIDTH = DEVICE-WIDTH » ?Initial-scale FTW !n°3<meta name="viewport" content="initial-scale=1.0">device-width = 320device...
« WIDTH = DEVICE-WIDTH » ?Initial-scale FTW !n°3<meta name="viewport" content="initial-scale=1.0">Niveau de zoom = 1<meta ...
« WIDTH = DEVICE-WIDTH » ?Préférez-lui la valeur « initial-scale=1.0 »n°3Ressource : http://kiwi.gg/initialscaleSur Apple ...
ALA <META> VIEWPORT EST VOUÉEÀ DISPARAîTRERÉVÉLATION N°4Crédits : Flickr / Cayusa (cc)Crédits : Flickr / Cayusa (cc)
VIEWPORT BIENTOT OBSOLÈTE ?Cest le job de CSS, pas HTML !n°4<meta name="viewport" content="...">Inventé par Apple surSafar...
VIEWPORT BIENTOT OBSOLÈTE ?Cest le job de CSS, pas HTML !n°4<meta name="viewport" content="...">Du HTML pour gérer le desi...
VIEWPORT BIENTOT OBSOLÈTE ?1- Le cas des .mobin°4Crédits : Flickr / davo39 (cc)osteofrance.mobimeta Viewportnon reconnuesu...
VIEWPORT BIENTOT OBSOLÈTE ?1- Le cas des .mobin°4Crédits : Flickr / davo39 (cc)osteofrance.mobimeta Viewportnon reconnuesu...
VIEWPORT BIENTOT OBSOLÈTE ?2- Le cas du mode « snap »n°4Crédits : mobilexweb.comMode « snap »Sur WindowsPhone 8
VIEWPORT BIENTOT OBSOLÈTE ?2- Le cas du mode « snap »n°4Crédits : mobilexweb.commeta Viewportnon reconnueen « snap » mode
VIEWPORT BIENTOT OBSOLÈTE ?Cest quoi alors la solution standard ?n°4@viewport {...}Ici, les règles CSS pourdéfinir la larg...
VIEWPORT BIENTOT OBSOLÈTE ?Cest quoi alors la solution standard ?n°4@viewport {width: device-width;height: device-height;z...
VIEWPORT BIENTOT OBSOLÈTE ?Dans la « vraie » vie...n°4@media (orientation: portrait) {@viewport {width: device-width}}@med...
VIEWPORT BIENTOT OBSOLÈTE ?Dans la « vraie » vie...n°41010Support actuel de @viewport :Encourageant !
IL EXISTE DES UNITÉS CSSDE VIEWPORTvw, vh, vmin, vmaxRÉVÉLATION N°5Crédits : Flickr / abardwell (cc)Crédits : Flickr / aba...
LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5.content {height : 100%;}
LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5body {height : 100%;}.content {height : 100%;}
LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5html {height : 100%;}body {height : 100%;}.content {hei...
LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5html {height : 100%;}body {height : 100%;}.content {hei...
LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5Démo : http://kiwi.gg/vw
LES UNITÉS VW, VH, VMIN, VMAXCompatibilité navigateursn°5Ressource : http://dev.w3.org/csswg/css-values/99Support actuel d...
IL EXISTE DES UNITÉS CSSDE RÉSOLUTIONRÉVÉLATION N°6dpi, dpcm, dppxCrédits : Flickr / Kalexanderson (cc)Crédits : Flickr / ...
LES UNITES DPI, DPCM, DPPXCiblez selon la résolutionn°6Au début était...LE PIXEL-RATIO
LES UNITES DPI, DPCM, DPPXCiblez selon la résolutionn°6640px640pxiPhone4320px320pxlargeur physiquedevice-width
LES UNITES DPI, DPCM, DPPXCiblez selon la résolutionn°6640px640pxiPhone4320px320pxlargeur physiquedevice-widthDevice Pixel...
LES UNITES DPI, DPCM, DPPXAh ouais quand-même !n°6✔Pixel-ratio : 1✔Ordinateurs (non retina)✔iPhone 2, iPhone 3✔iPad 1, iPa...
LES UNITES DPI, DPCM, DPPXDétecter la résolution avec pixel-ratio ?n°6@media (min-device-pixel-ratio: 1.5) {div {backgroun...
LES UNITES DPI, DPCM, DPPXDétecter la résolution avec pixel-ratio ?n°6@media (min-device-pixel-ratio: 1.5) {div {backgroun...
LES UNITES DPI, DPCM, DPPXLa propriété « resolution »n°6dpipoints par inchdpcmpoints par centimètredppxpoints par pixelÉqu...
LES UNITES DPI, DPCM, DPPXLa propriété « resolution »n°6dpipoints par inchdpcmpoints par centimètredppxpoints par pixel1 i...
LES UNITES DPI, DPCM, DPPXLa propriété « resolution »n°6dpipoints par inchdpcmpoints par centimètredppxpoints par pixel@me...
LES UNITES DPI, DPCM, DPPXCompatibilité navigateursn°6Ressource : http://www.w3.org/TR/css3-values/#resolutionMouais bofSu...
LE RÉTINA DE DEMAINEST DÉJÀ LÀ !enfin presqueRÉVÉLATION N°7Crédits : Flickr / epiclectic (cc)Crédits : Flickr / epiclectic...
LE RÉTINA DE DEMAIN ? n°7iPhone3 iPhone4Pas rétinaPas rétina RétinaRétina
LE RÉTINA DE DEMAIN ? n°7iPhone3 iPhone4Pas rétinaPas rétina RétinaRétinaconcombre.jpg?
LE RÉTINA DE DEMAIN ? n°7iPhone3 iPhone4Pas rétinaPas rétina RétinaRétinaconcombre-big.jpgconcombre-small.jpg
LE RÉTINA DE DEMAIN ?Remplacer limage conditionnellementn°7Petits écrans :<img src="concombre-small.jpg">Grands écrans (>6...
LE RÉTINA DE DEMAIN ?Remplacer limage conditionnellementn°7Petits écrans :<img src="concombre-small.jpg">Grands écrans (>6...
LE RÉTINA DE DEMAIN ?Lélément <picture>n°7<picture width="640" height="480"><source media="(min-resolution: 1.5dppx)" src=...
LE RÉTINA DE DEMAIN ?Lattribut « srcset »n°7<img src="concombre-small.jpg" srcset="concombre-big.jpg 2x" alt="" >
LE RÉTINA DE DEMAIN ?Lattribut « srcset »n°7<img src="concombre-small.jpg" srcset="concombre-big.jpg 2x" alt="" >Alternati...
LE RÉTINA DE DEMAIN ?Compatibilité navigateursn°7Support actuel de <picture> et srcset  :Lamentable !
IL EXISTE DES MEDIA QUERIES« CSS4 »RÉVÉLATION N°8Crédits : Flickr / makelessnoise (cc)Crédits : Flickr / makelessnoise (cc)
DES MEDIA QUERIES « CSS4 »Affinez vos conditionsn°8@media (pointer)présence ou non dun dispositif de pointage@media (hover...
DES MEDIA QUERIES « CSS4 »@media (pointer)n°8@media (pointer : none)pas de dispositif de pointage@media (pointer : coarse)...
DES MEDIA QUERIES « CSS4 »@media (hover)n°8@media (hover) {nav:hover {margin-left : 100%}}
DES MEDIA QUERIES « CSS4 »@media (luminosity)n°8@media (luminosity: dim)environnement sombre@media (luminosity: normal)env...
DES MEDIA QUERIES « CSS4 »@media (script)n°8@media (script) {.kiwi {ici un truc à faire si JS est activé}}
DES MEDIA QUERIES « CSS4 »Compatibilité navigateursn°8Ressource : http://dev.w3.org/csswg/mediaqueries4Support actuel des ...
JAVASCRIPT POUR GÉRERVOS MEDIA QUERIES !RÉVÉLATION N°9Crédits : Flickr / swirlingthoughts (cc)Crédits : Flickr / swirlingt...
JAVASCRIPT ET MEDIA QUERIESParce que CSS est limité...N°9CSS Media Queries offrent de larges possibilités de détection,mai...
JAVASCRIPT ET MEDIA QUERIESParce que JS est limité...N°9JavaScript : vastes possibilités (DOM, boucles, if else), mais...J...
JAVASCRIPT ET MEDIA QUERIESLe meilleur des deux mondesN°9matchMedia() !<script>if (window.matchMedia("(min-device-width: 6...
JAVASCRIPT ET MEDIA QUERIESLe meilleur des deux mondesN°9matchMedia() !<script>if (window.matchMedia("(min-device-width: 6...
JAVASCRIPT ET MEDIA QUERIESLe meilleur des deux mondesN°9matchMedia() !if (window.matchMedia("(orientation : landscape)")....
JAVASCRIPT ET MEDIA QUERIESCompatibilité navigateursN°9Ressource : La méthode matchMedia()Support actuel de matchMedia() :...
LACCÉLÉRATION MATÉRIELLE :UNE BÉNÉDICTION POUR VOTRE MOBILERÉVÉLATION N°10Crédits : Flickr / theloushe (cc)Crédits : Flick...
LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10Les transitions et animations CSS3sont 5 à 10 fois plus ...
LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10Les transitions et animations CSS3sont 5 à 10 fois plus ...
LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10Un certain nombre de propriétés imposent au navigateur d...
LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10Un certain nombre de propriétés imposent au navigateur d...
LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10On peut décharger le CPU et demander à la carte graphiqu...
LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10Et pour être compatible au maximum :nav {left : -90%;tra...
LACCÉLÉRATION MATÉRIELLELart de rendre vos transitions fluidesn°10transform: translateZ(0); (noubliez pas les préfixes)tra...
LACCÉLÉRATION MATÉRIELLECompatibilité navigateursn°10Support actuel de laccélération matérielle (via transform 3D) :Tranqu...
EN RÉSUMÉ...
1. IL EXISTE UN MÉDIA HANDHELD (INUTILE)2. TOUS LES IPHONE FONT 320PX DE LARGE3. WIDTH=DEVICE-WIDTH NEST PAS « LA » SOLUTI...
CRÉDITSPhotos, illustrations :FotoliaFlickr.com (licence CC)Police :Segoe UIDelicious HeavyIcônes et pictos :IconfinderFin...
MERCI !Raphaël Goetter www.alsacreations.fr @goetter
Prochain SlideShare
Chargement dans... 5
×

10 Revelations sur le Web Mobile

12,968

Published on

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

Published in: Technologies
3 commentaires
19 mentions J'aime
Statistiques
Remarques
Aucun téléchargement
Vues
Total des vues
12,968
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
30
Actions
Partages
0
Téléchargements
135
Commentaires
3
J'aime
19
Ajouts 0
No embeds

No notes for slide

Transcript of "10 Revelations sur le Web Mobile"

  1. 1. 10RÉVÉLATIONSSUR LE WEB MOBILE
  2. 2. Raphaël GoetterÜbercheerleaderAlsacréations
  3. 3. <picture>media queriessrcsethandheldvw, vh, vmin, vmax@viewportdevice-width<meta> viewportaccélération matérielledpi, dpcm, dppxretinaDIPs
  4. 4. IL EXISTE UN MEDIA« HANDHELD »since 1998RÉVÉLATION N°1
  5. 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. 6. IL EXISTE UN MEDIA HANDHELDRelisez vos specs CSS2 !n°1
  7. 7. IL EXISTE UN MEDIA HANDHELDDans la pratique...n°1@media (handheld) {p {color : green}}YAY!YAY!
  8. 8. IL EXISTE UN MEDIA HANDHELD n°11998 2007 2013Évolution du support au cours du temps...
  9. 9. IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...n°11998 2007 2013
  10. 10. IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...n°11998 2007 2013
  11. 11. IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...n°11998 2007 2013
  12. 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. 13. LES IPHONES FONT TOUS 320px n°2leboncoin.fr
  14. 14. LES IPHONES FONT TOUS 320px n°2leboncoin.fr1240px1240px
  15. 15. LES IPHONES FONT TOUS 320px n°2iPhone3 iPhone4 iPhone5320px320px 640px640px 640px640px
  16. 16. LES IPHONES FONT TOUS 320px n°2iPhone3 iPhone4 iPhone5320px320px 640px640px 640px640px
  17. 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. 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. 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. 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. 21. LES IPHONES FONT TOUS 320px n°2Affichage (zoom) par défaut640px640pxiPhone4320px320px980px980pxlargeur physiquedevice-widthviewport
  22. 22. LES IPHONES FONT TOUS 320px n°2Affichage (zoom) par défautiPhone4320px320px980px980pxNiveau de zoom :device-width / viewport320 / 980 = 0,33device-widthviewport
  23. 23. LES IPHONES FONT TOUS 320px n°2Connaître les valeurs de son mobileRessource : www.mobitest.me
  24. 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. 25. « WIDTH = DEVICE-WIDTH » ?Pas si sûr...n°3<meta name="viewport" content="width=320">Largeur daffichage = 320px
  26. 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. 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. 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. 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. 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. 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. 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. 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. 34. ALA <META> VIEWPORT EST VOUÉEÀ DISPARAîTRERÉVÉLATION N°4Crédits : Flickr / Cayusa (cc)Crédits : Flickr / Cayusa (cc)
  35. 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. 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. 37. VIEWPORT BIENTOT OBSOLÈTE ?1- Le cas des .mobin°4Crédits : Flickr / davo39 (cc)osteofrance.mobimeta Viewportnon reconnuesur Safari
  38. 38. VIEWPORT BIENTOT OBSOLÈTE ?1- Le cas des .mobin°4Crédits : Flickr / davo39 (cc)osteofrance.mobimeta Viewportnon reconnuesur SafariOK surm.osteofrance.com !
  39. 39. VIEWPORT BIENTOT OBSOLÈTE ?2- Le cas du mode « snap »n°4Crédits : mobilexweb.comMode « snap »Sur WindowsPhone 8
  40. 40. VIEWPORT BIENTOT OBSOLÈTE ?2- Le cas du mode « snap »n°4Crédits : mobilexweb.commeta Viewportnon reconnueen « snap » mode
  41. 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. 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. 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. 44. VIEWPORT BIENTOT OBSOLÈTE ?Dans la « vraie » vie...n°41010Support actuel de @viewport :Encourageant !
  45. 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. 46. LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5.content {height : 100%;}
  47. 47. LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5body {height : 100%;}.content {height : 100%;}
  48. 48. LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5html {height : 100%;}body {height : 100%;}.content {height : 100%;}
  49. 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. 50. LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtren°5Démo : http://kiwi.gg/vw
  51. 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. 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. 53. LES UNITES DPI, DPCM, DPPXCiblez selon la résolutionn°6Au début était...LE PIXEL-RATIO
  54. 54. LES UNITES DPI, DPCM, DPPXCiblez selon la résolutionn°6640px640pxiPhone4320px320pxlargeur physiquedevice-width
  55. 55. LES UNITES DPI, DPCM, DPPXCiblez selon la résolutionn°6640px640pxiPhone4320px320pxlargeur physiquedevice-widthDevice Pixel Ratio :640 / 320 = 2
  56. 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. 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. 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. 59. LES UNITES DPI, DPCM, DPPXLa propriété « resolution »n°6dpipoints par inchdpcmpoints par centimètredppxpoints par pixelÉquivalent « standard »de pixel-ratio
  60. 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. 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. 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. 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. 64. LE RÉTINA DE DEMAIN ? n°7iPhone3 iPhone4Pas rétinaPas rétina RétinaRétina
  65. 65. LE RÉTINA DE DEMAIN ? n°7iPhone3 iPhone4Pas rétinaPas rétina RétinaRétinaconcombre.jpg?
  66. 66. LE RÉTINA DE DEMAIN ? n°7iPhone3 iPhone4Pas rétinaPas rétina RétinaRétinaconcombre-big.jpgconcombre-small.jpg
  67. 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. 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. 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. 70. LE RÉTINA DE DEMAIN ?Lattribut « srcset »n°7<img src="concombre-small.jpg" srcset="concombre-big.jpg 2x" alt="" >
  71. 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. 72. LE RÉTINA DE DEMAIN ?Compatibilité navigateursn°7Support actuel de <picture> et srcset  :Lamentable !
  73. 73. IL EXISTE DES MEDIA QUERIES« CSS4 »RÉVÉLATION N°8Crédits : Flickr / makelessnoise (cc)Crédits : Flickr / makelessnoise (cc)
  74. 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. 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. 76. DES MEDIA QUERIES « CSS4 »@media (hover)n°8@media (hover) {nav:hover {margin-left : 100%}}
  77. 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. 78. DES MEDIA QUERIES « CSS4 »@media (script)n°8@media (script) {.kiwi {ici un truc à faire si JS est activé}}
  79. 79. DES MEDIA QUERIES « CSS4 »Compatibilité navigateursn°8Ressource : http://dev.w3.org/csswg/mediaqueries4Support actuel des Media Queries 4  :Vide !
  80. 80. JAVASCRIPT POUR GÉRERVOS MEDIA QUERIES !RÉVÉLATION N°9Crédits : Flickr / swirlingthoughts (cc)Crédits : Flickr / swirlingthoughts (cc)
  81. 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. 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. 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. 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. 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. 86. JAVASCRIPT ET MEDIA QUERIESCompatibilité navigateursN°9Ressource : La méthode matchMedia()Support actuel de matchMedia() :Très abordable !101033
  87. 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. 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. 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. 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. 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. 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. 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. 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. 95. LACCÉLÉRATION MATÉRIELLECompatibilité navigateursn°10Support actuel de laccélération matérielle (via transform 3D) :Tranquille !
  96. 96. EN RÉSUMÉ...
  97. 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. 98. CRÉDITSPhotos, illustrations :FotoliaFlickr.com (licence CC)Police :Segoe UIDelicious HeavyIcônes et pictos :IconfinderFindicons
  99. 99. MERCI !Raphaël Goetter www.alsacreations.fr @goetter
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×