Content-out Layout: the Resources

The method I outlined in my recent article, “Content-out Layout,” is actually the culmination of quite a few different influences. If you’re interested in a deep dive, I have compiled this list of the most useful thinking on the web about ratios, grids, and fluid design. Enjoy!

Grids

Grids, as we know them, are having to adapt to a fluid canvas. It helps, first, to have a strong understanding of how grids are built, how they’ve traditionally been applied in design, and how they work into responsive design:

• “Five simple steps to designing grid systems” by Mark Boulton
• The Grid System created by Anto­nio Caru­sone
• “Fluid Grids” by Ethan Marcotte

Philosophy of Fluid Layout

As we stop designing pages on the web, and start designing systems to be applied across myriad viewports, it helps to have the right mindset:

• “A New Canon” by Mark Boulton
• “The In-Between” also by Mark Boulton
• “The Infinite Grid” by Chris Armstrong

Ratios in Nature and Design

Ratios are nothing new in design. The underlying mathematics of natural phenomena have inspired architects, sculptors and humans in general for centuries:

• Dynamic rectangles on Wikipedia
• “You do the math!” an interview with Peter Crnokrak
• Mathematics and Architecture on Wikipedia

Ratios in Web Design

Using ratios in web layouts has been explored before. I found these two very different posts inspirational in searching for a way to work with ratios in fluid design:

• “What’s Golden” by Jason Santa Maria
• “Composing the New Canon” by Owen Gregory

Working with a Scale

Typographers will find working with scales familiar. There is lots of great thinking, here, that can be adapted for layout:

• “Don’t compose without a scale” from The Elements of Typographic Style Applied to the Web by Richard Rutter
• “More Meaningful Typography” and Modular Scale by Tim Brown
• “A More Modern Scale for Web Typography” by Jason Pamental

On Harmony in Book Design

I didn’t get the space to touch on this much in my article, but even in a fluid environment, it is ideal to think about the relationship of your content area and the viewport. Book designers have been exploring this idea since the 16th century:

• “The Form of the Book, Digested” a selection of excerpts from The Form of the Book, by Jan Tschichold, which is sadly out of print
• An excerpt from Book Design, by Andrew Haslam