Responsive Design Lessons

  • 489 views
Uploaded 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.

More 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
489
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

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