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!