le futur duRESPONSIVEWEB DESIGN
Microsoft TechDays 2014
RAPHAËL GOETTER
photomontage : @diou
WikiMedia : Man in a box - Keith Allison
Soyez Responsive qu ils disaient !’
le futur desUSAGES
le futur desOBJETS
le futur desRESSOURCES
le futur desSTANDARDS
le futur desTECHNIQUES
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 !
SPÉCIFICATIONS ET FORMATS
FONCTIONNALITÉS ET ENVIRONNEMENT
L’AVENIR DU POSITIONNEMENT CSS
SPÉCIFICATIONSet formats
Je me suis faitbeau pour veniraux TechDays !
SVGscalable
vectorgraphics
PAS SVG SVG
› Vectoriel
› Haute Def (« retina ») ready
› Simple à styler et modifier
› Idéal pour pictos, logos, etc.
compatibilitéSVG
9 3.0
W3C Recommendation
unités deVIEWPORT
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 4.4
W3C Candidate Recommendation
unités deRÉSOLUTION
› dpipoints par pouce
MOI, j en AI PARCOURU ’ DPIMA BONNE DAME !
huhu
› 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...
@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
compatibilitéRESOLUTION UNITS
W3C Candidate Recommendation
règle-at@VIEWPORT
<meta name="viewport" content="width=device-width, initial-scale=1.0">
bla bla bla
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Inventé par ApplePropriétaireNon Standard
bla bla bla
@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
règle-at@SUPPORTS
@supports ( display: flex) {.kiwi {display : flex;}
}
@supports not ( display: flex) {.kiwi {display : table-cell;}
}
règle-at@SUPPORTS
4.4
W3C Candidate Recommendation
formats d’imagesRESPONSIVE
[concombre-big.png]
[concombre-small.png]
[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
[concombre-big.png] [concombre-small.png]
1024px
<img src="concombre-big.png" srcset="concombre-small.png 1024w" alt="" >
compatibilité<picture>
bon ben voilà quoi...
compatibilitésrcset
ouais OK d'accord...
2134
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)
fonctionnalités etENVIRONNEMENT
Mon environnementn est pas toujours’facile vivre...à
s’adapter au« touch »
mouse eventsclick
mousemovemousedown
mouseup
mouseover
› Liés à la souris› Bien reconnus sur mobiles› (Par dépit)
mouse eventsclick
mousemovemousedown
mouseup
mouseover
mouse eventstouchstart
touchend
touchmove
touch events
› Dédiés au touch (doigt)› Recommandation W3C› Bien reconnus sur mobiles (sauf IE)
click
mousemovemousedown
mouseup
mouseover
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
s’adapter auDÉBIT
› API Network Information› API Navigation Timing
mesure du chronométrage de la navigation
détection de la bande passante de l’appareil
networkINFORMATION
var connection = navigator.connection;alert("Bande passante : " + connection.bandwidth + " MB/s");
compatibilitéNETWORK INFORMATION
W3C Working Draft
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
compatibilitéNAVIGATION TIMING
W3C Recommendation
4.09
le niveau deBATTERIE
battery.onlevelchange = function() { yay = (battery.charging || battery.level > 0.25); if (yay) { alert( "Battery is OK." ); }}
compatibilitéBATTERY API
W3C Candidate Recommendation
media queriesCSS LEVEL 4
› @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
› @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
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 !
› @media (luminosity: dim)› @media (luminosity: normal)› @media (luminosity: washed)
environnement « normal »
environnement très clair
environnement sombreLUMINOSITY
@media (luminosity : washed) {html {
filter: brightness(0.7) contrast(1.5);}
}
LUMINOSITY
compatibilité@media CSS4
ah ben ça valait le coup...
l’avenir duPOSITIONNEMENT CSS
Le positionnement CSS3 de demain seraResponsive !
module css3MULTICOLONNES
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 { }
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
compatibilitéMULTICOLONNES
10
W3C Candidate Recommendation
module css3FLEXBOX
.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
module css3GRID 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
module css3REGIONS
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>
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>
CSS Regions est l avenir ’de la tELEportation...
A FOND‘
compatibilitéREGIONS
10(iframe)
flag
W3C Working Draft
7
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)
MYDEVICE.io
bon, on en est où ?
RÉSUMÉ
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
Il marche pas trEs bienton nouveau
Windows Phone, chEri
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