le futur du responsive web design
DESCRIPTION
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. Speaker : Raphael Goetter (Alsacréations)TRANSCRIPT
![Page 1: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/1.jpg)
le futur duRESPONSIVEWEB DESIGN
Microsoft TechDays 2014
![Page 2: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/2.jpg)
RAPHAËL GOETTER
photomontage : @diou
![Page 3: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/3.jpg)
WikiMedia : Man in a box - Keith Allison
Soyez Responsive qu ils disaient !’
![Page 4: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/4.jpg)
le futur desUSAGES
le futur desOBJETS
le futur desRESSOURCES
le futur desSTANDARDS
le futur desTECHNIQUES
![Page 5: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/5.jpg)
le futur desUSAGES
le futur desOBJETS
le futur desRESSOURCES
le futur desSTANDARDS
le futur desTECHNIQUES
trop long !
pas le temps !
oui mais non ! pfiouuu !
OK banco !
![Page 6: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/6.jpg)
SPÉCIFICATIONS ET FORMATS
FONCTIONNALITÉS ET ENVIRONNEMENT
L’AVENIR DU POSITIONNEMENT CSS
![Page 7: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/7.jpg)
SPÉCIFICATIONSet formats
![Page 8: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/8.jpg)
Je me suis faitbeau pour veniraux TechDays !
![Page 9: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/9.jpg)
SVGscalable
vectorgraphics
![Page 10: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/10.jpg)
PAS SVG SVG
![Page 11: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/11.jpg)
› Vectoriel
› Haute Def (« retina ») ready
› Simple à styler et modifier
› Idéal pour pictos, logos, etc.
![Page 12: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/12.jpg)
compatibilitéSVG
9 3.0
W3C Recommendation
![Page 13: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/13.jpg)
unités deVIEWPORT
![Page 14: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/14.jpg)
100vw
100vh
vw = largeur de fenêtre, vh = hauteur de fenêtre
![Page 15: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/15.jpg)
100vmax (aussi)
100vmax
vmin = valeur minimum, vmax = valeur maximum
![Page 16: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/16.jpg)
.kiwi {width : 80vw ;height : 80vh ;max-width : 100vmax ;max-height : 100vmin ;font-size : 3vw ;
}
![Page 17: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/17.jpg)
compatibilitéVIEWPORT UNITS
9 4.4
W3C Candidate Recommendation
![Page 18: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/18.jpg)
unités deRÉSOLUTION
![Page 19: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/19.jpg)
› dpipoints par pouce
MOI, j en AI PARCOURU ’ DPIMA BONNE DAME !
huhu
![Page 20: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/20.jpg)
› 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...
![Page 21: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/21.jpg)
@media (min-resolution : 2dppx) {div {background : url(concombre-big.jpg)}
}
@media (min-device-pixel-ratio : 2) {div {background : url(concombre-big.jpg)}
} Inventé par WebkitPropriétaireNon Standard
Standard
![Page 22: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/22.jpg)
compatibilitéRESOLUTION UNITS
W3C Candidate Recommendation
![Page 23: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/23.jpg)
règle-at@VIEWPORT
![Page 24: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/24.jpg)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
bla bla bla
![Page 25: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/25.jpg)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Inventé par ApplePropriétaireNon Standard
bla bla bla
![Page 26: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/26.jpg)
@viewport {width: device-width;zoom: 1;
}
Standard
![Page 27: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/27.jpg)
@media (orientation: portrait) {@viewport {width: device-width}
}@media (orientation: landscape) {
@viewport {width: device-height}}
![Page 28: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/28.jpg)
compatibilité@VIEWPORT
10
W3C Working Draft
![Page 29: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/29.jpg)
règle-at@SUPPORTS
![Page 30: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/30.jpg)
@supports ( display: flex) {.kiwi {display : flex;}
}
@supports not ( display: flex) {.kiwi {display : table-cell;}
}
![Page 31: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/31.jpg)
règle-at@SUPPORTS
4.4
W3C Candidate Recommendation
![Page 32: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/32.jpg)
formats d’imagesRESPONSIVE
![Page 33: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/33.jpg)
[concombre-big.png]
[concombre-small.png]
![Page 34: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/34.jpg)
[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
![Page 35: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/35.jpg)
[concombre-big.png] [concombre-small.png]
1024px
<img src="concombre-big.png" srcset="concombre-small.png 1024w" alt="" >
![Page 36: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/36.jpg)
compatibilité<picture>
bon ben voilà quoi...
![Page 37: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/37.jpg)
compatibilitésrcset
ouais OK d'accord...
2134
![Page 38: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/38.jpg)
partie 1DÉMOS
› logo du site knacss.com (SVG)
› police relative à la taille de fenêtre (vw unit)
› conserver le ratio d’une iframe (vmin unit)
![Page 39: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/39.jpg)
fonctionnalités etENVIRONNEMENT
![Page 40: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/40.jpg)
Mon environnementn est pas toujours’facile vivre...à
![Page 41: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/41.jpg)
s’adapter au« touch »
![Page 42: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/42.jpg)
mouse eventsclick
mousemovemousedown
mouseup
mouseover
![Page 43: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/43.jpg)
› Liés à la souris› Bien reconnus sur mobiles› (Par dépit)
mouse eventsclick
mousemovemousedown
mouseup
mouseover
![Page 44: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/44.jpg)
mouse eventstouchstart
touchend
touchmove
touch events
› Dédiés au touch (doigt)› Recommandation W3C› Bien reconnus sur mobiles (sauf IE)
click
mousemovemousedown
mouseup
mouseover
![Page 45: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/45.jpg)
mouse eventstouchstart
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
pointerenterpointerleave
click
mousemovemousedown
mouseup
mouseover
![Page 46: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/46.jpg)
s’adapter auDÉBIT
![Page 47: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/47.jpg)
› API Network Information› API Navigation Timing
mesure du chronométrage de la navigation
détection de la bande passante de l’appareil
![Page 48: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/48.jpg)
networkINFORMATION
var connection = navigator.connection;alert("Bande passante : " + connection.bandwidth + " MB/s");
![Page 49: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/49.jpg)
compatibilitéNETWORK INFORMATION
W3C Working Draft
![Page 50: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/50.jpg)
navigationTIMING
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
![Page 51: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/51.jpg)
compatibilitéNAVIGATION TIMING
W3C Recommendation
4.09
![Page 52: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/52.jpg)
le niveau deBATTERIE
![Page 53: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/53.jpg)
battery.onlevelchange = function() { yay = (battery.charging || battery.level > 0.25); if (yay) { alert( "Battery is OK." ); }}
![Page 54: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/54.jpg)
compatibilitéBATTERY API
W3C Candidate Recommendation
![Page 55: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/55.jpg)
media queriesCSS LEVEL 4
![Page 56: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/56.jpg)
› @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
![Page 57: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/57.jpg)
› @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
![Page 58: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/58.jpg)
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 !
![Page 59: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/59.jpg)
› @media (luminosity: dim)› @media (luminosity: normal)› @media (luminosity: washed)
environnement « normal »
environnement très clair
environnement sombreLUMINOSITY
![Page 60: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/60.jpg)
@media (luminosity : washed) {html {
filter: brightness(0.7) contrast(1.5);}
}
LUMINOSITY
![Page 61: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/61.jpg)
compatibilité@media CSS4
ah ben ça valait le coup...
![Page 63: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/63.jpg)
l’avenir duPOSITIONNEMENT CSS
![Page 64: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/64.jpg)
Le positionnement CSS3 de demain seraResponsive !
![Page 65: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/65.jpg)
module css3MULTICOLONNES
![Page 66: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/66.jpg)
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 { }
![Page 67: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/67.jpg)
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
![Page 68: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/68.jpg)
compatibilitéMULTICOLONNES
10
W3C Candidate Recommendation
![Page 69: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/69.jpg)
module css3FLEXBOX
![Page 70: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/70.jpg)
.parent {display: flex;
}
nav {width : 10em;} section {flex : 1;} .ads {width : 10em;}
![Page 71: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/71.jpg)
.parent {display: flex;
}
section {flex : 1; order : 2;}
![Page 72: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/72.jpg)
compatibilitéFLEXIBLE BOX
10
W3C Candidate Recommendation
![Page 73: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/73.jpg)
module css3GRID LAYOUT
![Page 74: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/74.jpg)
.parent {display: grid;grid-template-columns: 200px 1fr ;
}
nav {grid-column: 1;} section {grid-column: 2;}
![Page 75: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/75.jpg)
.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;
}
![Page 76: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/76.jpg)
.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 ;
}
![Page 77: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/77.jpg)
.parent { grid-template-columns: (nav) (section) ; grid-template-rows: (article) (aside) ;}
.parent { grid-template-rows: (section) (article) (aside) (nav) ;}
![Page 78: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/78.jpg)
compatibilitéGRID LAYOUT
10\o/
W3C Working Draft
![Page 79: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/79.jpg)
module css3REGIONS
![Page 80: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/80.jpg)
Lorem Elsass ipsum réchimeamet non Choucrouteknack hopla. <div class="first">
Lorem Elsass ipsum réchime amet non Choucroute knack hopla.
</div>
<div class="second">
</div>
![Page 81: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/81.jpg)
Lorem Elsass ipsum réchimeamet non Choucrouteknack 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>
![Page 82: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/82.jpg)
CSS Regions est l avenir ’de la tELEportation...
A FOND‘
![Page 83: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/83.jpg)
compatibilitéREGIONS
10(iframe)
flag
W3C Working Draft
7
![Page 84: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/84.jpg)
partie 3DÉ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)
![Page 86: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/86.jpg)
bon, on en est où ?
RÉSUMÉ
![Page 87: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/87.jpg)
SVGSVGmatchMedia()matchMedia()
vw, vh, vw, vh, vmin, vmin, vmaxvmax
dpcm, dpcm, dpmm, dpmm, dppxdppx
pointer pointer eventsevents
@viewport@viewport@supports@supports
<picture><picture>
srcsetsrcset
network network informationinformation
flexbox flexbox layoutlayout
navigation navigation timingtiming
battery battery APIAPImediamedia
queries queries CSS4CSS4
multicolumnsmulticolumns
grid grid layoutlayout
regions,regions,shapesshapes
bien STIMULANT, le futur du
responsive sera
light eventslight events
![Page 88: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/88.jpg)
Il marche pas trEs bienton nouveau
Windows Phone, chEri
![Page 90: Le futur du Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022060110/5560b694d8b42aef3b8b49fc/html5/thumbnails/90.jpg)
MERCI, BISOUS
pictos› Human Finger Gesture - Patrick van Tilborg› Phone icons – Cemagraphics› Old school - Babasse› Typicons, Icomoon, Font Awesome
raphaël goetterraphaël goetter
www.alsacreations.frwww.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