The A List Apart Blog Presents:

Content-out Layout: the Resources

Article Continues Below

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:

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:

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:

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:

Working with a Scale

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

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:

About the Author

Nathan Ford

Born and raised in Texas, Nathan now lives just outside Cardiff, Wales. He is the creative director at Mark Boulton Design, and is also the creator and product lead on Gridset, a simple tool that makes designing advanced grid systems for the web a breeze. Catch his occasional thoughts on all aspects of the web at Art=Work.

4 Reader Comments

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Voice Content and Usability

In this excerpt from Voice Content and Usability, author Preston So talks about the messy, primordial nature of human speech and challenges with programming computers to deal with these complexities.
Content

Designing for the Unexpected

As devices continue to diversify in dizzying ways, how can we make sure our work on the web stays as relevant as ever for the long haul? Cathy Dutton shares how practitioners must perfect designs both for the paradigms of the present and the twists of the future, come what may.
Design

Asynchronous Design Critique: Getting Feedback

Receiving feedback can be a stressful experience: will an open-ended question attract helpful guidance or harsh criticism? Erin “Folletto“ Casali coaches us through a process to ensure that feedback always lands gracefully.
Design

Asynchronous Design Critique: Giving Feedback

You’ve heard the term “constructive criticism” countless times but do you know how to deliver it? Part one of this series from Erin ‘Folletto’ Casali gives you a framework for it! Flex your feedback muscles and practice these skills to empower and inspire others without deflating or confusing them.
Design

That’s Not My Burnout

If, like many folks during the pandemic, you’ve begun confusing burnout for achievement, Donna Bungard will show you how to recognize that you’re low on fuel and give you a map of rest stops where you can refill your tank.
Career