Le futur du Responsive Web Design

Adf4ff2212aea06456ca3c3bca95c0db?s=47 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.

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

February 11, 2014
Tweet

Transcript

  1. le futur du RESPONSIVE WEB DESIGN Microsoft TechDays 2014

  2. RAPHAËL GOETTER photomontage : @diou

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

    Responsive qu ils disaient ! ’
  4. le futur des USAGES le futur des OBJETS le futur

    des RESSOURCES le futur des STANDARDS le futur des TECHNIQUES
  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 !
  6. SPÉCIFICATIONS ET FORMATS FONCTIONNALITÉS ET ENVIRONNEMENT L’AVENIR DU POSITIONNEMENT CSS

  7. SPÉCIFICATIONS et formats

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

  9. SVG scalable vector graphics

  10. PAS SVG SVG

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

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

  13. unités de VIEWPORT

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

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

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

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

  18. unités de RÉSOLUTION

  19. › dpi points par pouce MOI, j en AI PARCOURU

    ’ DPI MA BONNE DAME ! huhu
  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...
  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
  22. compatibilité RESOLUTION UNITS W3C Candidate Recommendation

  23. règle-at @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. règle-at @SUPPORTS

  30. @supports ( display: flex) { .kiwi {display : flex;} }

    @supports not ( display: flex) { .kiwi {display : table-cell;} }
  31. règle-at @SUPPORTS 4.4 W3C Candidate Recommendation

  32. formats d’images RESPONSIVE

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

  34. [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
  35. [concombre-big.png] [concombre-small.png] 1024px <img src="concombre-big.png" srcset="concombre-small.png 1024w" alt="" >

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

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

  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)
  39. fonctionnalités et ENVIRONNEMENT

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

  41. s’adapter au « touch »

  42. mouse events click mousemove mousedown mouseup mouseover

  43. › Liés à la souris › Bien reconnus sur mobiles

    › (Par dépit) mouse events click mousemove mousedown mouseup mouseover
  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
  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
  46. s’adapter au DÉBIT

  47. › API Network Information › API Navigation Timing mesure du

    chronométrage de la navigation détection de la bande passante de l’appareil
  48. network INFORMATION var connection = navigator.connection; alert("Bande passante : "

    + connection.bandwidth + " MB/s");
  49. compatibilité NETWORK INFORMATION W3C Working Draft

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

  52. le niveau de BATTERIE

  53. battery.onlevelchange = function() { yay = (battery.charging || battery.level >

    0.25); if (yay) { alert( "Battery is OK." ); } }
  54. compatibilité BATTERY API W3C Candidate Recommendation

  55. media queries CSS LEVEL 4

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

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

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

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

  63. l’avenir du POSITIONNEMENT CSS

  64. Le positionnement CSS3 de demain sera Responsive !

  65. module css3 MULTICOLONNES

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

  69. module css3 FLEXBOX

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

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

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

  73. module css3 GRID LAYOUT

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

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

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

  79. module css3 REGIONS

  80. 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>
  81. 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>
  82. CSS Regions est l avenir ’ de la tELEportation... A

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

  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)
  85. MYDEVICE.io

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

  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 <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
  88. Il marche pas trEs bien ton nouveau Windows Phone, chEri

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

  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