The Infinite Grid

by Chris Armstrong

28 Reader Comments

Back to the Article
  1. A fluid grid works well for a specific type of layout - a simple two or three column structure - but it starts to fall apart when more complex layouts are required. One simple example - a fluid container in which thumbnail images are placed in a grid pattern. You have three choices, either the thumbnail images increase/decrease in size along with the container or the margins between them increase, or they simply don’t always fit neatly into the available space. This is just one example of where fluid grids aren’t always the optimal solution - there are plenty more. A good designer will spend a great deal of time ensuring a design fits within specific constraints, because, quite simply, canvas matters. White space matters. It brings legibility and order which in turn improves the overall user experience. This is why fixed pixel width grids are often preferred by designers - having a fixed step change between resolutions, rather than a fluid change, allows complete control over the design. Is it such a big deal that a window resized to 1023px will display a 800px version? Absolutely not. When it comes to mobile resolutions below, say 480px, at this point, it may be easier to then resort to percentages rather than pixel widths, as generally, we end up with a one column layout. Both fluid grids and flexible grids have their place. A media intensive site - for instance, photography - may be better suited to a fixed pixel width grid. A Blog, on the other hand, could be better suited to fluid grids.
    Copy & paste the code below to embed this comment.
  2. “Design is a relationship between form and content.” —Paul Rand Paul Rand is one of my [many] design heroes. I think that quote best sums up the visual problem solving that we have before us with The Web as a medium. I am on board with much (if not all) of what was written here. I’ve been working on a rem-based grid system for the last month. Obviously, it will not work as a solution for a client site (see also: IE), but it _is_ fun to experiment with and exploit the malleable qualities of the medium. Kudos to you for this article. And the demos. We’re getting closer :-) Cheers!
    Copy & paste the code below to embed this comment.
  3. matthewtrow is missing the point here. If your design is dependent on a fixed viewport, then you are designing around layout instead of content. Why can’t the layout of photo thumbnails be designed to reflow or change completely to suit the viewport? Photographic sites should focus on the photos, not how the photos are laid out. The key is how the user is viewing or interacting with the photos. If you only want users to view photos from a desktop, then you are ignoring a growing audience of mobile device users.
    Copy & paste the code below to embed this comment.
  4. @Matthew some good points there. I think the answer isn’t fluid OR fixed, but both. It’s something that needs to be decided for every component in every state. In my example (in the larger states) the ‘other article’ thumbnails are fluid, but the main article content is fixed. Keeping the article to a readable measure was important, so I sized it relative to the content (fixed), but since the thumbnails weren’t so width-sensitive I sized them relative to the canvas (fluid). There are definitely still a few cases where it makes sense to use pixels as units (when sizing bitmap-based images for example), I think we just need to be mindful of the connections we’re making when we choose units.
    Copy & paste the code below to embed this comment.
  5. @Leban yeah I’m a big fan of Paul Rand, isn’t it funny how a lot of his principals still hold true in a medium he never designed for? I wonder what the likes of Rand, Muller-Brockmann and Tschichold would have made of the web…
    Copy & paste the code below to embed this comment.
  6. Taking the infinite grid design and full hierarchical design concept to its “mathematical limit,” we’re creating relationships that applied across design/css brings function to “1.0” and style to “0.” This is the difficult compromise found in design, where style (take color) essentially is either to reinforce function with contrast or promote emotion with branding. Thanks, Chris.
    Copy & paste the code below to embed this comment.
  7. I think what this article is trying to say is that we should do away with common breakpoints.  I’m curious to see how quickly this happens.  Today, when so many are dependent on frameworks (which, don’t get me wrong, are a great starting point) to get the job done and front-end design work is further commoditized the space for innovation is less and less.  I don’t think this or any other ubiquitous solution is perfect and so much depends on the client, the budget and what their content needs are.
    Copy & paste the code below to embed this comment.
  8. @Michael - perhaps I didn’t make myself clear.
    I very much advocate a responsive solution for *all* websites.
    Non-fluid responsive layouts have step-changes - 1280 / 1024 / 768 / 480 / 320
    They are pixel based. In other words, they are *still* responsive, but work at set resolutions. This method allows more control over the design. So that photo gallery *will* re-flow to suit specific resolutions. The author of this article points out the problems with that - the many resolutions ‘in-between’ the step changes. I’m of the opinion this isn’t much of an issue for Desktop users, but I’d agree with it for mobile.
    Therefore, a hybrid solution may be the way forward.
    Copy & paste the code below to embed this comment.
  9. The design looks to have failed. I saved the page to test it locally. When I saw it on a maximized screen, the horizontal scroll bar shows its ugly head.
    The basic purpose of a perfect design is it should never display scroll bar and the margins should be same everywhere.
    What is missing here?
    Can I get un-minified js source (goes with 267a1bd9-70b5-4df2-a142-052b3377ac07.js on local HDD) so that I can work on it further?
    Very good concept though.
    Copy & paste the code below to embed this comment.
  10. @Derek I totally agree, every project is different. Even something as simple as changing the font means reconsidering the ideal column width, which has a huge knock-on effect on a layout. Frameworks with specific dimensions are like sums (1 + 1 = 2), they have a finite number of outcomes. What we need are frameworks that are like formulas (x + y = z), they define important relationships but get you to adjust the variables to be right for your project. This is what we tried to do with the “Goldilocks Approach”:http://goldilocksapproach.com
    Copy & paste the code below to embed this comment.
  11. @Chris Armstrong - I’ve often pondered that myself. It makes it tough when our heroes are dead. The best we can do is embrace their teachings and _try_ to apply their principles to our work. If only… :-)
    Copy & paste the code below to embed this comment.
  12. I am running Chrome and Firefox on Ubuntu.
    On Chrome, the bottom, section five through section seven, expands to the whole page. On Firefox, the bottom only shows up below content ... I call our world Flatland ...
    How can we trust the article? The author has not even answered my earlier comment.
    Responsive design has a certain responsibility and it must be taken into the right consideration while even writing articles, esp. if you’re on AlistApart. A lot of people are following you for the advice and you can’t just deliver pre-alpha articles.
    I would like the author responds to my comment. Please write to nitin.nanivadekar@gmail.com if you want to keep it private.
    Copy & paste the code below to embed this comment.
  13. @Nitan thanks for your comments :) As I mentioned in the source code, the examples were built to visually demonstrate the article’s ideas, and I’m sure there are far more effective ways to execute them. I’ll fire you an email to discuss further, rather than getting too technical here :)
    Copy & paste the code below to embed this comment.
  14. The page scrolling in your webpage should be fluid but its not in my windows phone!!
    You should check it out. Otherwise is just a perfect concept itself.
    Copy & paste the code below to embed this comment.
  15. Like every project the answer is ... it depends. We’ll use total fluid and infinite grid layout when designing a content oriented website targeted for a full range of devices.
    When images are part of the design and not only in the content. Pourcentages heights of images can become hard to manage and maintain. But clearly future proofed ;-)
    Copy & paste the code below to embed this comment.
  16. For simply and scalable grids design check “boxesPhi”. A simply grid system for jquery & javascript at www.cheflecode.com/boxesPhi
    Copy & paste the code below to embed this comment.
  17. I always find it rather patronising when promoters responsive design see the subject as a must because it is never backed up by user research. Where can I find user research on responsive design? I do build fluid sites (£££) but personally when I browse I prefer a fixed site. For example as you get smaller content is often moved around making it hard to find and often removed all together. This is typical when going to desk top to mobile on both the FT and the BBC websites. Also having to scroll and scroll and scroll homepages can be a pain when you can move left to right as well as up and down and pinch zoom on a mobile more efficiently.
    Copy & paste the code below to embed this comment.
  18. Still dipping my toes into the responsive way of web building but this is fantastic food for through. Great work Chris!
    Copy & paste the code below to embed this comment.
  19. Great question! I guess the theory is that designs which take your particular environment into consideration will produce better experiences than one-size-fits-all solutions. Imagine if pocket novels simply scaled down text size and layout, and came with magnifying glasses to help you read them? Giving the user a layout that’s better suited to their canvas size may result in them having to turn more pages (or scroll more), but if done right it should make the content more accessible and pleasant to consume. Thankfully, some cold hard data is starting to come to light to support this theory. Here are a few recent examples where RWD has had a successful impact:
    • http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/
    • http://www.bostonglobe.com/business/2012/10/30/the-boston-globe-circulation-rises-nearly-percent-herald-falls-nearly-percent/OSqacPxh1L0kQycUnBP1oM/story.html This does raise another valid issue though: user preference. When we make responsive design choices, we’re making assumptions about the context in which a user is viewing content. For example, you might assume that because a user’s canvas width is <400px that they’re on a mobile device, probably with a touch interface. However they could simply have their browser window at a narrow width in the corner of their desktop. It’s our job as designers to make the best assumptions we can with the data we have available, but we’re not always going to get it right, and that’s when giving users options to customise their experience could be helpful (if done in a way that does’t impede the experience for everyone else). Something we need to think more about, I reckon.
    Copy & paste the code below to embed this comment.
  20. @Derek I totally agree, every project is different. Even something as simple as changing the font means reconsidering the ideal column width, which has a huge knock-on effect on a layout.
    Copy & paste the code below to embed this comment.
  21. Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
    Copy & paste the code below to embed this comment.
  22. I am all for content-first strategies. The problem with this approach though, is it seems all the tools and libraries available are optimised for layout-first grids. Right now it seems like each developer is on their own, having to read generic advice and apply it on a case-by-case basis. I wonder if it is possible to distill a finite number of content types from the wide spectrum of content in the wild? It would seem like this is a necessary step towards being able to offer advice, tools and libraries that are both practical and specific. PS. after authenticating with Twitter, I was sent back to the home-page: not very convenient. :P
    Copy & paste the code below to embed this comment.
  23. The examples currently appear to be broken. Thought provoking article and the water analogy is a good one.
    Copy & paste the code below to embed this comment.
  24. @Rob Wood Strange, the links are working for me. Perhaps it was a temporary hiccup.
    Copy & paste the code below to embed this comment.
  25. @Rose Weisburd They work fine now. I think it was a problem with http://responsive.is so not the article at all. Apologies to the author!
    Copy & paste the code below to embed this comment.
  26. Thanks for the article. After reading a number of articles on responsive and fluid web design I’d like to offer my own quirky perspective. I can see the benefits of setting up mathematical routines that serve to rearrange a set of visual elements within any number different rectangles but, for me, the benefits seem to be primarily in speeding up productivity. However, it seems to me that a number of the articles in ALA’s “Responsive Design” category are casting fixed designs/layouts in an unflattering way. The wish for that which might be called Eternity is seen as a foolish wish. In contrast, the wish to ‘let go of control’ is associated with an outlook that would be held by a Buddhist sage. I wouldn’t have such a difficult time accepting the premise of setting up an automated layout routine if this premise was being presented as a solution to certain economic and time constraints. Instead, these automated layout routines are endowed with an air of mysticism which, to me, seems unnecessary and misleading. I would prefer to let myself fall under the influenced of a design (e.g. building, website,...) of a human being who was engaged in an inner process of observing how a set of spatial relationships influenced his/her being, and who was then able to recognize in him/herself, and communicate (via stone, glass, wood, pixels, etc.) something of a universal idea or feeling. The alternative would be to let myself be influenced by a mechanism that calculates how far a wall should move away from me when I walk into a room (responsive architecture), or how my column widths distribute themselves (responsive web page). If the current economy was able to support a scenario where a strong designer actually designed (manually) twelve different fixed layouts, each for different devices, I would get more pleasure in looking at how she or he tried to communicate the same feeling/idea in twelve different ways. In this world where “content is king”, apparently aesthetics is the lowly serf. Visual relationships are demoted to the level of “style”. Sorry to be such a contrarian.
    Copy & paste the code below to embed this comment.
  27. I have started using Gridset recently, it is incredibly simple to use and allows for much more flexibility than responsive frameworks. it is easy to amend and integrate new grids,  which I think possibly solves the layout sell-by date problem.
    Copy & paste the code below to embed this comment.
  28. James, I took a look at a couple of the Gridset demos, and I think it’s pretty amazing that the developers have come as far as they have with this goal of aiding designers in organizing visual elements. The one thing that I still wish to see is an approach to design where two-dimensional areas are related to one another. In the article above Chris mentions the notion of “important relationships”, and I think that strong 2D design is based on these relationships. As far as I can tell, Gridset (and I haven’t yet looked into other tools) seems to take the ratios that we wish to establish — for example, the ratio between column width and gutter width — and maintains that proportion when I alter my browser width. So, this tool gives me a scalable harmony in the horizontal dimension. Next, I see that the CSS handles the ratios between font-size and line-heights so that even as I change my browser’s width these ratios are preserved in the vertical dimension. What would be great is if the horizontal relationships could be “synchronized” with the vertical relationships. This would bring true 2D design to web layouts. In his book, The Elements of Dynamic Symmetry, Jay Hambidge writes about Ancient Greek design (p. 18), and mentions that their great achievement was to think in terms of area relationships rather than linear relationships. It really seems like a challenge to invent an automatic grid system. Incidentally — and I’m reading the Jeremy Keith quote above out of context —once I learn from the client what it is that they wish to communicate (through conversations, and by looking at the text and images that they provide) I think that a predefined grid system and a predefined color scheme make a good deal of sense … and, until I come across a grid system that marries the vertical to the horizontal I’ll keep working off of my old hand-made grids.
    Copy & paste the code below to embed this comment.