Nathan Ford: Connecting Content, Layout, and Device Through Fluid Grids
Nathan Ford (@nathan_ford) was speaking at Smashing Conference about flexible grids, these are my notes from his talk.
We have a problem: designs are starting to coalesce round a small number of key designs. The layout isn't saying anything unique.
It's difficult to communicate to everybody with the same message. Designing for everyone is designing for no one. Design should be a bridge between our content and our audience.
Not doing agile, doing everything all the time. Not tied up by user stories and strictly following Agile.
Designing for a fluid canvass feels very new. Two things are difficult about RWD:
- Workflow - structure often gets in the way.
- Testing - has grown exponentially. Infinite number of viewports on an infinite number of devices.
Grids are often the culprit behind bad RWD.
- Sevens: The image shrinks in height and the content shrinks in width so leaves a gap.
- Drifters: Horizontal margins get wider than vertical margins.
- Pinchers: Opposite of drifters.
- Giving up: under a certain size it just goes full width.
Grids aren't the problem, it's how we use them. We use a swiss grid system. We need to re-examine grids. We're fitting our content into grids, not building grids round our content. Work with the grain of fluid design.
Content out
- Start with content - if you don't have it then make it up, people will soon fix it if they care.
- Construct your layout from the content out.
- Bind the content to the device.
Identify:
- Constraints: adverts, images, required information
- Patterns: look for repeating units.
The less columns you have the clearer your layout will be. Columns lead to boring layouts, build using proportions as that translates to better fluid layouts. Use relationships.
The most famous ratio is the golden ratio but there are others - e.g. 12 orthogons.
modularscale.com applies it to typography. Start with a the base unit of your typography and then keep multiplying up by your scale. Doing this eight times should give you enough 'notes' to work with. Pick two notes from your scale to generate the ratio between two items.
Content grids will use flexbox and our layout grids will use viewport width units - currently using percentages.
Make the layout feel deliberate. How can we make the space feel harmonious with the viewport.
- Choose a ratio
- Content grids for patterns
- Divide space with layout grids