Slide 1
Slide 1 text
le futur du
RESPONSIVE
WEB DESIGN
Microsoft TechDays 2014
Slide 2
Slide 2 text
RAPHAËL GOETTER
photomontage : @diou
Slide 3
Slide 3 text
WikiMedia : Man in a box - Keith Allison
Soyez Responsive
qu ils disaient !
’
Slide 4
Slide 4 text
le futur des
USAGES
le futur des
OBJETS
le futur des
RESSOURCES
le futur des
STANDARDS
le futur des
TECHNIQUES
Slide 5
Slide 5 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 6
Slide 6 text
SPÉCIFICATIONS ET FORMATS
FONCTIONNALITÉS ET ENVIRONNEMENT
L’AVENIR DU POSITIONNEMENT CSS
Slide 7
Slide 7 text
SPÉCIFICATIONS
et formats
Slide 8
Slide 8 text
Je me suis fait
beau pour venir
aux TechDays !
Slide 9
Slide 9 text
SVG
scalable
vector
graphics
Slide 10
Slide 10 text
PAS SVG SVG
Slide 11
Slide 11 text
› Vectoriel
› Haute Def (« retina ») ready
› Simple à styler et modifier
› Idéal pour pictos, logos, etc.
Slide 12
Slide 12 text
compatibilité
SVG
9 3.0
W3C Recommendation
Slide 13
Slide 13 text
unités de
VIEWPORT
Slide 14
Slide 14 text
100vw
100vh
vw = largeur de fenêtre, vh = hauteur de fenêtre
Slide 15
Slide 15 text
100vmax (aussi)
100vmax
vmin = valeur minimum, vmax = valeur maximum
Slide 16
Slide 16 text
.kiwi {
width : 80vw ;
height : 80vh ;
max-width : 100vmax ;
max-height : 100vmin ;
font-size : 3vw ;
}
Slide 17
Slide 17 text
compatibilité
VIEWPORT UNITS
9 4.4
W3C Candidate Recommendation
Slide 18
Slide 18 text
unités de
RÉSOLUTION
Slide 19
Slide 19 text
› dpi
points par pouce
MOI, j en AI PARCOURU
’ DPI
MA BONNE DAME !
huhu
Slide 20
Slide 20 text
› 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...
Slide 21
Slide 21 text
@media (min-resolution : 2dppx) {
div {
background : url(concombre-big.jpg)
}
}
@media (min-device-pixel-ratio : 2) {
div {
background : url(concombre-big.jpg)
}
}
Inventé par Webkit
Propriétaire
Non Standard
Standard
Slide 22
Slide 22 text
compatibilité
RESOLUTION UNITS
W3C Candidate Recommendation
Slide 23
Slide 23 text
règle-at
@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
règle-at
@SUPPORTS
Slide 30
Slide 30 text
@supports ( display: flex) {
.kiwi {display : flex;}
}
@supports not ( display: flex) {
.kiwi {display : table-cell;}
}
Slide 31
Slide 31 text
règle-at
@SUPPORTS
4.4
W3C Candidate Recommendation
Slide 32
Slide 32 text
formats d’images
RESPONSIVE
Slide 33
Slide 33 text
[concombre-big.png]
[concombre-small.png]
Slide 34
Slide 34 text
[concombre-big.png]
[concombre-small.png]
1024px
1024px
Slide 35
Slide 35 text
[concombre-big.png]
[concombre-small.png]
1024px
Slide 36
Slide 36 text
compatibilité
bon ben voilà quoi...
Slide 37
Slide 37 text
compatibilité
srcset
ouais OK d'accord...
21
34
Slide 38
Slide 38 text
partie 1
DÉMOS
› logo du site knacss.com (SVG)
› police relative à la taille de fenêtre (vw unit)
› conserver le ratio d’une iframe (vmin unit)
Slide 39
Slide 39 text
fonctionnalités et
ENVIRONNEMENT
Slide 40
Slide 40 text
Mon environnement
n est pas toujours
’
facile vivre...
à
Slide 41
Slide 41 text
s’adapter au
« touch »
Slide 42
Slide 42 text
mouse events
click
mousemove
mousedown
mouseup
mouseover
Slide 43
Slide 43 text
› Liés à la souris
› Bien reconnus sur mobiles
› (Par dépit)
mouse events
click
mousemove
mousedown
mouseup
mouseover
Slide 44
Slide 44 text
mouse events
touchstart
touchend
touchmove
touch events
› Dédiés au touch (doigt)
› Recommandation W3C
› Bien reconnus sur mobiles (sauf IE)
click
mousemove
mousedown
mouseup
mouseover
Slide 45
Slide 45 text
mouse events
touchstart
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
pointerenter
pointerleave
click
mousemove
mousedown
mouseup
mouseover
Slide 46
Slide 46 text
s’adapter au
DÉBIT
Slide 47
Slide 47 text
› API Network Information
› API Navigation Timing
mesure du
chronométrage de la
navigation
détection de la bande
passante de l’appareil
Slide 48
Slide 48 text
network
INFORMATION
var connection = navigator.connection;
alert("Bande passante : " + connection.bandwidth + " MB/s");
Slide 49
Slide 49 text
compatibilité
NETWORK INFORMATION
W3C Working Draft
Slide 50
Slide 50 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 51
Slide 51 text
compatibilité
NAVIGATION TIMING
W3C Recommendation
4.0
9
Slide 52
Slide 52 text
le niveau de
BATTERIE
Slide 53
Slide 53 text
battery.onlevelchange = function() {
yay = (battery.charging || battery.level > 0.25);
if (yay) { alert( "Battery is OK." ); }
}
Slide 54
Slide 54 text
compatibilité
BATTERY API
W3C Candidate Recommendation
Slide 55
Slide 55 text
media queries
CSS LEVEL 4
Slide 56
Slide 56 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 57
Slide 57 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 58
Slide 58 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 59
Slide 59 text
› @media (luminosity: dim)
› @media (luminosity: normal)
› @media (luminosity: washed)
environnement
« normal »
environnement très
clair
environnement sombre
LUMINOSITY
Slide 60
Slide 60 text
@media (luminosity : washed) {
html {
filter: brightness(0.7) contrast(1.5);
}
}
LUMINOSITY
Slide 61
Slide 61 text
compatibilité
@media CSS4
ah ben ça valait le coup...
Slide 62
Slide 62 text
partie 2
DÉMOS
› s’adapter au débit (Navigation Timing)
Slide 63
Slide 63 text
l’avenir du
POSITIONNEMENT CSS
Slide 64
Slide 64 text
Le positionnement
CSS3 de demain sera
Responsive !
Slide 65
Slide 65 text
module css3
MULTICOLONNES
Slide 66
Slide 66 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 67
Slide 67 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 68
Slide 68 text
compatibilité
MULTICOLONNES
10
W3C Candidate Recommendation
Slide 69
Slide 69 text
module css3
FLEXBOX
Slide 70
Slide 70 text
.parent {
display: flex;
}
nav {width : 10em;} section {flex : 1;} .ads {width : 10em;}
Slide 71
Slide 71 text
.parent {
display: flex;
}
section {flex : 1; order : 2;}
Slide 72
Slide 72 text
compatibilité
FLEXIBLE BOX
10
W3C Candidate Recommendation
Slide 73
Slide 73 text
module css3
GRID LAYOUT
Slide 74
Slide 74 text
.parent {
display: grid;
grid-template-columns: 200px 1fr ;
}
nav {grid-column: 1;} section {grid-column: 2;}
Slide 75
Slide 75 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 76
Slide 76 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 77
Slide 77 text
.parent {
grid-template-columns: (nav) (section) ;
grid-template-rows: (article) (aside) ;
}
.parent {
grid-template-rows:
(section) (article) (aside) (nav) ;
}
Slide 78
Slide 78 text
compatibilité
GRID LAYOUT
10
\o/
W3C Working Draft
Slide 79
Slide 79 text
module css3
REGIONS
Slide 80
Slide 80 text
Lorem Elsass ipsum réchime
amet non Choucroute
knack hopla.
Lorem Elsass ipsum réchime amet non
Choucroute knack hopla.
Slide 81
Slide 81 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 82
Slide 82 text
CSS Regions est l avenir
’
de la tELEportation...
A FOND
‘
Slide 83
Slide 83 text
compatibilité
REGIONS
10
(iframe)
flag
W3C Working Draft
7
Slide 84
Slide 84 text
partie 3
DÉ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)
Slide 85
Slide 85 text
MYDEVICE.io
Slide 86
Slide 86 text
bon, on en est où ?
RÉSUMÉ
Slide 87
Slide 87 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 88
Slide 88 text
Il marche pas trEs bien
ton nouveau
Windows Phone, chEri
Slide 89
Slide 89 text
hey, on peut jouer aussi ?
DÉMOS
www.kiwi.gg/mstd2014
Slide 90
Slide 90 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