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

1. Responsive design
– no size, fits all

2. Design for the monitor

3. Should also fit
on the laptop

4. …or a tablet…

5. …and even a mobile

6. Because you don’t know
what device a visitor is using
when visiting your website.

7. There is not ‘one size’

8. How to set dimensions?
Use relative sizes.

9. How to set dimensions?
Use relative sizes.

10. How to set dimensions?
Use relative sizes.

11. Whatever screen size,
you just have to look good

12. Whatever screen size,
you just have to look good

13. Screen size = browser window size

14. Scale
first, then
rearrange.

15. The Boston Globe www.bostonglobe.com
desktop
iPhone
iPad landscape
iPad portrait

16. Supereight Studio www.supereightstudios.com
desktop
iPhone
iPad landscape
iPad portrait

17. Neo www.neolab.no
desktop
iPhone
iPad landscape
iPad portrait

18. Wythe Hotel www.wythehotel.com
desktop
iPhone
iPad landscape
iPad portrait

19. Grk fresh greek www.grkfresh.com
desktop
iPhone
iPad landscape
iPad portrait

20. Some things to consider:
— fluid layout
— the hierarchy
— no roll-overs on tablets & phones
— size (& margins) of links and buttons