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

Le futur du Responsive Web Design

Raphael Goetter
February 11, 2014

Le futur du Responsive Web Design

Le RWD est un matériau jeune, une ébauche en plein brouillon qui prend peu à peu forme et consistance au fil du temps et de nos expériences sur le terrain.

Dans quelques mois (années ?), les spécifications officielles seront bien plus abouties et stabilisées au sein de nos navigateurs.

De nouvelles techniques de positionnement CSS3 telles que Flexbox, Grid layout et Regions faciliteront l'adaptation de designs multi-surfaces.
Mais au-delà de ça, de réelles possibilités sont d'ores et déjà offertes par le module @viewport, les unités de viewport (vw, vh, vmin, vmax), les unités de résolution (dpi, dpcm, dppx), les solutions avancées pour gérer les images HD (image-set, srcset et picture) ainsi que les Media Queries CSS level 4 : @media (pointer), (hover), (luminosity) et (script).

Gageons que le Responsive Web Design de l'avenir du futur nous épanouira un peu plus tous les matins au réveil, nous rendra encore plus heureux d'aller travailler dans notre jolie agence web, et rendra tous nos clients encore plus nombreux, comblés et enthousiastes par notre travail quotidien qu'on adore.
Oups, je m'égare.

Raphael Goetter

February 11, 2014
Tweet

More Decks by Raphael Goetter

Other Decks in Design

