Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Design Patterns

Responsive Design Patterns

A talk given at @_skillswap as part of their Responsive Web Design programme. This talk covered one approach to building a responsive website, how to include the whole spectrum of project participants, and making the project a success for users as well as the client.

9be8367907d042cb538af6697549e47e?s=128

Pete Fairhurst

June 11, 2013
Tweet

Transcript

  1. Responsive Design Patterns #skillsponsive @markedup

  2. #skillsponsive @markedup Responsive Design Patterns

  3. #skillsponsive @markedup Responsive Design Patterns “Ensure project scoping happens collaboratively,

    with as many stake holders and project contributors as possible.”
  4. #skillsponsive @markedup Responsive Design Patterns “Every website’s primary goal should

    be to share information as effectively and widely as possible.”
  5. #skillsponsive @markedup Responsive Design Patterns Content Maps

  6. #skillsponsive @markedup Responsive Design Patterns THE ABSOLUTE MINIMUM! Think of

    the users!
  7. #skillsponsive @markedup Responsive Design Patterns Content Maps

  8. #skillsponsive @markedup Responsive Design Patterns Content Maps 1 3 6

    4 15 8 2
  9. #skillsponsive @markedup Responsive Design Patterns Content Maps

  10. #skillsponsive @markedup Responsive Design Patterns Content Maps 1 3 6

    15 2 4
  11. #skillsponsive @markedup Responsive Design Patterns Content Maps 1 3 6

    15 2 1 3 6 4 15 8 2 4
  12. #skillsponsive @markedup Responsive Design Patterns Start Coding

  13. #skillsponsive @markedup Responsive Design Patterns Start Coding Set up different

    content types Identify common features
  14. #skillsponsive @markedup Responsive Design Patterns TEST CONTINUOUSLY! My phone! Don’t

    be me
  15. #skillsponsive @markedup Responsive Design Patterns Start Coding Set up different

    content types Identify common features Meaningful markup above all else
  16. #skillsponsive @markedup Responsive Design Patterns Real Content

  17. #skillsponsive @markedup Responsive Design Patterns Real Content Keeps whole project

    team engaged Reveals problems sooner Improve content and user experiences
  18. Responsive Design Patterns #skillsponsive @markedup Designed & built by