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.

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