This is a short presentation on some lessons and tips I've learnt through some of my first responsive design projects. This talk is from a Pecha Kucha night at UX Brisbane.

1. My Lessons from
Responsive Design
DAN NAUMANN

2. 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

3. Responsive Design
http://www.kareyhelms.com/2012/08/new-work-plbsearch/

4. Frameworks

5. Frameworks
http://usablica.github.io/front-end-frameworks/compare.html

6. Wireframes (Process)

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

8. Browser vendors x
Versions x
Screen sizes
Testing

9. Testing
http://responsivenews.co.uk/post/56884056177/wraith

10. Responsive Images

11. Bandwidth?
Responsive Images
Javascript?
Attributes?
Same image?
<picture>?

12. Mobile First
http://themes.elmastudio.de/nori/

13. Mobile First
Focus content and
features
Post processing

14. Rems
Rems = Root
ems

15. Rems
Relative sizing
without the
problems of ems

16. Rems
12px 13px 14px

17. Rems
Any dimensions!
Fonts, padding, etc.

18. Patterns http://getbootstrap.com/2.3.2/

19. Patterns
http://bradfrostweb.com/
Brad Frost

20. Dan Naumann
@danielnaumann
Thank you!