HTML5mtl - 2012-02-22 - Responsive Web Design

2 658 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 658
Sur SlideShare
0
Issues des intégrations
0
Intégrations
430
Actions
Partages
0
Téléchargements
55
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • http://www.meetup.com/HTML5mtl/
  • http://www.alistapart.com/articles/responsive-web-design/
  • http://www.designmadeingermany.de/magazin/5/http://us.illyissimo.com/http://html5shelf.tumblr.com/
  • http://responsivewebdesign.com/robot/
  • http://filamentgroup.com/examples/responsive-images/https://github.com/filamentgroup/Responsive-Images
  • http://stunningcss3.com/code/bakery/index.html
  • http://stunningcss3.com/code/bakery/index.html
  • http://code.google.com/p/css3-mediaqueries-js/
  • http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_querieshttp://stuffandnonsense.co.uk/projects/320andup/http://lessframework.com/
  • http://www.stunningcss3.com/index.php
  • http://www.abookapart.com/products/responsive-web-design
  • http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/
  • http://mediaqueri.es/
  • http://www.w3.org/TR/css3-mediaqueries/
  • HTML5mtl - 2012-02-22 - Responsive Web Design

    1. 1. Responsive Web Design : La vision du monde dépend des lunettes que je porteFrédéric HarperDevelopers Evangelist @ Microsoft CanadaHTML5mtl – 2012-02-22@fharper | outofcomfortzone.net
    2. 2. Comment nous voyions le Web…• Les navigateurs de nos ordinateurs
    3. 3. Comment nous voyons le Web aujourd’hui…• Les navigateurs de nos ordinateurs• Les navigateurs mobiles• Les tablettes• Les télévisions• Les consoles de jeux• Et bien plus…• Alors, quel est le problème?
    4. 4. L’effet non désiré DÉMO
    5. 5. Responsive Web Design• Pensez aux besoins de l’utilisateur au lieu des nôtres.• Adapter aux différentes capacités des appareils au lieu de leurs configurations.• Aide nos sites à être possiblement prêts pour le futur.
    6. 6. Responsive Web Designs DÉMO
    7. 7. Les éléments du Responsive Web Design• Une mise en page flexible, basée sur une grille,• Des images et des médias flexibles, et• Media queries.
    8. 8. Les éléments du Responsive Web Design• Une mise en page flexible, basée sur une grille,• Des images et des médias flexibles, et• Media queries.• … et quelque chose d’autre!
    9. 9. Mise en page flexible
    10. 10. OK, alors quel est le problème?• Les sites non responsive ne sont pas plaisants• Les sites à largeur fixes ne donnent pas la meilleure expérience.• Les outils de design ont tendance à utiliser les pixels.• De fois, un pixel n’égale pas un pixel.• Alors, comment transforme-t-on un pixel vers son homologue em?
    11. 11. L’algorithme des Pixels vers Ems
    12. 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+; } } 1 2 3
    13. 13. Et la grille, elle?
    14. 14. PAUSE
    15. 15. Images et médias flexibles
    16. 16. Une solution simple Fonctionne sur les images, comme sur les autres médias tel que <video>.
    17. 17. Images et médias flexibles DÉMO
    18. 18. Une autre possibilité Filament Group – dépends des cookies et du JavaScript
    19. 19. Media Queries
    20. 20. Il n’y a pas si longtemps…• On pouvait définir le type de média: screen & print• Mais pas facilement répondre à l’affichage de l’utilisateur.• Beaucoup de travail pour y arriver.• On ne passait pas beaucoup de temps pour penser aux appareils mobiles.
    21. 21. CSS3 Media Queries• Les CSS3 Media Queries permettent aux développeurs Web de conditionner la prise en compte dune feuille de style à des contraintes concernant notamment la résolution ou la capacité de restitution des couleurs.
    22. 22. Exemple simple@media screen and (max-width: 600px) { body { font-size: 80%; }}
    23. 23. D’autres Media Queries@media 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. 24. Peuvent être déclaré…Dans la feuille de styleEn l’important @import url(mq.css) only screen and (max- width:600px)Avec un élément link <link rel=“stylesheet” media=“only screen and (max-width:800px)” href=“mq.css”>
    25. 25. Propriétés média supportées• min/max-width • color• min/max-height • color-index• device-width • monochrome• device-height • resolution• orientation• aspect-ratio• device-aspect-ratio
    26. 26. Little Pea Bakery DÉMO
    27. 27. Qu’en est-il des appareils?• viewport meta tag • <meta name=“viewport” content=“width=device-width”>• device-width vs. width• maximum-zoom
    28. 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 tests de médias positifs
    29. 29. Hey! Quel était le 4e élément?• Design. • Est-ce qu’on débute avec “mobile-first”? • Est-ce bon pour tous les sites? • Est-ce que nous avons besoin ou veut-on avoir une composante visuelle pour chaque appareil? • Mobile n’est pas seulement “marcher et regarder quelque chose”. • Nous en sommes au début… c’est ce qui rend le tout fort intéressant!
    30. 30. Questions? Frédéric Harper Developer Evangelist @ Microsoft fredh@microsoft.com @fharper http://webnotwar.ca http://oocz.net

    ×