building responsive websites
DESCRIPTION
Introduction in responsive web design.TRANSCRIPT
![Page 1: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/1.jpg)
W W W
Building responsive websites E2 Partners | 9 Oktober 2013 | Erik Lenaerts
![Page 2: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/2.jpg)
Easy reading
Easy navigation
Minimal scrolling
Minimal resizing
Responsive design is
![Page 3: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/3.jpg)
Mobile behavior
Touch enabled
Tappiness
Responsive design is not per se
![Page 4: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/4.jpg)
Across device One codebase, one url for all devices.
![Page 5: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/5.jpg)
If you build a new website or web application
Why not?
![Page 6: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/6.jpg)
![Page 7: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/7.jpg)
Gr
id
Solid visual and structural balance of web-sites Layout the site elements on the grid
Use the grid for device specific breakpoints
![Page 8: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/8.jpg)
A u t o m a t i c i m a g e r e s i z i n g max-width: 100%; height: auto;
![Page 9: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/9.jpg)
Media queries @media(max-width: 768px)
![Page 10: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/10.jpg)
Text % em rem vw vh vmin
1em = 12pt = 16px = 100%
Aim between 50 and 75 characters per line
┌
├
└
Use relative font sizes
Font size and line height are proportionally related. http://www.pearsonified.com/2011/12/golden-ratio-typography.php
http://www.webdesignerdepot.com/2012/10/a-simple-guide-to-responsive-typography/
http://www.sitepoint.com/new-css3-relative-font-size/
![Page 11: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/11.jpg)
Browser equality
![Page 12: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/12.jpg)
Progressive
Enhancement
![Page 13: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/13.jpg)
RESS Responsive Webdesign with server side coding
If you want layout adjustments across devices
And optimization at the component level to increase performance or tune user experience
You trust server-side device detection with sensible defautls
![Page 14: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/14.jpg)
Bootstrap 3 Foundation 4 Skeleton HTML5 Kickstart
http://responsive.vermilion.com/compare.php
![Page 15: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/15.jpg)
C S S 3 + H T ML 5 + J a v a scr i p t J Q u e r y , L E S S , f o n t a w e s o m e , A n g u l a r J S , …
![Page 16: Building responsive websites](https://reader034.vdocuments.us/reader034/viewer/2022051322/545bfc5cb0af9f0d318b45f7/html5/thumbnails/16.jpg)
Design should be great Design should be gorgeous Design should be addictive Design should be intuitive