Upgrade to Pro — share decks privately, control downloads, hide ads and more …

10 révélations sur le Web mobile

10 révélations sur le Web mobile

Web-5 Béziers, 2012

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

Raphael Goetter

June 13, 2013
Tweet

More Decks by Raphael Goetter

Other Decks in Programming

Transcript

  1. 10
    RÉVÉLATIONS
    SUR LE WEB MOBILE

    View Slide

  2. Raphaël Goetter
    Übercheerleader
    Alsacréations

    View Slide


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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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 »

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. « WIDTH = DEVICE-WIDTH » ?
    Pas si sûr...
    n°3

    Largeur d'affichage = 320px

    View Slide

  26. « WIDTH = DEVICE-WIDTH » ?
    Pas si sûr...
    n°3


    Largeur d'affichage = device-width

    View Slide

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

    View Slide

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

    View Slide

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


    Niveau de zoom = 1

    View Slide

  30. « WIDTH = DEVICE-WIDTH » ?
    Initial-scale FTW !
    n°3

    Niveau de zoom = 1
    device-width = 320
    device-height = 568
    iPhone 5
    iPhone 5

    View Slide

  31. « WIDTH = DEVICE-WIDTH » ?
    Initial-scale FTW !
    n°3

    device-width = 320
    device-height = 568
    iPhone 5
    iPhone 5
    Niveau de zoom = 1

    View Slide

  32. « WIDTH = DEVICE-WIDTH » ?
    Initial-scale FTW !
    n°3

    Niveau de zoom = 1

    aussi OK avec :

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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 !

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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





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

    View Slide

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

    View Slide

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

    Alternative : srcset polyfill
    Ressource : http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
    srcset=" concombre-small.jpg 480w,
    concombre-medium.jpg 768w,
    concombre-big.jpg 1x
    "
    alt="" >
    Ou encore :

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  83. JAVASCRIPT ET MEDIA QUERIES
    Le meilleur des deux mondes
    N°9
    matchMedia() !
    <br/>if (window.matchMedia("(min-device-width: 640px)").matches) {<br/>/* La largeur du périphérique est au-moins 640px */<br/>} else {<br/>/* La largeur est inférieure à 640px */<br/>}<br/>

    View Slide

  84. JAVASCRIPT ET MEDIA QUERIES
    Le meilleur des deux mondes
    N°9
    matchMedia() !
    <br/>if (window.matchMedia("(min-device-width: 640px)").matches) {<br/>On charge jQuery + slideshow.js et on se lâche !<br/>} else {<br/>On ne charge pas les ressources superflues<br/>}<br/>

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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 !

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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 :

    View Slide

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

    View Slide

  96. EN RÉSUMÉ...

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide