This document discusses responsive design from a visual design perspective. It explains that responsive design uses a flexible grid, flexible images sized with max-width: 100%, and media queries to adapt layouts based on screen size. It provides examples of responsive design implementations and resources for learning more about the approach. The workflow section suggests how to approach building a responsive design.

1. RESPONSIVE DESIGN:
A VISUAL DESIGN PERSPECTIVE
July 19th 2012

4. WHY RESPONSIVE DESIGN?

5. WHY RESPONSIVE DESIGN?
3 main
elements:
• Flexible Grid
• Flexible Images
• Media Queries

6. THE FLEXIBLE GRID
Target ÷ Context
= Result
%

7. FLEXIBLE IMAGES
max-width: 100%

8. CSS MEDIA QUERIES
… aaaand this is where they lost me

9. WORKFLOW

10. WORKFLOW

11. WORKFLOW
How to approach responsive design

12. WORKFLOW
960 px
600 px
480 px
768 px
320 px

13. FURTHER READING
• Examples:
– bostonglobe.com
– anderssonwise.com
– us.illyissimo.com
– stephencaver.com
– moosylvania.com/blog
• Resources:
– Responsive Web Design
– alistapart.com
– upstatement.com
– smashingmagazine.com
– theexpressiveweb.com

14. THANK YOU
Kristen Gau
kristeng@theswitch.us
@thegauhaus
liberateyourbrand.com
@liberate