État de l’art du responsive Web design et projections dans le futur

État de l’art du responsive Web design et projections dans le futur

Le Responsive Web Design 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. Cette conférence fournit un état des lieux des spécifications modernes ou futuristes HTML5, CSS3, JavaScript sur le thème du Responsive (positionnement avancés, viewport, hautes définitions, connectivité, luminosité, SVG, etc.).

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

April 25, 2014
Tweet

Transcript

  1. 7.

    WikiMedia : Man in a box - Keith Allison Soyez

    Responsive qu ils disaient ! ’
  2. 8.

    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 !
  3. 14.

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

    Simple à styler et modifier › Idéal pour pictos, logos, etc.
  4. 20.

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

    max-width : 100vmax ; max-height : 100vmin ; font-size : 3vw ; }
  5. 22.

    viewport units DÉMOS › police relative à la taille de

    fenêtre (vw unit) › conserver le ratio d’une iframe (vmin unit)
  6. 31.

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

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

    › @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
  9. 44.

    › @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
  10. 45.

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

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

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

    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 { }
  13. 53.

    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
  14. 57.
  15. 62.

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

    {grid-column: 1;} section {grid-column: 2;}
  16. 63.

    .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; }
  17. 64.

    .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 ; }
  18. 65.

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

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

    grid layout DÉMOS › grille de mise en page simple

    (grid layout) › grille responsive complexe (grid layout) › mise en page adaptative (grid layout)
  20. 69.

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

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

    utilisable aujourd’hui › SVG › Règle @viewport › Navigation Timing

    › touch events, pointer events › CSS3 multicolonnes › CSS3 Flexbox › JS matchMedia
  23. 77.

    utilisable bientôt › Unités de viewport (vw, vh, vmin, vmax)

    › Unités de résolution (dpcm, dpmm, dppx) › Règle @supports › <picture>, srcset
  24. 78.

    utilisable un beau jour › @media (pointer, hover, luminosity, script)

    › Battery API › CSS3 Grid Layout › CSS3 Regions
  25. 79.

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

    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