HTML5mtl - 2012-02-22 - Responsive Web Design

Click here to load reader

  • date post

    15-May-2015
  • Category

    Technology

  • view

    2.211
  • download

    1

Embed Size (px)

description

Il n'y a ni Web mobile, ni de Web pour les PC et pas plus de Web spécifiques aux tablettes. Nous voyons le même Web, mais de différentes façons. Alors, comment fait-on? En se débarrassant de nos approches à largeur fixe et appareil spécifique, tout en utilisant la technique du design Web adaptatif. Cette présentation se veut une explication de cette façon de développer des sites et applications Web. Cette approche à 3 volets permettra à vos projets actuels d'être capable de s'adapter aux appareils dans le futur.

Transcript of HTML5mtl - 2012-02-22 - Responsive Web Design

  • 1. Responsive Web Design : La vision du monde dpenddes lunettes que je porteFrdric HarperDevelopers Evangelist @ Microsoft CanadaHTML5mtl [email protected] | outofcomfortzone.net

2. Comment nous voyions le Web Les navigateurs de nos ordinateurs 3. Comment nous voyons le Web aujourdhui Les navigateurs de nos ordinateurs Les navigateurs mobiles Les tablettes Les tlvisions Les consoles de jeux Et bien plus Alors, quel est le problme? 4. Leffet non dsir DMO 5. Responsive Web Design Pensez aux besoins de lutilisateur au lieu desntres. Adapter aux diffrentes capacits des appareils aulieu de leurs configurations. Aide nos sites tre possiblement prts pour lefutur. 6. Responsive Web Designs DMO 7. Les lments du Responsive Web Design Une mise en page flexible, base sur une grille, Des images et des mdias flexibles, et Media queries. 8. Les lments du Responsive Web Design Une mise en page flexible, base sur une grille, Des images et des mdias flexibles, et Media queries. et quelque chose dautre! 9. Mise en page flexible 10. OK, alors quel est le problme? Les sites non responsive ne sont pas plaisants Les sites largeur fixes ne donnent pas lameilleure exprience. Les outils de design ont tendance utiliser lespixels. De fois, un pixel ngale pas un pixel. Alors, comment transforme-t-on un pixel versson homologue em? 11. Lalgorithme des Pixels vers Ems 12. Responsive Web Design Lire la suite >> h1 {h1 {em font-size: 24px;24 / 16 = 1.5 font-size: 1.5em; } } h1 a {11 / 24 = 0.458333333+h1 a {%font-size: 11px;font: 0.458333333+; } }12 3 13. Et la grille, elle? 14. PAUSE 15. Images et mdias flexibles 16. Une solution simpleFonctionne sur les images,comme sur les autres mdias tel que . 17. Images et mdias flexibles DMO 18. Une autre possibilitFilament Group dpends des cookies et du JavaScript 19. Media Queries 20. Il ny a pas si longtemps On pouvait dfinir le type de mdia: screen & print Mais pas facilement rpondre laffichage delutilisateur. Beaucoup de travail pour y arriver. On ne passait pas beaucoup de temps pour penseraux appareils mobiles. 21. CSS3 Media Queries Les CSS3 Media Queries permettent auxdveloppeurs Web de conditionner la prise encompte dune feuille de style des contraintesconcernant notamment la rsolution ou lacapacit de restitution des couleurs. 22. Exemple [email protected] screen and (max-width: 600px) { body {font-size: 80%; }} 23. Dautres Media [email protected] screen and (min-width:320px) and (max-width:480px)@media not print and (max-width:600px)@media screen (x) and (y), print (a) and (b) 24. Peuvent tre dclarDans la feuille de styleEn limportant @import url(mq.css) only screen and (max- width:600px)Avec un lment link 25. Proprits mdia supportes min/max-width color min/max-height color-index device-width monochrome device-height resolution orientation aspect-ratio device-aspect-ratio 26. Little Pea BakeryDMO 27. Quen est-il des appareils? viewport meta tag device-width vs. width maximum-zoom 28. Les navigateurs qui ne le supportent pas? css3-mediaqueries-js par Wouter van der Graaf Seulement inclure le script dans vos pages Analyse le CSS et applique le style pour les testsde mdias positifs 29. Hey! Quel tait le 4e lment? Design. Est-ce quon dbute avec mobile-first? Est-ce bon pour tous les sites? Est-ce que nous avons besoin ou veut-on avoir unecomposante visuelle pour chaque appareil? Mobile nest pas seulement marcher et regarderquelque chose. Nous en sommes au dbut cest ce qui rend le toutfort intressant! 30. Questions?Frdric Harper Developer Evangelist @ [email protected]@fharper http://webnotwar.ca http://oocz.net