Content-out Layout

by Nathan Ford

23 Reader Comments

Back to the Article
  1. Great article! Just one question, i’m confused about the golden ratio blurb. It doesn’t look like the width of the text column is 1.618 x larger than the image column… am I reading this wrong?
    Copy & paste the code below to embed this comment.
  2. Good question Thijs. The blurb grid uses the 6th and 8th “notes” from our scale, 2 notes apart, so the difference is 1.618 to the power of 2 (2.617924). Therefore the text column is 2.617924 times larger than the image column.
    Copy & paste the code below to embed this comment.
  3. I thoroughly enjoyed reading your article: great stuff. “Fitting to constraints” threw a whole new light on something I thought I knew all along. Content-Out is the way to go, but for me Canvas-In can’t be ignored either: No matter which proportioning system I’ve used in the past I’ve bumped by head against how my layout fits in its viewport. There is always a window proportion where an important page element ends up below the fold (amongst other annoyances)… I’ve been playing with a variation on the Van De Graaf page layout canon (canvas-in, macro grid) for page layout, and Golden Mean (content-out, micro grid) for type. See http://all-sorts.biz/architects-websites/in-search-of-the-perfect-web-layout . Interesting read! Thank you.
    Copy & paste the code below to embed this comment.
  4. You’re absolutely right, Gary. Given more space in this article, I would have addressed the connection between the viewport and content. Though I do see this falling later in the process, so it still flows content out. I should probably write this up somewhere.
    Copy & paste the code below to embed this comment.
  5. Thank you Mr. Ford!
    Copy & paste the code below to embed this comment.
  6. Thanks for this article Nathan - I’ve struggled a bit to find the right hook to use as my base unit, and I really like the idea of building the grid out from something as simple as the base font size. I’ve been quite interested in the idea of a compound grid system with an irrational grid laid on top of a rational grid. Placing site-wide elements like navigation, headers, footers etc. on to a rational grid brings a real sense of order and dependability, while using an irrational grid for the page content allows me to get nicely off-kilter if I want. I’ve never quite managed to get that working as harmoniously as I would like, but I’m going to give it another go using the base font size as the base unit for both grids.
    Copy & paste the code below to embed this comment.
  7. One question, Nathan: when building grids like this which are based on ratios, how do you decide where to place the margins? In figure #11, you have a two column grid with the right edge of the image placed along the dividing line, but it could have just as easily been the left edge of the text which is aligned instead. You could have also chosen to split the difference and have the line fall between the image and the text, how do you decide?
    Copy & paste the code below to embed this comment.
  8. Very insightful, Dan. Fluid gutters can cause headaches, so I sometimes prefer to apply margins to elements instead. In the blurb example, I felt the shape of the text is more inferred by the space around it (more than the image), so it could absorb the margin and still keep the visual relationship. This is, of course, a judgement call, and depends on the context. The goal being to separate the content just enough, and keep the visual (maybe not exact) proportion between elements.
    Copy & paste the code below to embed this comment.
  9. Very nice article!  I’m going to come back and spend some more time with it, but as an illustrator I’ve always been fascinated by the golden ratio.  You might like this article on its use in illustration design by Maxfield Parrish.  I hadn’t thought of using it in a grid system, but I’ll be playing with it shortly. (Also see this calculator for working out golden ratios.  Adding the multiplications for the golden ratio looks like a nice little weekend project.) Edit: Updated the calculator to display the 8 notes for any number you enter. Ironically, the page is on the 960 grid.
    Copy & paste the code below to embed this comment.
  10. Nathan commented about the relation between content & viewport:
    “I should probably write this up somewhere.” Yes, please! “Though I do see this falling later in the process” I’d love to hear your insights on this. My take is that you need to think about both simultaneously, else trouble sets in once you start testing your layout across various screen proportions.
    Copy & paste the code below to embed this comment.
  11. Awesome! As a content strategist, I love seeing designers and architects really care about and solve for content ... because at the end of the day, it’s about consumption, connection and engagement. And we all know when design, interaction and content work together in harmony—BAM!—it’s not just a beautiful thing, it’s an experience that truly meets the goals of the user and the business. Thanks, Nathan.
    Copy & paste the code below to embed this comment.
  12. I appreciate your research which is done by you very well, i also agreed with your kind information of content layout, but i have a little question, if designer not a writer than how can he/she manage its layout content, i know for a web design he/she must need to take care regarding page payout but also this little confusion is surrounding in my mind so please share more steps if know well.
    Thanks
    http://www.logodesignbest.com/
    Copy & paste the code below to embed this comment.
  13. @Shawn: It is important to start the design process with content. So, in a redesign, scrape some existing content from the site. In the case of new content being needed, try making it up. Your client/writers will definitely have opinions on your attempts. This tends to get them motivated to provide the real content. I know starting with content is not always possible, but you can make some educated assumptions and start working out from there.
    Copy & paste the code below to embed this comment.
  14. Thoroughly enjoyed this article! I have made use of the golden ratio in my designs in the past and have been very pleased with the results. It really lends itself to creating a design that feels organic and interesting. I don’t know why, but I haven’t used it much lately. Time to dust off the ol’ golden ratio for my next design! =)
    Copy & paste the code below to embed this comment.
  15. good indeed.
    Copy & paste the code below to embed this comment.
  16. Figure 13’s image shows three columns labelled 6, 7 and 8. The caption states “A four-column article grid using 1 and 2 from our scale.” I’m not understanding this one. May you help me?
    Copy & paste the code below to embed this comment.
  17. Decent article, but did we need the political headlines snuck into the figures at the end?
    Copy & paste the code below to embed this comment.
  18. @powrsurg: The headlines were from real layouts from fairly neutral sites (mashable and time, if I remember correctly). Nothing political intended, just pulling from real world responsive sites… though I think these sites are on new iterations by now.
    Copy & paste the code below to embed this comment.
  19. I forgot to mention this when I first read this amazing article: Isn’t figure #13 showcasing a 3-column grid instead of a four-column grid?
    Copy & paste the code below to embed this comment.
  20. I think methods like http://gridstylesheets.org/ are the way forward we are no longer constrained by the limitations of the archaic css methodology, it’s in a very early phase but it potential in the future of layout is something to stand up and take notice of.
    Copy & paste the code below to embed this comment.
  21. I really like this system but I’m having trouble understanding how to use the ratios to design the grids. You say to multiply the base by the right side of the ratio and repeat for each step but then you use the Golden Ratio as an example where you’re adding. Additionally how would you suggest using this system with something like Bourbon Neat?
    Copy & paste the code below to embed this comment.
  22. Hey Mr. Ford, you made my morning one of the most interesting that I can remember. Thanks!
    Copy & paste the code below to embed this comment.
  23. Great article! Adjustable electric beds!
    Copy & paste the code below to embed this comment.