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)
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 !
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)
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 ! }
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 !
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 !
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)
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