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

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