Responsive Design Lessons
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Design Lessons

on

  • 685 views

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.

Statistics

Views

Total Views
685
Views on SlideShare
684
Embed Views
1

Actions

Likes
1
Downloads
19
Comments
0

1 Embed 1

http://dschool.co 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design Lessons Presentation 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!