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