Responsive Design Lessons

My Lessons from Responsive Design

DAN NAUMANN

Responsive Design

Responsive web design

(RWD) is a web design

approach aimed at crafting

sites to provide an optimal

viewing experience ...

across a wide range of

devices

http://en.wikipedia.org/wiki/Responsive_web_design

Responsive Designhttp://www.kareyhelms.com/2012/08/new-work-plbsearch/

Frameworks

Frameworkshttp://usablica.github.io/front-end-frameworks/compare.html

Wireframes (Process)

Wireframes (Process)http://www.divshot.com/

Browser vendors x Versions x Screen sizes

Testing

Testinghttp://responsivenews.co.uk/post/56884056177/wraith

Responsive Images

Bandwidth?

Responsive Images

Javascript?

Attributes?

Same image?

<picture>?

Mobile Firsthttp://themes.elmastudio.de/nori/

Mobile First

Focus content and features

Post processing

Rems

Rems = Root ems

Rems

Relative sizing without the problems of

ems

Rems

12px 13px 14px

Rems

Any dimensions!

Fonts, padding, etc.

Patternshttp://getbootstrap.com/2.3.2/

Patterns

http://bradfrostweb.com/

Brad Frost

Dan Naumann @danielnaumann

Thank you!