10 Revelations sur le Web Mobile

10
RÉVÉLATIONS
SUR LE WEB MOBILE

Raphaël Goetter
Übercheerleader
Alsacréations

<picture>
media queries
srcset
handheld
vw, vh, vmin, vmax
@viewport
device-width
<meta> viewport
accélération matérielle
dpi, dpcm, dppx
retina
DIPs

IL EXISTE UN MEDIA
« HANDHELD »
since 1998
RÉ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 small screen, limited bandwidth).
– W3C 1998
“

Relisez vos specs CSS2 !
n°1

Dans la pratique...
n°1
@media (handheld) {
p {color : green}
}
YAY!
YAY!

IL EXISTE UN MEDIA HANDHELD n°1
1998 2007 2013
Évolution du support au cours du temps...

Évolution du support au cours du temps...
n°1
1998 2007 2013

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)

LES IPHONES FONT TOUS 320px n°2
leboncoin.fr

leboncoin.fr
1240px1240px

iPhone3 iPhone4 iPhone5
320px320px 640px640px 640px640px

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

« device-width »
iPhone 3, 4, 5 : 320px
iPad 1, 2, 3 : 768px
iPad mini : 768px

« device-width »
iPhone 3, 4, 5 : 320px
iPad 1, 2, 3 : 768px
iPad mini : 768px
Device
Independant
Pixels
(DIPs)
Ressource : « a pixel is not a pixel »

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

Affichage (zoom) par défaut
640px640px
iPhone4
320px320px
980px980px
largeur physique
device-width
viewport

Affichage (zoom) par défaut
iPhone4
320px320px
980px980px
Niveau de zoom :
device-width / viewport
320 / 980 = 0,33
device-width
viewport

Connaître les valeurs de son mobile
Ressource : www.mobitest.me

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)

« WIDTH = DEVICE-WIDTH » ?
Pas si sûr...
n°3
<meta name="viewport" content="width=320">
Largeur d'affichage = 320px

Pas si sûr...
n°3
<meta name="viewport" content="width=320">
<meta name="viewport" content="width=device-width">
Largeur d'affichage = device-width

Pas si sûr...
n°3
Niveau de zoom :
device / viewport
320 / 320 = 1
device-width = 320
device-height = 568
iPhone 5
iPhone 5

Pas si sûr...
n°3
device-width = 320
device-height = 568
iPhone 5
iPhone 5
Niveau de zoom :
device / viewport
568 / 320 = 1.775

Alternative : ne fixer que le niveau de zoom
n°3
<meta name="viewport" content="initial-scale=1.0">
Niveau de zoom = 1

Initial-scale FTW !
n°3
Niveau de zoom = 1
device-width = 320
device-height = 568
iPhone 5
iPhone 5

Initial-scale FTW !
n°3
device-width = 320
device-height = 568
iPhone 5
iPhone 5
Niveau de zoom = 1

Initial-scale FTW !
n°3
Niveau de zoom = 1
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
aussi OK avec :

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.
“

ALA <META> VIEWPORT EST VOUÉE
À DISPARAîTRE
RÉVÉLATION N°4
Crédits : Flickr / Cayusa (cc)Crédits : Flickr / Cayusa (cc)

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

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

1- Le cas des .mobi
n°4
Crédits : Flickr / davo39 (cc)
osteofrance.mobi
meta Viewport
non reconnue
sur Safari

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 !

2- Le cas du mode « snap »
n°4
Crédits : mobilexweb.com
Mode « snap »
Sur Windows
Phone 8

2- Le cas du mode « snap »
n°4
Crédits : mobilexweb.com
meta Viewport
non reconnue
en « snap » mode

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/

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.

Dans la « vraie » vie...
n°4
@media (orientation: portrait) {
@viewport {width: device-width}
}
@media (orientation: landscape) {
@viewport {width: device-height}
}

Dans la « vraie » vie...
n°4
1010
Support actuel de @viewport :
Encourageant !

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)

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

n°5
body {height : 100%;}

n°5
html {height : 100%;}

n°5
html {height : 100%;}
.content {height : 100vh;}
Ressource : http://dev.w3.org/csswg/css-values/

n°5
Démo : http://kiwi.gg/vw

Compatibilité navigateurs
n°5
Ressource : http://dev.w3.org/csswg/css-values/
99
Support actuel des unités de viewport :
66
Plutôt bon !

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)

LES UNITES DPI, DPCM, DPPX
Ciblez selon la résolution
n°6
Au début était...
LE PIXEL-RATIO

n°6
640px640px
iPhone4
320px320px
largeur physique
device-width

n°6
640px640px
iPhone4
320px320px
largeur physique
device-width
Device Pixel Ratio :
640 / 320 = 2

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

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

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

La propriété « resolution »
n°6
dpi
points par inch
dpcm
points par centimètre
dppx
points par pixel
Équivalent « standard »
de pixel-ratio

n°6
dpi
points par inch
dpcm
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

n°6
dpi
points par inch
dpcm
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

n°6
Ressource : http://www.w3.org/TR/css3-values/#resolution
Mouais bof
Support actuel de « resolution » :
Support actuel de « resolution » + unité dppx :
99

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)

LE RÉTINA DE DEMAIN ? n°7
iPhone3 iPhone4
Pas rétinaPas rétina RétinaRétina

iPhone3 iPhone4
concombre.jpg
?

iPhone3 iPhone4
concombre-big.jpg
concombre-small.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 :

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

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/

L'attribut « srcset »
n°7
<img src="concombre-small.jpg" srcset="concombre-big.jpg 2x" alt="" >

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 :

n°7
Support actuel de <picture> et srcset :
Lamentable !

IL EXISTE DES MEDIA QUERIES
« CSS4 »
RÉVÉLATION N°8
Crédits : Flickr / makelessnoise (cc)Crédits : Flickr / makelessnoise (cc)

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

@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}
}

@media (hover)
n°8
@media (hover) {
nav:hover {margin-left : 100%}
}

@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);
}
}

@media (script)
n°8
@media (script) {
.kiwi {ici un truc à faire si JS est activé}
}

n°8
Ressource : http://dev.w3.org/csswg/mediaqueries4
Support actuel des Media Queries 4 :
Vide !

JAVASCRIPT POUR GÉRER
VOS MEDIA QUERIES !
RÉVÉLATION N°9
Crédits : Flickr / swirlingthoughts (cc)Crédits : Flickr / swirlingthoughts (cc)

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.

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.

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>

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>

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

N°9
Ressource : La méthode matchMedia()
Support actuel de matchMedia() :
Très abordable !
101033

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)

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
“

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 !

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.

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 :(

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);
}

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

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 :

n°10
Support actuel de l'accélération matérielle (via transform 3D) :
Tranquille !

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

CRÉDITS
Photos, illustrations :
Fotolia
Flickr.com (licence CC)
Police :
Segoe UI
Delicious Heavy
Icônes et pictos :
Iconfinder
Findicons

MERCI !
Raphaël Goetter www.alsacreations.fr @goetter

10 Revelations sur le Web Mobile

Contenu connexe

Tendances (20)

En vedette (20)

Similaire à 10 Revelations sur le Web Mobile (20)

Plus de Raphaël Goetter (14)

Dernier (9)

10 Revelations sur le Web Mobile