le futur du

RESPONSIVE
WEB DESIGN
Microsoft TechDays 2014
RAPHAËL GOETTER

photomontage : @diou
Soyez Responsive
qu’ils disaient !
WikiMedia : Man in a box - Keith Allison
le futur des

le futur des

le futur des

le futur des

USAGES
RESSOURCES

OBJETS

TECHNIQUES

le futur des

STANDARDS
le futur des

USAGES
le futur des

trop long !

RESSOURCES
oui mais non !

le futur des

pas le temps !

OBJETS

le futur ...
SPÉCIFICATIONS ET FORMATS

FONCTIONNALITÉS ET ENVIRONNEMENT

L’AVENIR DU POSITIONNEMENT CSS
SPÉCIFICATIONS
et formats
Je me suis fait
beau pour venir
aux TechDays !
SVG

scalable
vector
graphics
SVG
PAS

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

SVG
9

W3C Recommendation

3.0
unités de

VIEWPORT
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

W3C Candidate Recommendation

4.4
unités de

RÉSOLUTION
points par pouce

› dpi

MOI, j’en AI PARCOURU DPI
MA BONNE DAME !

huhu
points par pouce

› dpi
› dpcm
› dpmm
› dppx

bah moi je la trouvais drôle ma blague...

points par centimètre

points par...
Inventé par Webkit
Propriétaire
Non Standard

Standard

@media (min-device-pixel-ratio : 2) {
div {
background : url(conco...
compatibilité

RESOLUTION UNITS

W3C Candidate Recommendation
règle-at

@VIEWPORT
<meta name="viewport" content="width=device-width, initia
bla bla bla
<meta name="viewport" content="width=device-width, initia
bla bla bla

Inventé par Apple
Propriétaire
Non Standard
@viewport {
width: device-width;
zoom: 1;
}

Standard
@media (orientation: portrait) {
@viewport {width: device-width}
}
@media (orientation: landscape) {
@viewport {width: dev...
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’images

RESPONSIVE
[concombre-small.png]

[concombre-big.png]
<picture>
<source media="(min-width: 1024px)" src="concombre-big.png">
<source media="(max-width: 1023px)" src="concombre-...
<img src="concombre-big.png" srcset="concombre-small.png 1024w" alt="" >

[concombre-small.png]

[concombre-big.png]

1024...
compatibilité

<picture>

bon ben voilà quoi...
compatibilité

srcset

34

21

ouais OK d'accord...
partie 1

DÉMOS
› logo du site knacss.com (SVG)
› police relative à la taille de fenêtre (vw unit)
› conserver le ratio d’...
fonctionnalités et

ENVIRONNEMENT
Mon environnement
n’est pas toujours
facile à vivre...
s’adapter au

« touch »
use events
o
m click
mousemove
mouseover

mousedown
mouseup
use events
o
m click
mousemove
mouseover

mousedown
mouseup

› Liés à la souris
› Bien reconnus sur mobiles
› (Par dépit)
use events
o
m click

touchend

touchstart
touchmove

mousemove
mouseover

ch events
u
to

mousedown
mouseup
› Dédiés au t...
use events
o
m click

touchend

touchstart
touchmove

mousemove
mouseover

ch events
u
to

mousedown
mouseup

ter event
in...
s’adapter au

DÉBIT
détection de la bande
passante de l’appareil

› API Network Information
› API Navigation Timing
mesure du
chronométrage de...
network

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

NETWORK INFORMATION

W3C Working Draft
navigation

TIMING

var speed = window.performance;
var start = speed.timing.requestStart;
var end = speed.timing.response...
compatibilité

NAVIGATION TIMING
9

W3C Recommendation

4.0
le niveau de

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

BATTERY API

W3C Candidate Recommendation
media queries

CSS LEVEL 4
type de dispositif de
pointage

› @media (pointer)
› @media (hover)
› @media (luminosity)
› @media (script)

support ou no...
TER
OIN
P
pas de dispositif de
pointage

› @media (pointer: none)
› @media (pointer: coarse)
› @media (pointer: fine)

poi...
TER
OIN
P
@media (pointer : coarse) and not (pointer : fine) {
.button {font-size : larger}
}

oh oui clique-moi !
oh oui ...
SITY
INO
LUM

environnement sombre

› @media (luminosity: dim)
› @media (luminosity: normal)

environnement
« normal »

› ...
LU

SITY
INO
M
@media (luminosity : washed) {
html {
filter: brightness(0.7) contrast(1.5);
}
}
compatibilité

@media CSS4

ah ben ça valait le coup...
partie 2

DÉMOS

› s’adapter au débit (Navigation Timing)
l’avenir du

POSITIONNEMENT CSS
Le positionnement
CSS3 de demain sera
Responsive !
module css3

MULTICOLONNES
p{}

Lorem Elsass ipsum réchime amet non Choucroute knack tchao bissame
hopla. Wotch a kofee avec ton BibalaekaesSalat et ...
p { columns : 3 }

Lorem Elsass ipsum
réchime amet non
Choucroute knack
tchao bissame hopla.
Wotch a kofee avec
ton Bibala...
compatibilité

MULTICOLONNES
10

W3C Candidate Recommendation
module css3

FLEXBOX
.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 css3

GRID 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-ro...
.parent {
display: grid;
grid-template-columns: (nav) 200px (section) 1fr ;
grid-template-rows: (article) 10em (aside) 1fr...
.parent {
grid-template-columns: (nav) (section) ;
grid-template-rows: (article) (aside) ;
}

.parent {
grid-template-rows...
compatibilité

GRID LAYOUT
10
o/

W3C Working Draft
module css3

REGIONS
<div class="first">
Lorem Elsass ipsum réchime amet non
Choucroute knack hopla.
</div>
<div class="second">
</div>

Lorem ...
.first { flow-into: machin;}
.second { flow-from: machin;}

<div class="first">
Lorem Elsass ipsum réchime amet non
Choucr...
CSS Regions est l’avenir
de la tELEportation...

A ‘FOND
compatibilité

REGIONS

flag

10
(iframe)

W3C Working Draft

7
partie 3

DÉMOS

› navigation responsive (multicolumns)
› réordonnement de blocs (flexbox)
› grille de mise en page simple...
MYDEVICE.io
bon, on en est où ?

RÉSUMÉ
SVG
vw, vh,
vmin,
vmax

matchMedia()
dpcm,
dpmm,
dppx

srcset
@viewport
@supports
<picture>

pointer
events

navigation
ti...
Il marche pas trEs bien
ton nouveau
Windows Phone, chEri
hey, on peut jouer aussi ?

DÉMOS
www.kiwi.gg/mstd2014
MERCI, BISOUS
pictos

› Human Finger Gesture - Patrick van Tilborg
› Phone icons – Cemagraphics
› Old school - Babasse
› T...
Prochain SlideShare
Chargement dans…5
×

Le futur du Responsive Web Design

2 151 vues

Publié le

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)

Publié dans : Technologie
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 151
Sur SlideShare
0
Issues des intégrations
0
Intégrations
49
Actions
Partages
0
Téléchargements
104
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le futur du Responsive Web Design

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

×