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 viewi...
Responsive Design
http://www.kareyhelms.com/2012/08/new-work-plbsearch/
Frameworks
Frameworks
http://usablica.github.io/front-end-frameworks/compare.html
Wireframes (Process)
Wireframes (Process)
http://www.divshot.com/
Browser vendors x
Versions x
Screen sizes
Testing
Testing
http://responsivenews.co.uk/post/56884056177/wraith
Responsive Images
Bandwidth?
Responsive Images
Javascript?
Attributes?
Same image?
<picture>?
Mobile First
http://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.
Patterns http://getbootstrap.com/2.3.2/
Patterns
http://bradfrostweb.com/
Brad Frost
Dan Naumann
@danielnaumann
Thank you!
Upcoming SlideShare
Loading in...5
×

Responsive Design Lessons

577

Published on

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.

Published in: Design, Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
577
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive Design Lessons"

  1. 1. My Lessons from Responsive Design DAN NAUMANN
  2. 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. 3. Responsive Design http://www.kareyhelms.com/2012/08/new-work-plbsearch/
  4. 4. Frameworks
  5. 5. Frameworks http://usablica.github.io/front-end-frameworks/compare.html
  6. 6. Wireframes (Process)
  7. 7. Wireframes (Process) http://www.divshot.com/
  8. 8. Browser vendors x Versions x Screen sizes Testing
  9. 9. Testing http://responsivenews.co.uk/post/56884056177/wraith
  10. 10. Responsive Images
  11. 11. Bandwidth? Responsive Images Javascript? Attributes? Same image? <picture>?
  12. 12. Mobile First http://themes.elmastudio.de/nori/
  13. 13. Mobile First Focus content and features Post processing
  14. 14. Rems Rems = Root ems
  15. 15. Rems Relative sizing without the problems of ems
  16. 16. Rems 12px 13px 14px
  17. 17. Rems Any dimensions! Fonts, padding, etc.
  18. 18. Patterns http://getbootstrap.com/2.3.2/
  19. 19. Patterns http://bradfrostweb.com/ Brad Frost
  20. 20. Dan Naumann @danielnaumann Thank you!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×