10 Revelations sur le Web Mobile

10RÉVÉLATIONSSUR 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“

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°1

1998 2007 2013

Évolution du support au cours du temps...

IL EXISTE UN MEDIA HANDHELDÉvolution du support au cours du temps...

n°1

1998 2007 2013


n°1

1998 2007 2013


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


iPhone3 iPhone4 iPhone5

320px320px 640px640px 640px640px

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

LES IPHONES FONT TOUS 320px n°2« device-width »

iPhone 3, 4, 5 : 320px




iPad 1, 2, 3 : 768px

iPad mini : 768px

LES IPHONES FONT TOUS 320px n°2« device-width »

iPhone 3, 4, 5 : 320px




iPad 1, 2, 3 : 768px

iPad mini : 768px

DeviceIndependantPixels(DIPs)

Ressource : « a pixel is not a pixel »

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

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

LES IPHONES FONT TOUS 320px n°2Affichage (zoom) par défaut

640px640px

iPhone4

320px320px

980px980px

largeur physique

device-width

viewport

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

LES IPHONES FONT TOUS 320px n°2Connaître les valeurs de son mobile

Ressource : www.mobitest.me

http://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


n°3

<meta name="viewport" content="width=320">

<meta name="viewport" content="width=device-width">

Largeur d'affichage = device-width


n°3


Niveau de zoom :device / viewport

320 / 320 = 1

device-width = 320

device-height = 568

iPhone 5

iPhone 5


n°3


device-width = 320

device-height = 568

iPhone 5

iPhone 5

Niveau de zoom :device / viewport

568 / 320 = 1.775

« WIDTH = DEVICE-WIDTH » ?Alternative : ne fixer que le niveau de zoom

n°3


<meta name="viewport" content="initial-scale=1.0">

Niveau de zoom = 1

« WIDTH = DEVICE-WIDTH » ?Initial-scale FTW !

n°3


Niveau de zoom = 1

device-width = 320

device-height = 568

iPhone 5

iPhone 5


n°3


device-width = 320

device-height = 568

iPhone 5

iPhone 5

Niveau de zoom = 1


n°3


Niveau de zoom = 1

<meta name="viewport" content="width=device-width, initial-scale=1.0">

aussi OK avec :

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

“

http://kiwi.gg/initialscale

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

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

VIEWPORT BIENTOT OBSOLÈTE ?1- Le cas des .mobi

n°4

Crédits : Flickr / davo39 (cc)

osteofrance.mobi

meta Viewportnon reconnue sur Safari

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 !

VIEWPORT BIENTOT OBSOLÈTE ?2- Le cas du mode « snap »

n°4

Crédits : mobilexweb.com

Mode « snap »

Sur WindowsPhone 8

VIEWPORT BIENTOT OBSOLÈTE ?2- Le cas du mode « snap »

n°4

Crédits : mobilexweb.com

meta Viewportnon reconnue en « snap » mode

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/

http://www.w3.org/TR/css-device-adapt/

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.

VIEWPORT BIENTOT OBSOLÈTE ?Dans la « vraie » vie...

n°4

@media (orientation: portrait) {@viewport {width: device-width}

}@media (orientation: landscape) {

@viewport {width: device-height}}

VIEWPORT BIENTOT OBSOLÈTE ?Dans la « vraie » vie...

n°4

1010

Support actuel de @viewport :

Encourageant !

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)

LES UNITÉS VW, VH, VMIN, VMAXCalculez 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/

http://dev.w3.org/csswg/css-values/


n°5

Démo : http://kiwi.gg/vw

http://kiwi.gg/vw

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 !

http://dev.w3.org/csswg/css-values/

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)

LES UNITES DPI, DPCM, DPPXCiblez 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

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

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

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

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


n°6

dpipoints par inch



1 inch= 96 px = 2.54 cm

1 dpi ≈ 2.54 dpcm

1 dppx ≈ 96 dpi

1 dpcm ≈ 0.39 dpi


n°6

dpipoints par inch



@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

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

http://www.w3.org/TR/css3-values/#resolution

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 :

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

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/

https://github.com/scottjehl/picturefill

http://www.w3.org/community/respimg/

LE RÉTINA DE DEMAIN ?L'attribut « srcset »

n°7

<img src="concombre-small.jpg" srcset="concombre-big.jpg 2x" alt="" >

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 :

https://github.com/borismus/srcset-polyfill

http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/

LE RÉTINA DE DEMAIN ?Compatibilité navigateurs

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

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}

}

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)environnement normal

@media (luminosity: washed)environnement très clair

@media (luminosity : washed) {body {

filter: brightness(0.8) contrast(1.2);}

}

DES MEDIA QUERIES « CSS4 »@media (script)

n°8

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

}

DES MEDIA QUERIES « CSS4 »Compatibilité navigateurs

n°8

Ressource : http://dev.w3.org/csswg/mediaqueries4

Support actuel des Media Queries 4 :

Vide !

http://dev.w3.org/csswg/mediaqueries4

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

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.

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>


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

JAVASCRIPT ET MEDIA QUERIESCompatibilité navigateurs

N°9

Ressource : La méthode matchMedia()

Support actuel de matchMedia() :

Très abordable !

101033

http://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html

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É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

“

http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/


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érationmaté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 :

L'ACCÉLÉRATION MATÉRIELLECompatibilité navigateurs

n°10

Support actuel de l'accélération matérielle (via transform 3D) :

Tranquille !

EN RÉSUMÉ...

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 :FotoliaFlickr.com (licence CC)

Police :Segoe UIDelicious Heavy

Icônes et pictos :IconfinderFindicons

MERCI !

Raphaël Goetter www.alsacreations.fr @goetter

http://www.alsacreations.fr/

10 Revelations sur le Web Mobile

Technology