building responsive websites

W W W

Building responsive websites E2 Partners | 9 Oktober 2013 | Erik Lenaerts

Easy reading

Easy navigation

Minimal scrolling

Minimal resizing

Responsive design is

Mobile behavior

Touch enabled

Tappiness

Responsive design is not per se

Across device One codebase, one url for all devices.

If you build a new website or web application

Why not?

Gr

id

Solid visual and structural balance of web-sites Layout the site elements on the grid

Use the grid for device specific breakpoints

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;

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

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/

Browser equality

Progressive

Enhancement

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

Bootstrap 3 Foundation 4 Skeleton HTML5 Kickstart

http://responsive.vermilion.com/compare.php

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 , …

Design should be great Design should be gorgeous Design should be addictive Design should be intuitive