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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive Design Lessons

  • 507 views
Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
507
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

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