Responsive design is a web design approach that makes web pages render well on different devices and screen sizes. It has become necessary due to the massive increase in mobile and tablet use. Responsive design uses fluid grids and layouts, images, and CSS media queries to automatically adjust and optimize content for viewing across devices. Examples of responsive design include sites from The Boston Globe, Smashing Magazine, and Lancaster University.

1. Hugh Law

2. What is Responsive Design?
Source: http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php
Responsive Design 2

3. Why do we need it?
• Massive increase in mobile/tablet use
• Android > Windows PC by Summer 2013*
*Source: Mary Meeker, KPCB
Responsive Design 3

4. Examples
• Boston Globe
• Smashing Magazine
• Lancaster University
• Andersson-Wise
Responsive Design 4

5. Things to consider
• More of an agile approach to design
• Increased design time
• Embrace your constraints
Responsive Design 5

6. Common Pitfalls
• Hiding Content
• Page Size
• Using Specified Dimensions
• Ignoring Context
• Not taking advantage of device features
Responsive Design 6

7. Responsive Design 7

8. Responsive Design 8

9. Responsive Design 9

10. Responsive Design 10

11. Responsive Design 11

12. Responsive Design 12

13. Responsive Design 13

14. Responsive Design 14

15. Responsive Design 15