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.

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