Responsive Web Design
•Als KEY, PDF herunterladen•
37 gefällt mir•39,638 views
How to create a responsive web design
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Responsive Web Design
Ähnlich wie Responsive Web Design (20)
Mehr von Sayanee Basu
Mehr von Sayanee Basu (12)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Responsive Web Design
- 1. @sayanee_
- 2. RESPONSIVE WEB DESIGN codes + slides
- 4. RESPONSIVE WEB DESIGN adaptive fluid flexible flowing
- 5. RESPONSIVE WEB DESIGN adaptive fluid flexible flowing device-agnostic optimised-viewing
- 6. EXAMPLES Simple Bits Happy Cognition Responsive 2010 Duster Theme Shelf Foundry Theme Tileables Mr. Simon Colly Media Queries
- 7. TOOLS
- 13. #1 fluid layout #2 media queries #3 flexible media
- 14. #1 fluid layout
- 15. 1280px #1 fluid layout
- 16. 1280px #1 fluid layout 960px Hola! Travel with me devices footer
- 17. 1280px #1 fluid layout 960px Hola! Travel with me devices 600px main footer
- 18. 1280px #1 fluid layout 960px Hola! Travel with me devices 600px 300px main sidebar footer
- 19. #1 fluid layout think in pixels percentages target / context = result
- 20. 1280px #1 fluid layout 960px Hola! Travel with me devices 600px 300px main sidebar footer
- 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. #2 media queries min-width 1280px landscape landscape 1024px 960px portrait portrait 768px 640px four 1200px 1024px 600px layouts 768px
- 23. #2 media queries 1200px 1024px 768px 600px
- 24. #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 */
- 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. #3 flexible media img, embed, object, video { max-width:100% }
- 27. #3 flexible media flexible heading using fittext.js
- 28. OTHER RESOURCES Blog posts: Books: 1. Think Vitamin 1. by Ethan Marcotte 2. A-List Apart 3. Smashing Magazine Videos: 4. Fluid Images 5. Web Designer Wall 1. Nettuts 6. CSS Tricks 7. Six Revisions 8. fittext.js
- 29. codes + slides
- 30. @sayanee_
Hinweis der Redaktion
- 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&#x2019;s book\n
- \n
- \n