10 revelations sur le web mobile
DESCRIPTION
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
![Page 1: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/1.jpg)
10RÉVÉLATIONSSUR LE WEB MOBILE
![Page 2: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/2.jpg)
Raphaël GoetterÜbercheerleader
Alsacréations
![Page 3: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/3.jpg)
<picture>
media queries
srcset
handheld
vw, vh, vmin, vmax
@viewport
device-width<meta> viewport
accélération matérielle
dpi, dpcm, dppx
retina
DIPs
![Page 4: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/4.jpg)
IL EXISTE UN MEDIA
« HANDHELD »since 1998
RÉVÉLATION N°1
![Page 5: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/5.jpg)
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“
![Page 6: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/6.jpg)
IL EXISTE UN MEDIA HANDHELDRelisez vos specs CSS2 !
n°1
![Page 7: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/7.jpg)
IL EXISTE UN MEDIA HANDHELDDans la pratique...
n°1
@media (handheld) {p {color : green}
}
YAY!YAY!
![Page 8: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/8.jpg)
IL EXISTE UN MEDIA HANDHELD n°1
1998 2007 2013
Évolution du support au cours du temps...
![Page 9: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/9.jpg)
IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...
n°1
1998 2007 2013
![Page 10: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/10.jpg)
IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...
n°1
1998 2007 2013
![Page 11: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/11.jpg)
IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...
n°1
1998 2007 2013
![Page 12: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/12.jpg)
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)
![Page 13: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/13.jpg)
LES IPHONES FONT TOUS 320px n°2
leboncoin.fr
![Page 14: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/14.jpg)
LES IPHONES FONT TOUS 320px n°2
leboncoin.fr
1240px1240px
![Page 15: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/15.jpg)
LES IPHONES FONT TOUS 320px n°2
iPhone3 iPhone4 iPhone5
320px320px 640px640px 640px640px
![Page 16: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/16.jpg)
LES IPHONES FONT TOUS 320px n°2
iPhone3 iPhone4 iPhone5
320px320px 640px640px 640px640px
![Page 17: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/17.jpg)
LES IPHONES FONT TOUS 320px n°2Largeur 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
![Page 18: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/18.jpg)
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
![Page 19: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/19.jpg)
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
DeviceIndependantPixels(DIPs)
Ressource : « a pixel is not a pixel »
![Page 20: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/20.jpg)
LES IPHONES FONT TOUS 320px n°2Viewport = 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
![Page 21: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/21.jpg)
LES IPHONES FONT TOUS 320px n°2Affichage (zoom) par défaut
640px640px
iPhone4
320px320px
980px980px
largeur physique
device-width
viewport
![Page 22: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/22.jpg)
LES IPHONES FONT TOUS 320px n°2Affichage (zoom) par défaut
iPhone4
320px320px
980px980px
Niveau de zoom : device-width / viewport
320 / 980 = 0,33
device-width
viewport
![Page 23: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/23.jpg)
LES IPHONES FONT TOUS 320px n°2Connaître les valeurs de son mobile
Ressource : www.mobitest.me
![Page 24: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/24.jpg)
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)
![Page 25: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/25.jpg)
« WIDTH = DEVICE-WIDTH » ?Pas si sûr...
n°3
<meta name="viewport" content="width=320">
Largeur d'affichage = 320px
![Page 26: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/26.jpg)
« 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
![Page 27: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/27.jpg)
« 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
![Page 28: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/28.jpg)
« 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
![Page 29: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/29.jpg)
« 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
![Page 30: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/30.jpg)
« 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
![Page 31: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/31.jpg)
« 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
![Page 32: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/32.jpg)
« 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 :
![Page 33: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/33.jpg)
« 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.
“
![Page 34: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/34.jpg)
ALA <META> VIEWPORT EST VOUÉE
À DISPARAîTRE
RÉVÉLATION N°4
Crédits : Flickr / Cayusa (cc)Crédits : Flickr / Cayusa (cc)
![Page 35: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/35.jpg)
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
![Page 36: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/36.jpg)
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
![Page 37: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/37.jpg)
VIEWPORT BIENTOT OBSOLÈTE ?1- Le cas des .mobi
n°4
Crédits : Flickr / davo39 (cc)
osteofrance.mobi
meta Viewportnon reconnue sur Safari
![Page 38: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/38.jpg)
VIEWPORT BIENTOT OBSOLÈTE ?1- Le cas des .mobi
n°4
Crédits : Flickr / davo39 (cc)
osteofrance.mobi
meta Viewportnon reconnue sur Safari
OK surm.osteofrance.com !
![Page 39: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/39.jpg)
VIEWPORT BIENTOT OBSOLÈTE ?2- Le cas du mode « snap »
n°4
Crédits : mobilexweb.com
Mode « snap »
Sur WindowsPhone 8
![Page 40: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/40.jpg)
VIEWPORT BIENTOT OBSOLÈTE ?2- Le cas du mode « snap »
n°4
Crédits : mobilexweb.com
meta Viewportnon reconnue en « snap » mode
![Page 41: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/41.jpg)
VIEWPORT BIENTOT OBSOLÈTE ?C'est quoi alors la solution standard ?
n°4
@viewport {...
}Ici, les règles CSS pourdéfinir la largeur, la hauteur, le niveau de zoom, l'orientation, etc.
Ressource : http://www.w3.org/TR/css-device-adapt/
![Page 42: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/42.jpg)
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-viewportetc.
![Page 43: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/43.jpg)
VIEWPORT BIENTOT OBSOLÈTE ?Dans la « vraie » vie...
n°4
@media (orientation: portrait) {@viewport {width: device-width}
}@media (orientation: landscape) {
@viewport {width: device-height}}
![Page 44: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/44.jpg)
VIEWPORT BIENTOT OBSOLÈTE ?Dans la « vraie » vie...
n°4
1010
Support actuel de @viewport :
Encourageant !
![Page 45: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/45.jpg)
IL EXISTE DES UNITÉS CSS
DE VIEWPORTvw, vh, vmin, vmax
RÉVÉLATION N°5
Crédits : Flickr / abardwell (cc)Crédits : Flickr / abardwell (cc)
![Page 46: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/46.jpg)
LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtre
n°5
.content {height : 100%;}
![Page 47: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/47.jpg)
LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtre
n°5
body {height : 100%;}
.content {height : 100%;}
![Page 48: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/48.jpg)
LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtre
n°5
html {height : 100%;}
body {height : 100%;}
.content {height : 100%;}
![Page 49: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/49.jpg)
LES UNITÉS VW, VH, VMIN, VMAXCalculez 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/
![Page 50: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/50.jpg)
LES UNITÉS VW, VH, VMIN, VMAXCalculez selon la taille de fenêtre
n°5
Démo : http://kiwi.gg/vw
![Page 51: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/51.jpg)
LES UNITÉS VW, VH, VMIN, VMAXCompatibilité navigateurs
n°5
Ressource : http://dev.w3.org/csswg/css-values/
99
Support actuel des unités de viewport :
66Plutôt bon !
![Page 52: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/52.jpg)
IL EXISTE DES UNITÉS CSS
DE RÉSOLUTION
RÉVÉLATION N°6
dpi, dpcm, dppxCrédits : Flickr / Kalexanderson (cc)Crédits : Flickr / Kalexanderson (cc)
![Page 53: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/53.jpg)
LES UNITES DPI, DPCM, DPPXCiblez selon la résolution
n°6
Au début était...
LE PIXEL-RATIO
![Page 54: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/54.jpg)
LES UNITES DPI, DPCM, DPPXCiblez selon la résolution
n°6
640px640px
iPhone4
320px320px
largeur physique
device-width
![Page 55: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/55.jpg)
LES UNITES DPI, DPCM, DPPXCiblez selon la résolution
n°6
640px640px
iPhone4
320px320px
largeur physique
device-width
Device Pixel Ratio :640 / 320 = 2
![Page 56: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/56.jpg)
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
![Page 57: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/57.jpg)
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)}
![Page 58: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/58.jpg)
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 Webkit
Propriétaire
Non standard
![Page 59: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/59.jpg)
LES UNITES DPI, DPCM, DPPXLa propriété « resolution »
n°6
dpipoints par inch
dpcmpoints par centimètre
dppxpoints par pixel
Équivalent « standard »de pixel-ratio
![Page 60: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/60.jpg)
LES UNITES DPI, DPCM, DPPXLa propriété « resolution »
n°6
dpipoints par inch
dpcmpoints par centimètre
dppxpoints par pixel
1 inch= 96 px = 2.54 cm
1 dpi ≈ 2.54 dpcm
1 dppx ≈ 96 dpi
1 dpcm ≈ 0.39 dpi
![Page 61: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/61.jpg)
LES UNITES DPI, DPCM, DPPXLa propriété « resolution »
n°6
dpipoints par inch
dpcmpoints par centimètre
dppxpoints 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
![Page 62: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/62.jpg)
LES UNITES DPI, DPCM, DPPXCompatibilité navigateurs
n°6
Ressource : http://www.w3.org/TR/css3-values/#resolution
Mouais bof
Support actuel de « resolution » :
Support actuel de « resolution » + unité dppx :
99
![Page 63: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/63.jpg)
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)
![Page 64: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/64.jpg)
LE RÉTINA DE DEMAIN ? n°7
iPhone3 iPhone4
Pas rétinaPas rétina RétinaRétina
![Page 65: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/65.jpg)
LE RÉTINA DE DEMAIN ? n°7
iPhone3 iPhone4
Pas rétinaPas rétina RétinaRétina
concombre.jpg
?
![Page 66: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/66.jpg)
LE RÉTINA DE DEMAIN ? n°7
iPhone3 iPhone4
Pas rétinaPas rétina RétinaRétina
concombre-big.jpg
concombre-small.jpg
![Page 67: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/67.jpg)
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 :
![Page 68: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/68.jpg)
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
![Page 69: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/69.jpg)
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/
![Page 70: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/70.jpg)
LE RÉTINA DE DEMAIN ?L'attribut « srcset »
n°7
<img src="concombre-small.jpg" srcset="concombre-big.jpg 2x" alt="" >
![Page 71: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/71.jpg)
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 :
![Page 72: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/72.jpg)
LE RÉTINA DE DEMAIN ?Compatibilité navigateurs
n°7
Support actuel de <picture> et srcset :
Lamentable !
![Page 73: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/73.jpg)
IL EXISTE DES MEDIA QUERIES
« CSS4 »
RÉVÉLATION N°8
Crédits : Flickr / makelessnoise (cc)Crédits : Flickr / makelessnoise (cc)
![Page 74: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/74.jpg)
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
![Page 75: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/75.jpg)
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}
}
![Page 76: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/76.jpg)
DES MEDIA QUERIES « CSS4 »@media (hover)
n°8
@media (hover) {nav:hover {margin-left : 100%}
}
![Page 77: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/77.jpg)
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);}
}
![Page 78: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/78.jpg)
DES MEDIA QUERIES « CSS4 »@media (script)
n°8
@media (script) {.kiwi {ici un truc à faire si JS est activé}
}
![Page 79: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/79.jpg)
DES MEDIA QUERIES « CSS4 »Compatibilité navigateurs
n°8
Ressource : http://dev.w3.org/csswg/mediaqueries4
Support actuel des Media Queries 4 :
Vide !
![Page 80: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/80.jpg)
JAVASCRIPT POUR GÉRER
VOS MEDIA QUERIES !
RÉVÉLATION N°9
Crédits : Flickr / swirlingthoughts (cc)Crédits : Flickr / swirlingthoughts (cc)
![Page 81: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/81.jpg)
JAVASCRIPT ET MEDIA QUERIESParce 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.
![Page 82: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/82.jpg)
JAVASCRIPT ET MEDIA QUERIESParce 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.
![Page 83: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/83.jpg)
JAVASCRIPT ET MEDIA QUERIESLe 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>
![Page 84: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/84.jpg)
JAVASCRIPT ET MEDIA QUERIESLe 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>
![Page 85: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/85.jpg)
JAVASCRIPT ET MEDIA QUERIESLe 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) {
![Page 86: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/86.jpg)
JAVASCRIPT ET MEDIA QUERIESCompatibilité navigateurs
N°9
Ressource : La méthode matchMedia()
Support actuel de matchMedia() :
Très abordable !
101033
![Page 87: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/87.jpg)
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)
![Page 88: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/88.jpg)
L'ACCÉLÉRATION MATÉRIELLEL'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
“
![Page 89: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/89.jpg)
L'ACCÉLÉRATION MATÉRIELLEL'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 !
![Page 90: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/90.jpg)
L'ACCÉLÉRATION MATÉRIELLEL'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.
![Page 91: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/91.jpg)
L'ACCÉLÉRATION MATÉRIELLEL'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 :(
![Page 92: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/92.jpg)
L'ACCÉLÉRATION MATÉRIELLEL'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);}
![Page 93: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/93.jpg)
L'ACCÉLÉRATION MATÉRIELLEL'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érationmatérielle
![Page 94: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/94.jpg)
L'ACCÉLÉRATION MATÉRIELLEL'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 :
![Page 95: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/95.jpg)
L'ACCÉLÉRATION MATÉRIELLECompatibilité navigateurs
n°10
Support actuel de l'accélération matérielle (via transform 3D) :
Tranquille !
![Page 96: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/96.jpg)
EN RÉSUMÉ...
![Page 97: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/97.jpg)
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
![Page 98: 10 Revelations sur le Web Mobile](https://reader034.vdocument.in/reader034/viewer/2022051323/549f8f93ac7959504c8b48b3/html5/thumbnails/98.jpg)
CRÉDITS
Photos, illustrations :FotoliaFlickr.com (licence CC)
Police :Segoe UIDelicious Heavy
Icônes et pictos :IconfinderFindicons