responsive design - no size, fits all
DESCRIPTION
An introduction to responsive design. A short introduction for designers and project managers.TRANSCRIPT
![Page 1: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/1.jpg)
Responsive design– no size, fi ts all
![Page 2: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/2.jpg)
Design for the monitor
![Page 3: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/3.jpg)
Should also fi t on the laptopon the laptop
![Page 4: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/4.jpg)
…or a tablet…
![Page 5: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/5.jpg)
…and even a mobile
![Page 6: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/6.jpg)
Because you don’t know what device a visitor is usingwhen visiting your website.
![Page 7: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/7.jpg)
There is not ‘one size’
![Page 8: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/8.jpg)
How to set dimensions?Use relative sizes.
![Page 9: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/9.jpg)
How to set dimensions?Use relative sizes.Use relative sizes.
![Page 10: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/10.jpg)
How to set dimensions?Use relative sizes.Use relative sizes.
![Page 11: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/11.jpg)
Whatever screen size,you just have to look good
![Page 12: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/12.jpg)
Whatever screen size,you just have to look good
![Page 13: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/13.jpg)
Screen size = browser window size
![Page 14: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/14.jpg)
Scale fi rst, then rearrange.
![Page 15: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/15.jpg)
desktopdesktop
The Boston Globe www.bostonglobe.com
iPhoneiPhoneiPhoneiPhone
iPad landscapeiPad landscape
iPad portraitiPad portrait
![Page 16: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/16.jpg)
desktopdesktop
Supereight Studio
iPhoneiPhoneiPhoneiPhone
iPad landscapeiPad landscape
iPad portraitiPad portrait
www.supereightstudios.com
![Page 17: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/17.jpg)
desktopdesktop
Neo
iPhoneiPhoneiPhoneiPhone
iPad landscapeiPad landscape
iPad portraitiPad portrait
www.neolab.no
![Page 18: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/18.jpg)
desktopdesktop
Wythe Hotel
iPhoneiPhoneiPhoneiPhone
iPad landscapeiPad landscape
iPad portraitiPad portrait
www.wythehotel.com
![Page 19: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/19.jpg)
desktopdesktop
Grk fresh greek
iPhoneiPhoneiPhoneiPhone
iPad landscapeiPad landscape
iPad portraitiPad portrait
www.grkfresh.com
![Page 20: Responsive design - no size, fits all](https://reader034.vdocuments.site/reader034/viewer/2022052601/558ce58bd8b42a76628b4680/html5/thumbnails/20.jpg)
Some things to consider:— fl uid layout— the hierarchy— no roll-overs on tablets & phones— size (& margins) of links and buttons