responsive design on a grid
Out of context: Reply #41
- Started
- Last post
- 41 Responses
- gramme0
I don't know if this helps, but here's what I do. I think of it like designing any other visual system with different-sized pieces that all need to relate. I also think about how each device is used in terms of touch or click and the space needed to account for those interactions, as well as reading distance.
I design 3–4 checkpoints or scaling moments, and focus on the things that will change once a screen hits each width checkpoint. E.g. for mobile, I'll have a 3 or 4 column grid, then 6 for tall tablet, 12 for 1024 on up. I look at worst-case scenarios in terms of line length for paragraphs. Columns scale however they need to (thank God for developers who can do that math for me), and lately I've been using three different measurements for gutters and margins, as the design goes from mobile to desktop.
I'm currently working on the responsive site for my new company. One thing we're carefully considering is the three reading distance ranges: desktop, knee, and 12"–18" from the eyes. This means the size of p- and h-tags change as the browser expands or collapses. For instance, desktop body copy might be 22px, tablet is 18, and mobile is 15.
I took me a while to get over my negative reaction to largish type on desktop sites (e.g. Medium – http://medium.com/). I finally realized it's just plain usable.