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