Le futur du Responsive Web Design

Adf4ff2212aea06456ca3c3bca95c0db?s=47 Raphael Goetter
February 11, 2014

Le futur du Responsive Web Design

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.

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

February 11, 2014
Tweet

Transcript

  1. 3.

    WikiMedia : Man in a box - Keith Allison Soyez

    Responsive qu ils disaient ! ’
  2. 4.

    le futur des USAGES le futur des OBJETS le futur

    des RESSOURCES le futur des STANDARDS le futur des TECHNIQUES
  3. 5.

    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 !
  4. 11.

    › Vectoriel › Haute Def (« retina ») ready ›

    Simple à styler et modifier › Idéal pour pictos, logos, etc.
  5. 16.

    .kiwi { width : 80vw ; height : 80vh ;

    max-width : 100vmax ; max-height : 100vmin ; font-size : 3vw ; }
  6. 19.

    › dpi points par pouce MOI, j en AI PARCOURU

    ’ DPI MA BONNE DAME ! huhu
  7. 20.

    › 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...
  8. 21.

    @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
  9. 30.

    @supports ( display: flex) { .kiwi {display : flex;} }

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

    [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
  11. 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)
  12. 43.

    › Liés à la souris › Bien reconnus sur mobiles

    › (Par dépit) mouse events click mousemove mousedown mouseup mouseover
  13. 44.

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

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

    › API Network Information › API Navigation Timing mesure du

    chronométrage de la navigation détection de la bande passante de l’appareil
  16. 50.

    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
  17. 53.
  18. 56.

    › @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
  19. 57.

    › @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
  20. 58.

    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 !
  21. 59.

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

    (luminosity: washed) environnement « normal » environnement très clair environnement sombre LUMINOSITY
  22. 66.

    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 { }
  23. 67.

    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
  24. 70.
  25. 74.

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

    {grid-column: 1;} section {grid-column: 2;}
  26. 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; }
  27. 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 ; }
  28. 77.

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

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

    Lorem Elsass ipsum réchime amet non Choucroute knack hopla. <div

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

    Lorem Elsass ipsum réchime amet non Choucroute knack 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>
  31. 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)
  32. 87.

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

    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