1. le futur du
RESPONSIVE
WEB DESIGN
Microsoft TechDays 2014

2. RAPHAËL GOETTER
photomontage : @diou

3. Soyez Responsive
qu’ils disaient !
WikiMedia : Man in a box - Keith Allison

4. le futur des
le futur des
le futur des
le futur des
USAGES
RESSOURCES
OBJETS
TECHNIQUES
le futur des
STANDARDS

5. 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 !

6. SPÉCIFICATIONS ET FORMATS
FONCTIONNALITÉS ET ENVIRONNEMENT
L’AVENIR DU POSITIONNEMENT CSS

7. SPÉCIFICATIONS
et formats

8. Je me suis fait
beau pour venir
aux TechDays !

9. SVG
scalable
vector
graphics

10. SVG
PAS
SVG

11. › Vectoriel
› Haute Def (« retina ») ready
› Simple à styler et modifier
› Idéal pour pictos, logos, etc.

12. compatibilité
SVG
9
W3C Recommendation
3.0

13. unités de
VIEWPORT

14. 100vw
100vh
vw = largeur de fenêtre, vh = hauteur de fenêtre

15. 100vmax (aussi)
100vmax
vmin = valeur minimum, vmax = valeur maximum

16. .kiwi {
width : 80vw ;
height : 80vh ;
max-width : 100vmax ;
max-height : 100vmin ;
font-size : 3vw ;
}

17. compatibilité
VIEWPORT UNITS
9
W3C Candidate Recommendation
4.4

18. unités de
RÉSOLUTION

19. points par pouce
› dpi
MOI, j’en AI PARCOURU DPI
MA BONNE DAME !
huhu

20. points par pouce
› dpi
› dpcm
› dpmm
› dppx
bah moi je la trouvais drôle ma blague...
points par centimètre
points par millimètre
points par pixel

21. Inventé par Webkit
Propriétaire
Non Standard
Standard
@media (min-device-pixel-ratio : 2) {
div {
background : url(concombre-big.jpg)
}
}
@media (min-resolution : 2dppx) {
div {
background : url(concombre-big.jpg)
}
}

22. compatibilité
RESOLUTION UNITS
W3C Candidate Recommendation

23. règle-at
@VIEWPORT

24. <meta name="viewport" content="width=device-width, initia
bla bla bla

25. <meta name="viewport" content="width=device-width, initia
bla bla bla
Inventé par Apple
Propriétaire
Non Standard

26. @viewport {
width: device-width;
zoom: 1;
}
Standard

27. @media (orientation: portrait) {
@viewport {width: device-width}
}
@media (orientation: landscape) {
@viewport {width: device-height}
}

28. compatibilité
@VIEWPORT
10
W3C Working Draft

29. règle-at
@SUPPORTS

30. @supports ( display: flex) {
.kiwi {display : flex;}
}
@supports not ( display: flex) {
.kiwi {display : table-cell;}
}

31. règle-at
@SUPPORTS
4.4
W3C Candidate Recommendation

32. formats d’images
RESPONSIVE

33. [concombre-small.png]
[concombre-big.png]

34. <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

35. <img src="concombre-big.png" srcset="concombre-small.png 1024w" alt="" >
[concombre-small.png]
[concombre-big.png]
1024px

36. compatibilité
<picture>
bon ben voilà quoi...

37. compatibilité
srcset
34
21
ouais OK d'accord...

38. 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)

39. fonctionnalités et
ENVIRONNEMENT

40. Mon environnement
n’est pas toujours
facile à vivre...

41. s’adapter au
« touch »

42. use events
o
m click
mousemove
mouseover
mousedown
mouseup

43. use events
o
m click
mousemove
mouseover
mousedown
mouseup
› Liés à la souris
› Bien reconnus sur mobiles
› (Par dépit)

44. use events
o
m click
touchend
touchstart
touchmove
mousemove
mouseover
ch events
u
to
mousedown
mouseup
› Dédiés au touch (doigt)
› Recommandation W3C
› Bien reconnus sur mobiles (sauf IE)

45. use events
o
m click
touchend
touchstart
touchmove
mousemove
mouseover
ch events
u
to
mousedown
mouseup
ter event
in pointerup s
po
pointerdown
pointermove
pointercancel
pointerout
pointerenter
pointerleave
› Pointeurs divers (souris, doigt, stylet)
› Recommandation Candidate W3C
› Uniquement reconnus sur IE (hi hi)

46. s’adapter au
DÉBIT

47. détection de la bande
passante de l’appareil
› API Network Information
› API Navigation Timing
mesure du
chronométrage de la
navigation

48. network
INFORMATION
var connection = navigator.connection;
alert("Bande passante : " + connection.bandwidth + " MB/s");

49. compatibilité
NETWORK INFORMATION
W3C Working Draft

50. 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 ! }

51. compatibilité
NAVIGATION TIMING
9
W3C Recommendation
4.0

52. le niveau de
BATTERIE

53. battery.onlevelchange = function() {
yay = (battery.charging || battery.level > 0.25);
if (yay) { alert( "Battery is OK." ); }
}

54. compatibilité
BATTERY API
W3C Candidate Recommendation

55. media queries
CSS LEVEL 4

56. 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

57. TER
OIN
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)

58. TER
OIN
P
@media (pointer : coarse) and not (pointer : fine) {
.button {font-size : larger}
}
oh oui clique-moi !
oh oui clique-moi !
oh oui touch-moi !

59. SITY
INO
LUM
environnement sombre
› @media (luminosity: dim)
› @media (luminosity: normal)
environnement
« normal »
› @media (luminosity: washed)
environnement très
clair

60. LU
SITY
INO
M
@media (luminosity : washed) {
html {
filter: brightness(0.7) contrast(1.5);
}
}

61. compatibilité
@media CSS4
ah ben ça valait le coup...

62. partie 2
DÉMOS
› s’adapter au débit (Navigation Timing)

63. l’avenir du
POSITIONNEMENT CSS

64. Le positionnement
CSS3 de demain sera
Responsive !

65. module css3
MULTICOLONNES

66. 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 !

67. 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 !

68. compatibilité
MULTICOLONNES
10
W3C Candidate Recommendation

69. module css3
FLEXBOX

70. .parent {
display: flex;
}
nav {width : 10em;}
section {flex : 1;}
.ads {width : 10em;}

71. .parent {
display: flex;
}
section {flex : 1; order : 2;}

72. compatibilité
FLEXIBLE BOX
10
W3C Candidate Recommendation

73. module css3
GRID LAYOUT

74. .parent {
display: grid;
grid-template-columns: 200px 1fr ;
}
nav {grid-column: 1;}
section {grid-column: 2;}

75. .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;
}

76. .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 ;
}

77. .parent {
grid-template-columns: (nav) (section) ;
grid-template-rows: (article) (aside) ;
}
.parent {
grid-template-rows:
(section) (article) (aside) (nav) ;
}

78. compatibilité
GRID LAYOUT
10
o/
W3C Working Draft

79. module css3
REGIONS

80. <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.

81. .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.

82. CSS Regions est l’avenir
de la tELEportation...
A ‘FOND

83. compatibilité
REGIONS
flag
10
(iframe)
W3C Working Draft
7

84. 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)

85. MYDEVICE.io

86. bon, on en est où ?
RÉSUMÉ

87. 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

88. Il marche pas trEs bien
ton nouveau
Windows Phone, chEri

89. hey, on peut jouer aussi ?
DÉMOS
www.kiwi.gg/mstd2014

90. 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