Responsive Design
0 likes528 views
The document discusses the benefits of responsive design, which allows content and layout to adjust based on the device used to view a website. Responsive design ensures mobile users have optimized experiences, future-proofs websites to support emerging devices, and is cost-effective compared to separate mobile sites. The key advantage is that responsive design listens to users by adjusting the content structure and presentation based on the device. The document also addresses ongoing challenges in responsive design like menu formatting and image scaling on high-resolution screens.
Responsive Design
- 3. responsive design and why you should give a flying snotbucket.
- 8. responsive design • mobile users • future proofing • the “ooh” factor • cost effective
- 9. but that’s not the real advantage of responsive design
- 11. storytelling
- 13. storytelling is about listening.
- 14. responsive design is all about listening to your users and adjusting your story accordingly.
- 15. content is king.
- 16. content is king.
- 17. content is your story.
- 18. and content is structured with <code>.
- 20. don’t worry…
- 21. in ye olde days 600px 800px
- 22. in ye olde days 768px 1024px
- 23. in ye olde days 900px 1440px
- 24. but what about… 320px 240px
- 25. in ye olde days 900px 1440px
- 26. box model
- 27. box model
- 29. content = story
- 30. content = story but we can’t change our story… so how do we cater to our audience?
- 31. don’t change your story, change your presentation.
- 32. strategy
- 33. strategy what do your users need on the go? one their TVs, in the back seat of their cars, on devices that don’t exist yet?
- 34. strategy what do your users need on the go? one their TVs, in the back seat of their cars, on devices that don’t exist yet?
- 35. not just responsive design, but responsive thinking.
- 36. all the problems haven’t been solved yet.
- 37. all the problems haven’t been solved yet. • menus • images/media scaling • high pixel density (retina) screens
- 38. sources: • http://www.alistapart.com/articles/ responsive-web-design/ • http://www.starbucks.com/static/reference/ styleguide/ • http://informationarchitects.net/blog/ responsive-typography-the-basics/ • http://mediaqueri.es/
- 39. thanks!
- 40. © 2012 Evan Travers
Editor's Notes
- #2: \n
- #3: Introduction to moi\n\n
- #4: Introduction to moi\n\n
- #5: Responsive design usually refers to the ability of a flexible theme to adjust to the screen viewing it\n\nBut it&#x2019;s so much more.\n
- #6: Responsive design usually refers to the ability of a flexible theme to adjust to the screen viewing it\n\nBut it&#x2019;s so much more.\n
- #7: Responsive design usually refers to the ability of a flexible theme to adjust to the screen viewing it\n\nBut it&#x2019;s so much more.\n
- #8: \n
- #9: not the real advantage&#x2026;\n\nso lets talk about something I really care about.\n
- #10: I don&#x2019;t need to explain how important storytelling is to this company.\n\nBut are we using the full advantages of our medium to tell these stories?\n\nMention summer camp\n
- #11: The best story tellers pay attention to their audiences, and adjust their presentation accordingly.\n\nSo if we want to be the best, we have to learn new ways of listening, and of adjusting.\n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: don&#x2019;t worry, we are not going to talk about plugins and libraries and APIs&#x2026;\n\nwe are going to talk about boxes.\n
- #17: don&#x2019;t worry, we are not going to talk about plugins and libraries and APIs&#x2026;\n\nwe are going to talk about boxes.\n
- #18: life was good. we used tables. we didn&#x2019;t answer the phone during an email send.\n
- #19: \n
- #20: it&#x2019;s the future! we can make designs as wide as we want!\n
- #21: In 2007, everything changed.\n\nIn five short years, what was a minor consideration for a very small portion of the internet-using world (remember .mobi sites in java?) became a major business, with startups rising and falling on apps, mobile sites, and usability.\n
- #22: it&#x2019;s the future! we can make designs as wide as we want!\n
- #23: \n
- #24: \n
- #25: use the box model outliner to demonstrate how content moves around a page.\n\ncontent strategy adjusting constantly.\n
- #26: \n
- #27: \n
- #28: \n
- #29: desktop site is around the shop experience, and gift cards\n
- #30: through responsive design, we can better serve users by catering to their needs on each device\n\nwithout compromising the rest of the story\n
- #31: \n
- #32: Part of the exciting bit of responsive design is its a new space in which to innovate and distinguish ourselves.\n
- #33: Part of the exciting bit of responsive design is its a new space in which to innovate and distinguish ourselves.\n
- #34: \n
- #35: \n
- #36: \n