Responsive Web Design
0 likes537 views
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.
Responsive Web Design
- 1. RESPONSIVE DESIGN: A VISUAL DESIGN PERSPECTIVE July 19th 2012
- 5. WHY RESPONSIVE DESIGN? 3 main elements: • Flexible Grid • Flexible Images • Media Queries
- 6. THE FLEXIBLE GRID Target ÷ Context = Result %
- 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