le futur du RESPONSIVE WEB DESIGN AgoraCMS 2014
RAPHAËL GOETTER (odieux) photomontage : @diou
RESPONSIVE aujourd hui? c est instable c est une jungle c est complexe
RESPONSIVE c est instable <picture> <meta viewport> @viewport srcset
RESPONSIVE c est une jungle
RESPONSIVE c est complexe Stéphanie Walter, sur inspiration de Brad Frost
Soyez Responsive qu ils disaient! WikiMedia : Man in a box - Keith Allison
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!
SPÉCIFICATIONS ET FORMATS FONCTIONNALITÉS D ENVIRONNEMENT L AVENIR DU POSITIONNEMENT CSS
SPÉCIFICATIONS et formats
Je me suis fait beau pour venir CHEZ AgoraCMS!
SVG scalable vector graphics
G V S PAS SVG
Vectoriel Haute Def («retina») ready Simple à styler et modifier Idéal pour pictos, logos, etc.
compatibilité SVG 9 W3C Recommendation 3.0
format svg DÉMOS knacss.com (logo vecto)
unités de VIEWPORT
100vw 100vh vw = largeur de fenêtre, vh = hauteur de fenêtre
100vmax (aussi) 100vmax vmin = valeur minimum, vmax = valeur maximum
.kiwi { width : 80vw ; height : 80vh ; max-width : 100vmax ; max-height : 100vmin ; font-size : 3vw ; }
compatibilité VIEWPORT UNITS 9 W3C Candidate Recommendation 4.4
viewport units DÉMOS police relative à la taille de fenêtre (vw unit) conserver le ratio d une iframe (vmin unit)
règle css @VIEWPORT
<meta name="viewport" content="width=device-width, initia bla bla bla
<meta name="viewport" content="width=device-width, initia bla bla bla Inventé par Apple Propriétaire Non Standard
@viewport { width: device-width; zoom: 1; } Standard
@media (orientation: portrait) { @viewport {width: device-width} } @media (orientation: landscape) { @viewport {width: device-height} }
compatibilité @VIEWPORT 10 W3C Working Draft
formats d images RESPONSIVE
[concombre-small.png] [concombre-big.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> [concombre-small.png] [concombre-big.png] 1024px
<img src="concombre-big.png" srcset="concombre-small.png 1024w" alt="" > [concombre-small.png] [concombre-big.png] 1024px
compatibilité <picture> bon ben voilà quoi...
compatibilité srcset 34 21 ouais OK d'accord...
srcset DÉMO chargement conditionnel d image (Alsacreations)
fonctionnalités et ENVIRONNEMENT
Mon environnement n est pas toujours facile à vivre...
s adapter au DÉBIT
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! }
compatibilité NAVIGATION TIMING 9 W3C Recommendation 4.0
navigation timing DÉMO s adapter au débit (Navigation Timing)
media queries CSS LEVEL 4
type de dispositif de pointage @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
R E T N I O P pas de dispositif de pointage @media (pointer: none) @media (pointer: coarse) @media (pointer: fine) pointage limité (tablette, smartphone tactile) pointage précis (souris, stylet)
R E T N I O P @media (pointer : coarse) and not (pointer : fine) {.button {font-size : larger} } oh oh oui oui clique-moi! clique-moi! oh oui touch-moi!
Y T I S O N I LUM environnement sombre @media (luminosity: dim) @media (luminosity: normal) environnement «normal» @media (luminosity: washed) environnement très clair
LU Y T I S O N I M @media (luminosity : washed) { html { filter: brightness(0.7) contrast(1.5); } }
compatibilité @media CSS4 ah ben ça valait le coup...
l avenir du POSITIONNEMENT CSS
Le positionnement CSS3 de demain sera Responsive!
module css3 MULTICOLONNES
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!
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!
compatibilité MULTICOLONNES 10 W3C Candidate Recommendation
multicolonnes DÉMO navigation responsive (multicolumns)
module css3 FLEXBOX
.parent { display: flex; } nav {width : 10em;} section {flex : 1;}.ads {width : 10em;}
.parent { display: flex; } section {flex : 1; order : 2;}
compatibilité FLEXIBLE BOX 10 W3C Candidate Recommendation
flexbox DÉMO réordonnement de blocs (flexbox)
module css3 GRID LAYOUT
.parent { display: grid; grid-template-columns: 200px 1fr ; } nav {grid-column: 1;} section {grid-column: 2;}
.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; }
.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 ; }
.parent { grid-template-columns: (nav) (section) ; grid-template-rows: (article) (aside) ; }.parent { grid-template-rows: (section) (article) (aside) (nav) ; }
compatibilité GRID LAYOUT 10 \o/ W3C Working Draft
grid layout DÉMOS grille de mise en page simple (grid layout) grille responsive complexe (grid layout) mise en page adaptative (grid layout)
module css3 REGIONS
<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.
.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.
CSS Regions est l avenir de la teleportation... A FOND
compatibilité REGIONS flag 10 (oupas) (iframe) W3C Working Draft 7
regions DÉMOS Ah ben non, Chrome l a laissé tomber depuis Chrome 34
MYDEVICE.io
bon, on en est où? RÉSUMÉ
utilisable aujourd hui SVG Règle @viewport Navigation Timing touch events, pointer events CSS3 multicolonnes CSS3 Flexbox JS matchmedia
utilisable bientôt Unités de viewport (vw, vh, vmin, vmax) Unités de résolution (dpcm, dpmm, dppx) Règle @supports <picture>, srcset
utilisable un beau jour @media (pointer, hover, luminosity, script) Battery API CSS3 Grid Layout CSS3 Regions
SVG vw, vh, vmin, vmax matchmedia() dpcm, dpmm, dppx srcset @viewport @supports <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
Il marche pas tres bien ton nouveau Windows Phone, cheri
hey, on peut jouer aussi? DÉMOS www.kiwi.gg/mstd2014
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 www.kiwi.gg/mstd2014 raphaël goetter www.alsacreations.fr @goetter