Responsive design - no size, fits all

596 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
596
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×