le futur du RESPONSIVE WEB DESIGN

Transcription

1 le futur du RESPONSIVE WEB DESIGN AgoraCMS 2014

2 RAPHAËL GOETTER (odieux) photomontage

3 RESPONSIVE aujourd hui? c est instable c est une jungle c est complexe

4 RESPONSIVE c est instable <picture> <meta srcset

5 RESPONSIVE c est une jungle

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

7 Soyez Responsive qu ils disaient! WikiMedia : Man in a box - Keith Allison

8 le futur des USAGES le futur des trop long! RESSOURCES oui mais non! le futur des pas le temps! OBJETS le futur des TECHNIQUES le futur des STANDARDS 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 G V S PAS SVG

14 Vectoriel Haute Def («retina») ready Simple à styler et modifier Idéal pour pictos, logos, etc.

15 compatibilité SVG 9 W3C Recommendation 3.0

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 W3C Candidate Recommendation 4.4

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

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

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

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

27 @media (orientation: portrait) {width: device-width} (orientation: landscape) {width: device-height} }

28 10 W3C Working Draft

29 formats d images RESPONSIVE

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

31 <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> [concombre-small.png] [concombre-big.png] 1024px

32 <img src="concombre-big.png" srcset="concombre-small.png 1024w" alt="" > [concombre-small.png] [concombre-big.png] 1024px

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

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

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; requête au serveur réception 1er octet if (request_duration <= 700) { YAY! Ça dépote! }

40 compatibilité NAVIGATION TIMING 9 W3C Recommendation 4.0

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

42 media queries CSS LEVEL 4

43 type de dispositif de (script) support ou non de l'événement de survol mesure de la luminosité ambiante support ou non de JavaScript

44 R E T N I O P pas de dispositif de (pointer: (pointer: (pointer: fine) pointage limité (tablette, smartphone tactile) pointage précis (souris, stylet)

45 R E T N I O (pointer : coarse) and not (pointer : fine) {.button {font-size : larger} } oh oh oui oui clique-moi! clique-moi! oh oui touch-moi!

46 Y T I S O N I LUM environnement (luminosity: (luminosity: normal) environnement (luminosity: washed) environnement très clair

47 LU Y T I S O N I (luminosity : washed) { html { filter: brightness(0.7) contrast(1.5); } }

48 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 p{} 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!

53 p { columns : 3 } 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!

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 <div class="first"> Lorem Elsass ipsum réchime amet non Choucroute knack hopla. </div> <div class="second"> </div> Lorem Elsass ipsum réchime amet non Choucroute knack hopla.

70 .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> Lorem Elsass ipsum réchime amet non Choucroute knack hopla.

71 CSS Regions est l avenir de la teleportation... A FOND

72 compatibilité REGIONS flag 10 (oupas) (iframe) 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 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) <picture>, srcset

78 utilisable un beau (pointer, hover, luminosity, script) Battery API CSS3 Grid Layout CSS3 Regions

79 SVG vw, vh, vmin, vmax matchmedia() dpcm, dpmm, <picture> pointer events navigation timing network information multicolumns battery light events media API flexbox queries regions, layout CSS4 grid shapes layout bien STIMULANT, le futur du responsive sera

80 Il marche pas tres bien ton nouveau Windows Phone, cheri

81 hey, on peut jouer aussi? DÉMOS

82 MERCI, BISOUS pictos Human Finger Gesture - Patrick van Tilborg Phone icons Cemagraphics Old school - Babasse Typicons, Icomoon, Font Awesome polices PT Sans - Paratype Delicious Heavy - Jos Buivenga KG always a good time - Kimberly Geswein démos + slides raphaël goetter