Responsive design - no size, fits all

Responsive design– no size, fi ts all

Design for the monitor

Should also fi t on the laptopon the laptop

…or a tablet…

…and even a mobile

Because you don’t know what device a visitor is usingwhen visiting your website.

There is not ‘one size’

How to set dimensions?Use relative sizes.

How to set dimensions?Use relative sizes.Use relative sizes.

How to set dimensions?Use relative sizes.Use relative sizes.

Whatever screen size,you just have to look good

Whatever screen size,you just have to look good

Screen size = browser window size

Scale fi rst, then rearrange.

desktopdesktop

The Boston Globe www.bostonglobe.com

iPhoneiPhoneiPhoneiPhone

iPad landscapeiPad landscape

iPad portraitiPad portrait

desktopdesktop

Supereight Studio

iPhoneiPhoneiPhoneiPhone

iPad landscapeiPad landscape

iPad portraitiPad portrait

www.supereightstudios.com

desktopdesktop

Neo

iPhoneiPhoneiPhoneiPhone

iPad landscapeiPad landscape

iPad portraitiPad portrait

www.neolab.no

desktopdesktop

Wythe Hotel

iPhoneiPhoneiPhoneiPhone

iPad landscapeiPad landscape

iPad portraitiPad portrait

www.wythehotel.com

desktopdesktop

Grk fresh greek

iPhoneiPhoneiPhoneiPhone

iPad landscapeiPad landscape

iPad portraitiPad portrait

www.grkfresh.com

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