Your SlideShare is downloading. ×
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Responsive Design Lessons
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Design Lessons

547

Published on

This is a short presentation on some lessons and tips I've learnt through some of my first responsive design projects. …

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
547
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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!

×