Responsive Web Design
•Transferir como KEY, PDF•
37 gostaram•39,637 visualizações
How to create a responsive web design
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Responsive Web Design
Semelhante a Responsive Web Design (20)
Mais de Sayanee Basu
Mais de Sayanee Basu (12)
Último
Último (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_
Notas do Editor
- 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