Slide 1
Slide 1 text
le futur du
RESPONSIVE
WEB DESIGN
AgoraCMS 2014
Slide 2
Slide 2 text
RAPHAËL GOETTER
(odieux) photomontage : @diou
Slide 3
Slide 3 text
RESPONSIVE
aujourd’hui ?
› c’est instable
› c’est une jungle
› c’est complexe
Slide 4
Slide 4 text
srcset
RESPONSIVE
c’est instable
@viewport
Slide 5
Slide 5 text
RESPONSIVE
c’est une jungle
Slide 6
Slide 6 text
RESPONSIVE
c’est complexe
Stéphanie Walter, sur inspiration de Brad Frost
Slide 7
Slide 7 text
WikiMedia : Man in a box - Keith Allison
Soyez Responsive
qu ils disaient !
’
Slide 8
Slide 8 text
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 !
Slide 9
Slide 9 text
SPÉCIFICATIONS ET FORMATS
FONCTIONNALITÉS D’ENVIRONNEMENT
L’AVENIR DU POSITIONNEMENT CSS
Slide 10
Slide 10 text
SPÉCIFICATIONS
et formats
Slide 11
Slide 11 text
Je me suis fait
beau pour venir
CHEZ AgoraCMS !
Slide 12
Slide 12 text
SVG
scalable
vector
graphics
Slide 13
Slide 13 text
PAS SVG SVG
Slide 14
Slide 14 text
› Vectoriel
› Haute Def (« retina ») ready
› Simple à styler et modifier
› Idéal pour pictos, logos, etc.
Slide 15
Slide 15 text
compatibilité
SVG
9 3.0
W3C Recommendation
Slide 16
Slide 16 text
format svg
DÉMOS
› knacss.com (logo vecto)
Slide 17
Slide 17 text
unités de
VIEWPORT
Slide 18
Slide 18 text
100vw
100vh
vw = largeur de fenêtre, vh = hauteur de fenêtre
Slide 19
Slide 19 text
100vmax (aussi)
100vmax
vmin = valeur minimum, vmax = valeur maximum
Slide 20
Slide 20 text
.kiwi {
width : 80vw ;
height : 80vh ;
max-width : 100vmax ;
max-height : 100vmin ;
font-size : 3vw ;
}
Slide 21
Slide 21 text
compatibilité
VIEWPORT UNITS
9 4.4
W3C Candidate Recommendation
Slide 22
Slide 22 text
viewport units
DÉMOS
› police relative à la taille de fenêtre (vw unit)
› conserver le ratio d’une iframe (vmin unit)
Slide 23
Slide 23 text
règle css
@VIEWPORT
Slide 24
Slide 24 text
Slide 25
Slide 25 text
Slide 26
Slide 26 text
@viewport {
width: device-width;
zoom: 1;
}
Standard
Slide 27
Slide 27 text
@media (orientation: portrait) {
@viewport {width: device-width}
}
@media (orientation: landscape) {
@viewport {width: device-height}
}
Slide 28
Slide 28 text
compatibilité
@VIEWPORT
10
W3C Working Draft
Slide 29
Slide 29 text
formats d’images
RESPONSIVE
Slide 30
Slide 30 text
[concombre-big.png]
[concombre-small.png]
Slide 31
Slide 31 text
[concombre-big.png]
[concombre-small.png]
1024px
1024px
Slide 32
Slide 32 text
[concombre-big.png]
[concombre-small.png]
1024px
Slide 33
Slide 33 text
compatibilité
bon ben voilà quoi...
Slide 34
Slide 34 text
compatibilité
srcset
ouais OK d'accord...
21
34
Slide 35
Slide 35 text
srcset
DÉMO
› chargement conditionnel d’image (Alsacreations)
Slide 36
Slide 36 text
fonctionnalités et
ENVIRONNEMENT
Slide 37
Slide 37 text
Mon environnement
n est pas toujours
’
facile vivre...
à
Slide 38
Slide 38 text
s’adapter au
DÉBIT
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
compatibilité
NAVIGATION TIMING
W3C Recommendation
4.0
9
Slide 41
Slide 41 text
navigation timing
DÉMO
› s’adapter au débit (Navigation Timing)
Slide 42
Slide 42 text
media queries
CSS LEVEL 4
Slide 43
Slide 43 text
› @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
Slide 44
Slide 44 text
› @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
Slide 45
Slide 45 text
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 !
Slide 46
Slide 46 text
› @media (luminosity: dim)
› @media (luminosity: normal)
› @media (luminosity: washed)
environnement
« normal »
environnement très
clair
environnement sombre
LUMINOSITY
Slide 47
Slide 47 text
@media (luminosity : washed) {
html {
filter: brightness(0.7) contrast(1.5);
}
}
LUMINOSITY
Slide 48
Slide 48 text
compatibilité
@media CSS4
ah ben ça valait le coup...
Slide 49
Slide 49 text
l’avenir du
POSITIONNEMENT CSS
Slide 50
Slide 50 text
Le positionnement
CSS3 de demain sera
Responsive !
Slide 51
Slide 51 text
module css3
MULTICOLONNES
Slide 52
Slide 52 text
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 { }
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
compatibilité
MULTICOLONNES
10
W3C Candidate Recommendation
Slide 55
Slide 55 text
multicolonnes
DÉMO
› navigation responsive (multicolumns)
Slide 56
Slide 56 text
module css3
FLEXBOX
Slide 57
Slide 57 text
.parent {
display: flex;
}
nav {width : 10em;} section {flex : 1;} .ads {width : 10em;}
Slide 58
Slide 58 text
.parent {
display: flex;
}
section {flex : 1; order : 2;}
Slide 59
Slide 59 text
compatibilité
FLEXIBLE BOX
10
W3C Candidate Recommendation
Slide 60
Slide 60 text
flexbox
DÉMO
› réordonnement de blocs (flexbox)
Slide 61
Slide 61 text
module css3
GRID LAYOUT
Slide 62
Slide 62 text
.parent {
display: grid;
grid-template-columns: 200px 1fr ;
}
nav {grid-column: 1;} section {grid-column: 2;}
Slide 63
Slide 63 text
.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;
}
Slide 64
Slide 64 text
.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 ;
}
Slide 65
Slide 65 text
.parent {
grid-template-columns: (nav) (section) ;
grid-template-rows: (article) (aside) ;
}
.parent {
grid-template-rows:
(section) (article) (aside) (nav) ;
}
Slide 66
Slide 66 text
compatibilité
GRID LAYOUT
10
\o/
W3C Working Draft
Slide 67
Slide 67 text
grid layout
DÉMOS
› grille de mise en page simple (grid layout)
› grille responsive complexe (grid layout)
› mise en page adaptative (grid layout)
Slide 68
Slide 68 text
module css3
REGIONS
Slide 69
Slide 69 text
Lorem Elsass ipsum réchime
amet non Choucroute
knack hopla.
Lorem Elsass ipsum réchime amet non
Choucroute knack hopla.
Slide 70
Slide 70 text
Lorem Elsass ipsum réchime
amet non Choucroute
knack hopla.
.first { flow-into: machin;}
.second { flow-from: machin;}
Lorem Elsass ipsum réchime amet non
Choucroute knack hopla.
Slide 71
Slide 71 text
CSS Regions est l avenir
’
de la tELEportation...
A FOND
‘
Slide 72
Slide 72 text
compatibilité
REGIONS
10
(iframe)
flag
(oupas)
W3C Working Draft
7
Slide 73
Slide 73 text
regions
DÉMOS
› Ah ben non, Chrome l’a laissé tomber depuis Chrome 34
Slide 74
Slide 74 text
MYDEVICE.io
Slide 75
Slide 75 text
bon, on en est où ?
RÉSUMÉ
Slide 76
Slide 76 text
utilisable aujourd’hui
› SVG
› Règle @viewport
› Navigation Timing
› touch events, pointer events
› CSS3 multicolonnes
› CSS3 Flexbox
› JS matchMedia
Slide 77
Slide 77 text
utilisable bientôt
› Unités de viewport (vw, vh, vmin, vmax)
› Unités de résolution (dpcm, dpmm, dppx)
› Règle @supports
› , srcset
Slide 78
Slide 78 text
utilisable un beau jour
› @media (pointer, hover, luminosity, script)
› Battery API
› CSS3 Grid Layout
› CSS3 Regions
Slide 79
Slide 79 text
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
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
Slide 80
Slide 80 text
Il marche pas trEs bien
ton nouveau
Windows Phone, chEri
Slide 81
Slide 81 text
hey, on peut jouer aussi ?
DÉMOS
www.kiwi.gg/mstd2014
Slide 82
Slide 82 text
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