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 Antonio Carusone
- “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
thank you Nathan, awesome list, really appreciated.
Great list. I also found this book fascinating: Geometry of Design: Studies in Proportion and Composition by Kimberly Elam
@Martin: Oh yeah, a classic. Lots of great books on the subject, but I limited this to the immediate gratification of online resources.
Thanks, Nathan.
This collection of links was made for me 😉