Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive design - no size, fits all

749 views

Published on

An introduction to responsive design. A short introduction for designers and project managers.

Published in: Education
  • Login to see the comments

  • Be the first to like this

Responsive design - no size, fits all

  1. 1. Responsive design– no size, fits all
  2. 2. Design for the monitor
  3. 3. Should also fiton the laptop
  4. 4. …or a tablet…
  5. 5. …and even a mobile
  6. 6. Because you don’t knowwhat device a visitor is usingwhen visiting your website.
  7. 7. There is not ‘one size’
  8. 8. How to set dimensions?Use relative sizes.
  9. 9. How to set dimensions?Use relative sizes.
  10. 10. How to set dimensions?Use relative sizes.
  11. 11. Whatever screen size,you just have to look good
  12. 12. Whatever screen size,you just have to look good
  13. 13. Screen size = browser window size
  14. 14. Scalefirst, thenrearrange.
  15. 15. The Boston Globe www.bostonglobe.comdesktop iPhoneiPad landscape iPad portrait
  16. 16. Supereight Studio www.supereightstudios.comdesktop iPhoneiPad landscape iPad portrait
  17. 17. Neo www.neolab.nodesktop iPhoneiPad landscape iPad portrait
  18. 18. Wythe Hotel www.wythehotel.comdesktop iPhoneiPad landscape iPad portrait
  19. 19. Grk fresh greek www.grkfresh.comdesktop iPhoneiPad landscape iPad portrait
  20. 20. Some things to consider:— fluid layout— the hierarchy— no roll-overs on tablets & phones— size (& margins) of links and buttons

×