10 révélations sur le Web mobile

Slide 1

Slide 1 text

10 RÉVÉLATIONS SUR LE WEB MOBILE

Slide 2

Slide 2 text

Raphaël Goetter Übercheerleader Alsacréations

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

IL EXISTE UN MEDIA « HANDHELD » since 1998 RÉVÉLATION N°1

Slide 5

Slide 5 text

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 “

Slide 6

Slide 6 text

IL EXISTE UN MEDIA HANDHELD Relisez vos specs CSS2 ! n°1

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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)

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

LES IPHONES FONT TOUS 320px n°2 iPhone3 iPhone4 iPhone5 320px 320px 640px 640px 640px 640px

Slide 16

Slide 16 text

LES IPHONES FONT TOUS 320px n°2 iPhone3 iPhone4 iPhone5 320px 320px 640px 640px 640px 640px

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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 »

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

LES IPHONES FONT TOUS 320px n°2 Affichage (zoom) par défaut 640px 640px iPhone4 320px 320px 980px 980px largeur physique device-width viewport

Slide 22

Slide 22 text

LES IPHONES FONT TOUS 320px n°2 Affichage (zoom) par défaut iPhone4 320px 320px 980px 980px Niveau de zoom : device-width / viewport 320 / 980 = 0,33 device-width viewport

Slide 23

Slide 23 text

LES IPHONES FONT TOUS 320px n°2 Connaître les valeurs de son mobile Ressource : www.mobitest.me

Slide 24

Slide 24 text

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)

Slide 25

Slide 25 text

« WIDTH = DEVICE-WIDTH » ? Pas si sûr... n°3 Largeur d'affichage = 320px

Slide 26

Slide 26 text

« WIDTH = DEVICE-WIDTH » ? Pas si sûr... n°3 Largeur d'affichage = device-width

Slide 27

Slide 27 text

« WIDTH = 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

Slide 28

Slide 28 text

« WIDTH = DEVICE-WIDTH » ? 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

Slide 29

Slide 29 text

« WIDTH = DEVICE-WIDTH » ? Alternative : ne fixer que le niveau de zoom n°3 Niveau de zoom = 1

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

« WIDTH = DEVICE-WIDTH » ? Initial-scale FTW ! n°3 Niveau de zoom = 1 aussi OK avec :

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

VIEWPORT BIENTOT OBSOLÈTE ? C'est le job de CSS, pas HTML ! n°4 Inventé par Apple sur Safari iOS1 Propriétaire Repris par l'ensemble des autres navigateurs

Slide 36

Slide 36 text

VIEWPORT BIENTOT OBSOLÈTE ? C'est le job de CSS, pas HTML ! n°4 Du HTML pour gérer le design Maintenance plus complexe Non standard

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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 !

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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/

Slide 42

Slide 42 text

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.

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

VIEWPORT BIENTOT OBSOLÈTE ? Dans la « vraie » vie... n°4 10 10 Support actuel de @viewport : Encourageant !

Slide 45

Slide 45 text

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)

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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/

Slide 50

Slide 50 text

LES UNITÉS VW, VH, VMIN, VMAX Calculez selon la taille de fenêtre n°5 Démo : http://kiwi.gg/vw

Slide 51

Slide 51 text

LES UNITÉS VW, VH, VMIN, VMAX Compatibilité navigateurs n°5 Ressource : http://dev.w3.org/csswg/css-values/ 9 9 Support actuel des unités de viewport : 6 6 Plutôt bon !

Slide 52

Slide 52 text

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)

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

LES UNITES DPI, DPCM, DPPX Ciblez selon la résolution n°6 640px 640px iPhone4 320px 320px largeur physique device-width

Slide 55

Slide 55 text

LES UNITES DPI, DPCM, DPPX Ciblez selon la résolution n°6 640px 640px iPhone4 320px 320px largeur physique device-width Device Pixel Ratio : 640 / 320 = 2

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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)

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

LE RÉTINA DE DEMAIN ? n°7 iPhone3 iPhone4 Pas rétina Pas rétina Rétina Rétina concombre.jpg ?

Slide 66

Slide 66 text

LE RÉTINA DE DEMAIN ? n°7 iPhone3 iPhone4 Pas rétina Pas rétina Rétina Rétina concombre-big.jpg concombre-small.jpg

Slide 67

Slide 67 text

LE RÉTINA DE DEMAIN ? Remplacer l'image conditionnellement n°7 Petits écrans :

Grands écrans (>640px) :

if(window.innerWidth >= 640) { blablabla src.replace("small", "big"); } Exemple :

Slide 68

Slide 68 text

LE RÉTINA DE DEMAIN ? Remplacer l'image conditionnellement n°7 Petits écrans :

Grands écrans (>640px) :

if(window.innerWidth >= 640) { blablabla src.replace("small", "big"); } Exemple : Les 2 images sont chargées

Slide 69

Slide 69 text

LE RÉTINA DE DEMAIN ? L'élément n°7

Alternative : picturefill Ressource : http://www.w3.org/community/respimg/

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

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

Ou encore :

Slide 72

Slide 72 text

LE RÉTINA DE DEMAIN ? Compatibilité navigateurs n°7 Support actuel de et srcset : Lamentable !

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

DES MEDIA QUERIES « CSS4 » @media (hover) n°8 @media (hover) { nav:hover {margin-left : 100%} }

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

DES MEDIA QUERIES « CSS4 » @media (script) n°8 @media (script) { .kiwi {ici un truc à faire si JS est activé} }

Slide 79

Slide 79 text

DES MEDIA QUERIES « CSS4 » Compatibilité navigateurs n°8 Ressource : http://dev.w3.org/csswg/mediaqueries4 Support actuel des Media Queries 4 : Vide !

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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.

Slide 82

Slide 82 text

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.

Slide 83

Slide 83 text

JAVASCRIPT ET MEDIA QUERIES Le meilleur des deux mondes N°9 matchMedia() ! 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 */ }

Slide 84

Slide 84 text

JAVASCRIPT ET MEDIA QUERIES Le meilleur des deux mondes N°9 matchMedia() ! 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 }

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

JAVASCRIPT ET MEDIA QUERIES Compatibilité navigateurs N°9 Ressource : La méthode matchMedia() Support actuel de matchMedia() : Très abordable ! 10 10 3 3

Slide 87

Slide 87 text

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)

Slide 88

Slide 88 text

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 “

Slide 89

Slide 89 text

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 !

Slide 90

Slide 90 text

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.

Slide 91

Slide 91 text

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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 :

Slide 95

Slide 95 text

L'ACCÉLÉRATION MATÉRIELLE Compatibilité navigateurs n°10 Support actuel de l'accélération matérielle (via transform 3D) : Tranquille !

Slide 96

Slide 96 text

EN RÉSUMÉ...

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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