Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Responsive Web Design

50 103 vues

Publié le

How to create a responsive web design

Publié dans : Design, Technologie, Business
  • Identifiez-vous pour voir les commentaires

Responsive Web Design

  1. 1. @sayanee_
  2. 2. RESPONSIVE WEB DESIGN codes + slides
  3. 3. RESPONSIVE WEB DESIGN
  4. 4. RESPONSIVE WEB DESIGNadaptive fluid flexible flowing
  5. 5. RESPONSIVE WEB DESIGNadaptive fluid flexible flowing device-agnostic optimised-viewing
  6. 6. EXAMPLESSimple Bits Happy CognitionResponsive 2010 Duster ThemeShelf Foundry Theme TileablesMr. Simon Colly Media Queries
  7. 7. TOOLS
  8. 8. TOOLSBrowser
  9. 9. TOOLSBrowserText Editor
  10. 10. TOOLSBrowserText EditorSimulator
  11. 11. TOOLSBrowserText EditorSimulator
  12. 12. TOOLSBrowserText EditorSimulatorCoding
  13. 13. #1 fluid layout#2 media queries#3 flexible media
  14. 14. #1 fluid layout
  15. 15. 1280px #1 fluid layout
  16. 16. 1280px #1 fluid layout 960px Hola! Travel with me devices footer
  17. 17. 1280px #1 fluid layout 960px Hola! Travel with me devices 600px main footer
  18. 18. 1280px #1 fluid layout 960px Hola! Travel with me devices 600px 300px main sidebar footer
  19. 19. #1 fluid layoutthink in pixels percentages target / context = result
  20. 20. 1280px #1 fluid layout 960px Hola! Travel with me devices 600px 300px main sidebar footer
  21. 21. 1280px #1 fluid layout 960px /1280px = 75% Hola! Travel with me 960px / 960px = 100% devices 600px / 960px= 62.5% 300px /960px = 31.25% main sidebar 960px / 960px = 100% footer
  22. 22. #2 media queriesmin-width 1280px landscape landscape 1024px 960px portrait portrait 768px 640px four 1200px 1024px 600px layouts 768px
  23. 23. #2 media queries 1200px 1024px 768px 600px
  24. 24. #2 media queriesin style.css :@media screen and (max-width: 1200px ){} /* desktop */@media screen and (max-width: 1024px ){} /* iPad landscape */@media screen and (max-width: 768px ){} /* iPad portrait */@media screen and (max-width: 600px ){} /* iPhone */
  25. 25. #2 media queries in style.css :@media screen and (max-width: 1200px ){} /* desktop */@media screen and (max-width: 1024px ){} /* iPad landscape */@media screen and (max-width: 768px ){} /* iPad portrait */@media screen and (max-width: 600px ){} /* iPhone */in index.html, inside <head> :<meta name="viewport" content="width = device-width" />
  26. 26. #3 flexible mediaimg, embed, object, video { max-width:100%}
  27. 27. #3 flexible mediaflexible heading using fittext.js
  28. 28. OTHER RESOURCESBlog posts: Books:1. Think Vitamin 1. by Ethan Marcotte2. A-List Apart3. Smashing Magazine Videos:4. Fluid Images5. Web Designer Wall 1. Nettuts6. CSS Tricks7. Six Revisions8. fittext.js
  29. 29. codes + slides
  30. 30. @sayanee_

×