Le futur du Responsive Web Design

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

partie 2DÉMOS

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

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

hey, on peut jouer aussi ?

DÉMOSwww.kiwi.gg/mstd2014

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