Responsive design – no size, fits all
Responsive design - no size, fits all
Jun 26, 2015
An introduction to responsive design. A short introduction for designers and project managers.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
