• Like
  • Save
Responsive Design Lessons
Upcoming SlideShare
Loading in...5
×
 

Responsive Design Lessons

on

  • 634 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
634
Views on SlideShare
633
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 Responsive Design Lessons Presentation Transcript

    • 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 viewing experience ... across a wide range of devices http://en.wikipedia.org/wiki/Responsive_web_design
    • 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!