Introduction in responsive web design.

1. W W W
Building responsive websites
E2 Partners | 9 Oktober 2013 | Erik Lenaerts

2. Easy reading
Easy navigation
Minimal scrolling
Minimal resizing
Responsive design is

3. Mobile behavior
Touch enabled
Tappiness
Responsive design is not per se

4. Across device
One codebase, one url for all devices.

5. If you build a new website or web application
Why not?

7. Grid
Solid visual and structural balance of web-sites
Layout the site elements on the grid
Use the grid for device specific breakpoints

8. Automatic image resizing
max-width: 100%; height: auto;

9. Media queries
@media(max-width: 768px)

10. 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/

11. Browser equality

12. Progressive
Enhancement

13. RESSResponsive 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

14. Bootstrap 3
Foundation 4
Skeleton
HTML5 Kickstart
http://responsive.vermilion.com/compare.php

15. CSS3 + HTML5 + Javascript
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 , …

16. Design should be great
Design should be gorgeous
Design should be addictive
Design should be intuitive