$30 off During Our Annual Pro Sale. View Details »

État de l’art du responsive Web design et projections dans le futur

État de l’art du responsive Web design et projections dans le futur

Le Responsive Web Design 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. Cette conférence fournit un état des lieux des spécifications modernes ou futuristes HTML5, CSS3, JavaScript sur le thème du Responsive (positionnement avancés, viewport, hautes définitions, connectivité, luminosité, SVG, etc.).

Raphael Goetter

April 25, 2014
Tweet

More Decks by Raphael Goetter

Other Decks in Design

Transcript

  1. le futur du
    RESPONSIVE
    WEB DESIGN
    AgoraCMS 2014

    View Slide

  2. RAPHAËL GOETTER
    (odieux) photomontage : @diou

    View Slide

  3. RESPONSIVE
    aujourd’hui ?
    › c’est instable
    › c’est une jungle
    › c’est complexe

    View Slide

  4. srcset
    RESPONSIVE
    c’est instable
    @viewport

    View Slide

  5. RESPONSIVE
    c’est une jungle

    View Slide

  6. RESPONSIVE
    c’est complexe
    Stéphanie Walter, sur inspiration de Brad Frost

    View Slide

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

    View Slide

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

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

    View Slide

  10. SPÉCIFICATIONS
    et formats

    View Slide

  11. Je me suis fait
    beau pour venir
    CHEZ AgoraCMS !

    View Slide

  12. SVG
    scalable
    vector
    graphics

    View Slide

  13. PAS SVG SVG

    View Slide

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

    View Slide

  15. compatibilité
    SVG
    9 3.0
    W3C Recommendation

    View Slide

  16. format svg
    DÉMOS
    › knacss.com (logo vecto)

    View Slide

  17. unités de
    VIEWPORT

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. compatibilité
    VIEWPORT UNITS
    9 4.4
    W3C Candidate Recommendation

    View Slide

  22. viewport units
    DÉMOS
    › police relative à la taille de fenêtre (vw unit)
    › conserver le ratio d’une iframe (vmin unit)

    View Slide

  23. règle css
    @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. formats d’images
    RESPONSIVE

    View Slide

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

    View Slide

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





    1024px

    View Slide

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

    View Slide

  33. compatibilité

    bon ben voilà quoi...

    View Slide

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

    View Slide

  35. srcset
    DÉMO
    › chargement conditionnel d’image (Alsacreations)

    View Slide

  36. fonctionnalités et
    ENVIRONNEMENT

    View Slide

  37. Mon environnement
    n est pas toujours

    facile vivre...
    à

    View Slide

  38. s’adapter au
    DÉBIT

    View Slide

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

  40. compatibilité
    NAVIGATION TIMING
    W3C Recommendation
    4.0
    9

    View Slide

  41. navigation timing
    DÉMO
    › s’adapter au débit (Navigation Timing)

    View Slide

  42. media queries
    CSS LEVEL 4

    View Slide

  43. › @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

  44. › @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

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

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

    View Slide

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

    View Slide

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

    View Slide

  49. l’avenir du
    POSITIONNEMENT CSS

    View Slide

  50. Le positionnement
    CSS3 de demain sera
    Responsive !

    View Slide

  51. module css3
    MULTICOLONNES

    View Slide

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

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

  54. compatibilité
    MULTICOLONNES
    10
    W3C Candidate Recommendation

    View Slide

  55. multicolonnes
    DÉMO
    › navigation responsive (multicolumns)

    View Slide

  56. module css3
    FLEXBOX

    View Slide

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

    View Slide

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

    View Slide

  59. compatibilité
    FLEXIBLE BOX
    10
    W3C Candidate Recommendation

    View Slide

  60. flexbox
    DÉMO
    › réordonnement de blocs (flexbox)

    View Slide

  61. module css3
    GRID LAYOUT

    View Slide

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

    View Slide

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

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

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

    View Slide

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

    View Slide

  67. grid layout
    DÉMOS
    › grille de mise en page simple (grid layout)
    › grille responsive complexe (grid layout)
    › mise en page adaptative (grid layout)

    View Slide

  68. module css3
    REGIONS

    View Slide

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

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



    View Slide

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

  71. CSS Regions est l avenir

    de la tELEportation...
    A FOND

    View Slide

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

    View Slide

  73. regions
    DÉMOS
    › Ah ben non, Chrome l’a laissé tomber depuis Chrome 34

    View Slide

  74. MYDEVICE.io

    View Slide

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

    View Slide

  76. utilisable aujourd’hui
    › SVG
    › Règle @viewport
    › Navigation Timing
    › touch events, pointer events
    › CSS3 multicolonnes
    › CSS3 Flexbox
    › JS matchMedia

    View Slide

  77. utilisable bientôt
    › Unités de viewport (vw, vh, vmin, vmax)
    › Unités de résolution (dpcm, dpmm, dppx)
    › Règle @supports
    › , srcset

    View Slide

  78. utilisable un beau jour
    › @media (pointer, hover, luminosity, script)
    › Battery API
    › CSS3 Grid Layout
    › CSS3 Regions

    View Slide

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

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

    View Slide

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

    View Slide

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