Benchmarking of Responsive Websites - UEM Sunrise Websites - [ February 2016 ]
Building responsive websites
-
Upload
e2-partners -
Category
Technology
-
view
749 -
download
0
description
Transcript of 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