Responsive Web Design

39,686 views
48,770 views

Published on

How to create a responsive web design

Published in: Design, Technology, Business
6 Comments
33 Likes
Statistics
Notes
No Downloads
Views
Total views
39,686
On SlideShare
0
From Embeds
0
Number of Embeds
29,636
Actions
Shares
0
Downloads
295
Comments
6
Likes
33
Embeds 0
No embeds

No notes for slide
  • open examples sites & flickr.com in safari, \nopen codes in github (chrome), working site & fittextjs.com\nopen totalterminal for cal, \nopen codes in textmate, \n
  • \n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • ask who is using which device\n
  • open them in safari\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • ask which text editor they use\nask who knows html/css/javascript - ask them to stop me!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • go on to edit the css\n
  • revise the percentage number\n
  • revise the percentage number\n
  • revise the percentage number\n
  • revise the percentage number\n
  • revise the percentage number\n
  • \n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • go on to edit the css FIRST\n\ngo on to edit the html FIRST\n
  • \n
  • \n
  • open Ethan Marcotte’s book\n
  • \n
  • \n
  • 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_

    ×