Transcript

  1. le futur du
    RESPONSIVE
    WEB DESIGN
    Microsoft TechDays 2014

    View Slide

  2. RAPHAËL GOETTER
    photomontage : @diou

    View Slide

  3. WikiMedia : Man in a box - Keith Allison
    Soyez Responsive
    qu ils disaient !

    View Slide

  4. le futur des
    USAGES
    le futur des
    OBJETS
    le futur des
    RESSOURCES
    le futur des
    STANDARDS
    le futur des
    TECHNIQUES

    View Slide

  5. le futur des
    USAGES
    le futur des
    OBJETS
    le futur des
    RESSOURCES
    le futur des
    STANDARDS
    le futur des
    TECHNIQUES
    trop long !
    pas le temps !
    oui mais non ! pfiouuu !
    OK banco !

    View Slide

  6. SPÉCIFICATIONS ET FORMATS
    FONCTIONNALITÉS ET ENVIRONNEMENT
    L’AVENIR DU POSITIONNEMENT CSS

    View Slide

  7. SPÉCIFICATIONS
    et formats

    View Slide

  8. Je me suis fait
    beau pour venir
    aux TechDays !

    View Slide

  9. SVG
    scalable
    vector
    graphics

    View Slide

  10. PAS SVG SVG

    View Slide

  11. › Vectoriel
    › Haute Def (« retina ») ready
    › Simple à styler et modifier
    › Idéal pour pictos, logos, etc.

    View Slide

  12. compatibilité
    SVG
    9 3.0
    W3C Recommendation

    View Slide

  13. unités de
    VIEWPORT

    View Slide

  14. 100vw
    100vh
    vw = largeur de fenêtre, vh = hauteur de fenêtre

    View Slide

  15. 100vmax (aussi)
    100vmax
    vmin = valeur minimum, vmax = valeur maximum

    View Slide

  16. .kiwi {
    width : 80vw ;
    height : 80vh ;
    max-width : 100vmax ;
    max-height : 100vmin ;
    font-size : 3vw ;
    }

    View Slide

  17. compatibilité
    VIEWPORT UNITS
    9 4.4
    W3C Candidate Recommendation

    View Slide

  18. unités de
    RÉSOLUTION

    View Slide

  19. › dpi
    points par pouce
    MOI, j en AI PARCOURU
    ’ DPI
    MA BONNE DAME !
    huhu

    View Slide

  20. › dpi
    › dpcm
    › dpmm
    › dppx
    points par centimètre
    points par millimètre
    points par pixel
    points par pouce
    bah moi je la trouvais drôle ma blague...

    View Slide

  21. @media (min-resolution : 2dppx) {
    div {
    background : url(concombre-big.jpg)
    }
    }
    @media (min-device-pixel-ratio : 2) {
    div {
    background : url(concombre-big.jpg)
    }
    }
    Inventé par Webkit
    Propriétaire
    Non Standard
    Standard

    View Slide

  22. compatibilité
    RESOLUTION UNITS
    W3C Candidate Recommendation

    View Slide

  23. règle-at
    @VIEWPORT

    View Slide

  24. View Slide

  25. View Slide

  26. @viewport {
    width: device-width;
    zoom: 1;
    }
    Standard

    View Slide

  27. @media (orientation: portrait) {
    @viewport {width: device-width}
    }
    @media (orientation: landscape) {
    @viewport {width: device-height}
    }

    View Slide

  28. compatibilité
    @VIEWPORT
    10
    W3C Working Draft

    View Slide

  29. règle-at
    @SUPPORTS

    View Slide

  30. @supports ( display: flex) {
    .kiwi {display : flex;}
    }
    @supports not ( display: flex) {
    .kiwi {display : table-cell;}
    }

    View Slide

  31. règle-at
    @SUPPORTS
    4.4
    W3C Candidate Recommendation

    View Slide

  32. formats d’images
    RESPONSIVE

    View Slide

  33. [concombre-big.png]
    [concombre-small.png]

    View Slide

  34. [concombre-big.png]
    [concombre-small.png]





    1024px

    View Slide

  35. [concombre-big.png]
    [concombre-small.png]
    1024px

    View Slide

  36. compatibilité

    bon ben voilà quoi...

    View Slide

  37. compatibilité
    srcset
    ouais OK d'accord...
    21
    34

    View Slide

  38. partie 1
    DÉMOS
    › logo du site knacss.com (SVG)
    › police relative à la taille de fenêtre (vw unit)
    › conserver le ratio d’une iframe (vmin unit)

    View Slide

  39. fonctionnalités et
    ENVIRONNEMENT

    View Slide

  40. Mon environnement
    n est pas toujours

    facile vivre...
    à

    View Slide

  41. s’adapter au
    « touch »

    View Slide

  42. mouse events
    click
    mousemove
    mousedown
    mouseup
    mouseover

    View Slide

  43. › Liés à la souris
    › Bien reconnus sur mobiles
    › (Par dépit)
    mouse events
    click
    mousemove
    mousedown
    mouseup
    mouseover

    View Slide

  44. mouse events
    touchstart
    touchend
    touchmove
    touch events
    › Dédiés au touch (doigt)
    › Recommandation W3C
    › Bien reconnus sur mobiles (sauf IE)
    click
    mousemove
    mousedown
    mouseup
    mouseover

    View Slide

  45. mouse events
    touchstart
    touchend
    touchmove
    touch events
    pointerdown
    pointerup
    pointercancel
    pointer events
    › Pointeurs divers (souris, doigt, stylet)
    › Recommandation Candidate W3C
    › Uniquement reconnus sur IE (hi hi)
    pointerout
    pointermove
    pointerenter
    pointerleave
    click
    mousemove
    mousedown
    mouseup
    mouseover

    View Slide

  46. s’adapter au
    DÉBIT

    View Slide

  47. › API Network Information
    › API Navigation Timing
    mesure du
    chronométrage de la
    navigation
    détection de la bande
    passante de l’appareil

    View Slide

  48. network
    INFORMATION
    var connection = navigator.connection;
    alert("Bande passante : " + connection.bandwidth + " MB/s");

    View Slide

  49. compatibilité
    NETWORK INFORMATION
    W3C Working Draft

    View Slide

  50. navigation
    TIMING
    var speed = window.performance;
    var start = speed.timing.requestStart;
    var end = speed.timing.responseStart;
    var request_duration = end - start;
    if (request_duration <= 700) { YAY ! Ça dépote ! }
    réception 1er octet
    requête au serveur

    View Slide

  51. compatibilité
    NAVIGATION TIMING
    W3C Recommendation
    4.0
    9

    View Slide

  52. le niveau de
    BATTERIE

    View Slide

  53. battery.onlevelchange = function() {
    yay = (battery.charging || battery.level > 0.25);
    if (yay) { alert( "Battery is OK." ); }
    }

    View Slide

  54. compatibilité
    BATTERY API
    W3C Candidate Recommendation

    View Slide

  55. media queries
    CSS LEVEL 4

    View Slide

  56. › @media (pointer)
    › @media (hover)
    › @media (luminosity)
    › @media (script)
    support ou non de
    l'événement de survol
    mesure de la
    luminosité ambiante
    support ou non de
    JavaScript
    type de dispositif de
    pointage

    View Slide

  57. › @media (pointer: none)
    › @media (pointer: coarse)
    › @media (pointer: fine)
    pointage limité
    (tablette,
    smartphone
    tactile)
    pointage précis (souris,
    stylet)
    pas de dispositif de
    pointage
    POINTER

    View Slide

  58. oh oui touch-moi !
    oh oui touch-moi !
    POINTER
    @media (pointer : coarse) and not (pointer : fine) {
    .button {font-size : larger}
    }
    oh oui clique-moi !
    oh oui clique-moi !

    View Slide

  59. › @media (luminosity: dim)
    › @media (luminosity: normal)
    › @media (luminosity: washed)
    environnement
    « normal »
    environnement très
    clair
    environnement sombre
    LUMINOSITY

    View Slide

  60. @media (luminosity : washed) {
    html {
    filter: brightness(0.7) contrast(1.5);
    }
    }
    LUMINOSITY

    View Slide

  61. compatibilité
    @media CSS4
    ah ben ça valait le coup...

    View Slide

  62. partie 2
    DÉMOS
    › s’adapter au débit (Navigation Timing)

    View Slide

  63. l’avenir du
    POSITIONNEMENT CSS

    View Slide

  64. Le positionnement
    CSS3 de demain sera
    Responsive !

    View Slide

  65. module css3
    MULTICOLONNES

    View Slide

  66. Lorem Elsass ipsum réchime amet non Choucroute knack tchao bissame
    hopla. Wotch a kofee avec ton BibalaekaesSalat et ta wurscht ? Yeuh non
    che suis au réchime, je ne mange plus que des Grumbeere light et che
    fais de la chym avec Chulien. Tiens, un Picon sur le comptoir. Hopla vous
    savez que la mamsell Huguette, la miss Miss Dahlias du messti de
    Bischheim était au Christkindelsmärik en compagnie de Richard
    Schirmeck (celui qui a un blottkopf), le mari de Chulia. Hopla !
    p { }

    View Slide

  67. p { columns : 3 }
    réchime, je ne mange
    plus que des
    Grumbeere light et
    che fais de la chym
    avec Chulien. Tiens, un
    Picon sur le comptoir.
    Hopla vous savez que
    la mamsell Huguette,
    la miss Miss Dahlias
    du messti de
    Bischheim était au
    Christkindelsmärik en
    compagnie de Richard
    Schirmeck (celui qui a
    un blottkopf), le mari
    de Chulia. Hopla !
    Lorem Elsass ipsum
    réchime amet non
    Choucroute knack
    tchao bissame hopla.
    Wotch a kofee avec
    ton BibalaekaesSalat
    et ta wurscht ? Yeuh
    non che suis au

    View Slide

  68. compatibilité
    MULTICOLONNES
    10
    W3C Candidate Recommendation

    View Slide

  69. module css3
    FLEXBOX

    View Slide

  70. .parent {
    display: flex;
    }
    nav {width : 10em;} section {flex : 1;} .ads {width : 10em;}

    View Slide

  71. .parent {
    display: flex;
    }
    section {flex : 1; order : 2;}

    View Slide

  72. compatibilité
    FLEXIBLE BOX
    10
    W3C Candidate Recommendation

    View Slide

  73. module css3
    GRID LAYOUT

    View Slide

  74. .parent {
    display: grid;
    grid-template-columns: 200px 1fr ;
    }
    nav {grid-column: 1;} section {grid-column: 2;}

    View Slide

  75. .parent {
    display: grid;
    grid-template-columns: 200px 1fr ;
    grid-template-rows: 10em 1fr ;
    }
    nav {
    grid-column: 1;
    grid-row: 1;
    }
    article {
    grid-column: 1;
    grid-row: 2;
    }

    View Slide

  76. .parent {
    display: grid;
    grid-template-columns: (nav) 200px (section) 1fr ;
    grid-template-rows: (article) 10em (aside) 1fr ;
    }
    nav {
    grid-area: nav ;
    }
    article {
    grid-area: article ;
    }

    View Slide

  77. .parent {
    grid-template-columns: (nav) (section) ;
    grid-template-rows: (article) (aside) ;
    }
    .parent {
    grid-template-rows:
    (section) (article) (aside) (nav) ;
    }

    View Slide

  78. compatibilité
    GRID LAYOUT
    10
    \o/
    W3C Working Draft

    View Slide

  79. module css3
    REGIONS

    View Slide

  80. Lorem Elsass ipsum réchime
    amet non Choucroute
    knack hopla.

    Lorem Elsass ipsum réchime amet non
    Choucroute knack hopla.



    View Slide

  81. Lorem Elsass ipsum réchime
    amet non Choucroute
    knack hopla.
    .first { flow-into: machin;}
    .second { flow-from: machin;}

    Lorem Elsass ipsum réchime amet non
    Choucroute knack hopla.



    View Slide

  82. CSS Regions est l avenir

    de la tELEportation...
    A FOND

    View Slide

  83. compatibilité
    REGIONS
    10
    (iframe)
    flag
    W3C Working Draft
    7

    View Slide

  84. partie 3
    DÉMOS
    › navigation responsive (multicolumns)
    › réordonnement de blocs (flexbox)
    › grille de mise en page simple (grid layout)
    › grille responsive complexe (grid layout)
    › mise en page adaptative (grid layout)
    › réordonnement de blocs (regions)

    View Slide

  85. MYDEVICE.io

    View Slide

  86. bon, on en est où ?
    RÉSUMÉ

    View Slide

  87. SVG
    SVG
    matchMedia()
    matchMedia()
    vw, vh,
    vw, vh,
    vmin,
    vmin,
    vmax
    vmax
    dpcm,
    dpcm,
    dpmm,
    dpmm,
    dppx
    dppx
    pointer
    pointer
    events
    events
    @viewport
    @viewport
    @supports
    @supports


    srcset
    srcset
    network
    network
    information
    information
    flexbox
    flexbox
    layout
    layout
    navigation
    navigation
    timing
    timing
    battery
    battery
    API
    API
    media
    media
    queries
    queries
    CSS4
    CSS4
    multicolumns
    multicolumns
    grid
    grid
    layout
    layout
    regions,
    regions,
    shapes
    shapes
    bien STIMULANT,
    le futur du
    responsive sera
    light events
    light events

    View Slide

  88. Il marche pas trEs bien
    ton nouveau
    Windows Phone, chEri

    View Slide

  89. hey, on peut jouer aussi ?
    DÉMOS
    www.kiwi.gg/mstd2014

    View Slide

  90. MERCI, BISOUS
    pictos
    › Human Finger Gesture - Patrick van Tilborg
    › Phone icons – Cemagraphics
    › Old school - Babasse
    › Typicons, Icomoon, Font Awesome
    raphaël goetter
    raphaël goetter
    www.alsacreations.fr
    www.alsacreations.fr
    @goetter
    @goetter
    polices
    › PT Sans - Paratype
    › Delicious Heavy - Jos Buivenga
    › KG always a good time - Kimberly Geswein
    démos + slides
    › www.kiwi.gg/mstd2014

    View Slide