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 full-size slide

  2. RAPHAËL GOETTER
    photomontage : @diou

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  7. SPÉCIFICATIONS
    et formats

    View full-size slide

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

    View full-size slide

  9. SVG
    scalable
    vector
    graphics

    View full-size slide

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

    View full-size slide

  11. compatibilité
    SVG
    9 3.0
    W3C Recommendation

    View full-size slide

  12. unités de
    VIEWPORT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. compatibilité
    VIEWPORT UNITS
    9 4.4
    W3C Candidate Recommendation

    View full-size slide

  17. unités de
    RÉSOLUTION

    View full-size slide

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

    View full-size slide

  19. › 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 full-size slide

  20. @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 full-size slide

  21. compatibilité
    RESOLUTION UNITS
    W3C Candidate Recommendation

    View full-size slide

  22. règle-at
    @VIEWPORT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. compatibilité
    @VIEWPORT
    10
    W3C Working Draft

    View full-size slide

  26. règle-at
    @SUPPORTS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. formats d’images
    RESPONSIVE

    View full-size slide

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

    View full-size slide

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





    1024px

    View full-size slide

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

    View full-size slide

  33. compatibilité

    bon ben voilà quoi...

    View full-size slide

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

    View full-size slide

  35. 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 full-size slide

  36. fonctionnalités et
    ENVIRONNEMENT

    View full-size slide

  37. Mon environnement
    n est pas toujours

    facile vivre...
    à

    View full-size slide

  38. s’adapter au
    « touch »

    View full-size slide

  39. mouse events
    click
    mousemove
    mousedown
    mouseup
    mouseover

    View full-size slide

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

    View full-size slide

  41. 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 full-size slide

  42. 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 full-size slide

  43. s’adapter au
    DÉBIT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. compatibilité
    NETWORK INFORMATION
    W3C Working Draft

    View full-size slide

  47. 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 full-size slide

  48. compatibilité
    NAVIGATION TIMING
    W3C Recommendation
    4.0
    9

    View full-size slide

  49. le niveau de
    BATTERIE

    View full-size slide

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

    View full-size slide

  51. compatibilité
    BATTERY API
    W3C Candidate Recommendation

    View full-size slide

  52. media queries
    CSS LEVEL 4

    View full-size slide

  53. › @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 full-size slide

  54. › @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 full-size slide

  55. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. l’avenir du
    POSITIONNEMENT CSS

    View full-size slide

  61. Le positionnement
    CSS3 de demain sera
    Responsive !

    View full-size slide

  62. module css3
    MULTICOLONNES

    View full-size slide

  63. 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 full-size slide

  64. 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 full-size slide

  65. compatibilité
    MULTICOLONNES
    10
    W3C Candidate Recommendation

    View full-size slide

  66. module css3
    FLEXBOX

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. compatibilité
    FLEXIBLE BOX
    10
    W3C Candidate Recommendation

    View full-size slide

  70. module css3
    GRID LAYOUT

    View full-size slide

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

    View full-size slide

  72. .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 full-size slide

  73. .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 full-size slide

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

    View full-size slide

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

    View full-size slide

  76. module css3
    REGIONS

    View full-size slide

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

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



    View full-size slide

  78. 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 full-size slide

  79. CSS Regions est l avenir

    de la tELEportation...
    A FOND

    View full-size slide

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

    View full-size slide

  81. 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 full-size slide

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

    View full-size slide

  83. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  86. 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 full-size slide