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

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

April 25, 2014
Tweet

Transcript

  1. le futur du RESPONSIVE WEB DESIGN AgoraCMS 2014

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

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

    › c’est complexe
  4. <picture> srcset RESPONSIVE c’est instable <meta viewport> @viewport

  5. RESPONSIVE c’est une jungle

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

  7. WikiMedia : Man in a box - Keith Allison Soyez

    Responsive qu ils disaient ! ’
  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 !
  9. SPÉCIFICATIONS ET FORMATS FONCTIONNALITÉS D’ENVIRONNEMENT L’AVENIR DU POSITIONNEMENT CSS

  10. SPÉCIFICATIONS et formats

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

  12. SVG scalable vector graphics

  13. PAS SVG SVG

  14. › Vectoriel › Haute Def (« retina ») ready ›

    Simple à styler et modifier › Idéal pour pictos, logos, etc.
  15. compatibilité SVG 9 3.0 W3C Recommendation

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

  17. unités de VIEWPORT

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

    de fenêtre
  19. 100vmax (aussi) 100vmax vmin = valeur minimum, vmax = valeur

    maximum
  20. .kiwi { width : 80vw ; height : 80vh ;

    max-width : 100vmax ; max-height : 100vmin ; font-size : 3vw ; }
  21. compatibilité VIEWPORT UNITS 9 4.4 W3C Candidate Recommendation

  22. viewport units DÉMOS › police relative à la taille de

    fenêtre (vw unit) › conserver le ratio d’une iframe (vmin unit)
  23. règle css @VIEWPORT

  24. <meta name="viewport" content="width=device-width, initia bla bla bla

  25. <meta name="viewport" content="width=device-width, initia Inventé par Apple Propriétaire Non Standard

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

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

    landscape) { @viewport {width: device-height} }
  28. compatibilité @VIEWPORT 10 W3C Working Draft

  29. formats d’images RESPONSIVE

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

  31. [concombre-big.png] [concombre-small.png] <picture> <source media="(min-width: 1024px)" src="concombre-big.png"> <source media="(max-width: 1023px)"

    src="concombre-small.png"> <img src="concombre-small.png" alt="" width="640" height="480"> </picture> 1024px
  32. [concombre-big.png] [concombre-small.png] 1024px <img src="concombre-big.png" srcset="concombre-small.png 1024w" alt="" >

  33. compatibilité <picture> bon ben voilà quoi...

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

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

  36. fonctionnalités et ENVIRONNEMENT

  37. Mon environnement n est pas toujours ’ facile vivre... à

  38. s’adapter au DÉBIT

  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
  40. compatibilité NAVIGATION TIMING W3C Recommendation 4.0 9

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

  42. media queries CSS LEVEL 4

  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
  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
  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 !
  46. › @media (luminosity: dim) › @media (luminosity: normal) › @media

    (luminosity: washed) environnement « normal » environnement très clair environnement sombre LUMINOSITY
  47. @media (luminosity : washed) { html { filter: brightness(0.7) contrast(1.5);

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

  49. l’avenir du POSITIONNEMENT CSS

  50. Le positionnement CSS3 de demain sera Responsive !

  51. module css3 MULTICOLONNES

  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 { }
  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
  54. compatibilité MULTICOLONNES 10 W3C Candidate Recommendation

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

  56. module css3 FLEXBOX

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

    {flex : 1;} .ads {width : 10em;}
  58. .parent { display: flex; } section {flex : 1; order

    : 2;}
  59. compatibilité FLEXIBLE BOX 10 W3C Candidate Recommendation

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

  61. module css3 GRID LAYOUT

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

    {grid-column: 1;} section {grid-column: 2;}
  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; }
  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 ; }
  65. .parent { grid-template-columns: (nav) (section) ; grid-template-rows: (article) (aside) ;

    } .parent { grid-template-rows: (section) (article) (aside) (nav) ; }
  66. compatibilité GRID LAYOUT 10 \o/ W3C Working Draft

  67. grid layout DÉMOS › grille de mise en page simple

    (grid layout) › grille responsive complexe (grid layout) › mise en page adaptative (grid layout)
  68. module css3 REGIONS

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

    class="first"> Lorem Elsass ipsum réchime amet non Choucroute knack hopla. </div> <div class="second"> </div>
  70. Lorem Elsass ipsum réchime amet non Choucroute knack hopla. .first

    { flow-into: machin;} .second { flow-from: machin;} <div class="first"> Lorem Elsass ipsum réchime amet non Choucroute knack hopla. </div> <div class="second"> </div>
  71. CSS Regions est l avenir ’ de la tELEportation... A

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

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

    depuis Chrome 34
  74. MYDEVICE.io

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

  76. utilisable aujourd’hui › SVG › Règle @viewport › Navigation Timing

    › touch events, pointer events › CSS3 multicolonnes › CSS3 Flexbox › JS matchMedia
  77. utilisable bientôt › Unités de viewport (vw, vh, vmin, vmax)

    › Unités de résolution (dpcm, dpmm, dppx) › Règle @supports › <picture>, srcset
  78. utilisable un beau jour › @media (pointer, hover, luminosity, script)

    › Battery API › CSS3 Grid Layout › CSS3 Regions
  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 <picture> <picture> 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
  80. Il marche pas trEs bien ton nouveau Windows Phone, chEri

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

  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