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