Responsive grids

A short talk I gave to my fellow students on the MA Web Design & Content Planning on 1 May 2013.

Transcript

1. Responsive grids
2. 1. Proportions • Typographic hierarchy • Horizontal measure • Aspect ratio
3. • Define relationships from your content. If none exist, create some. • Use ratios or relational measurements above fixed measurements. • Bind the content to the device. Mark Boulton’s ‘New Canon’:
5. Typographic hierarchy
6. Aspect ratio
7. 1:1
8. 4:3
9. golden ratio
10. Browser chrome changes the aspect ratio!
11. 2. Content choreography (a term coined by Trent Walton)
12. 1 2 3
13. 1 2 3
14. 1 2 3
15. 1 2 3
16. 3. Tools and techniques • CSS border-box • CSS flexible box model • CSS grids (only IE10 for now) • Gridset
17. thank you