Grids are not inclusive. How to design without the grid

Accessibility is a big part of design and while we often cite for color contrast, this only affects about 4% of the world population. To have a larger impact, we should consider the 70% of the world that doesn’t speak English. A Harvard Business Review study found that half of this population believe that information in their language is more important than price. Let me say that another way; 35% of the world might pay more money for the same product if it was presented in their language. That's pretty significant; you could be losing out on revenue just because your product isn't translatable.

So what does this have to do with the grid? Let’s create a “Buy Now” screen with a prominent button. Using the design grid columns we place the button nicely within one of them.

Now imagine a user from Mongolia decides that they want to buy our product. When we translate “Buy Now” into Mongolian the eight English characters increase to 20, a 250% increase, or two and a half times the size of the original button. And you could tell right away that it breaks right out of the grid. If a user saw this on a web page, how could they have enough trust to provide a credit card? They can't even get a button right.

Getting Rid of the Grid

Layout

Websites have built-in alignment rules. Things naturally align to the top left corner. Containers naturally expand to the size of the items within them. Instead of fighting the platform we need to allow the web to work as it's intended. If content needs to increase the size of a button, it should do so. Trying to include additional guidelines like a grid to an existing web interface is just going to have conflicting views about how to display that content. Let the web do the work.

Spacing

Designers often have dozens of tokens to describe all the space in their UI. I'm going to argue you can do it with just two and have complete coverage.

The Gestalt principle of proximity says that items that are close together are more related than items that are farther apart. So if two items are related to each other we can say they have one degree of separation. Items that are a bit less related have two degrees of separation and so on.

To illustrate the point I’m going to use an example that comes from Nathan Curtis's blog post on space and design systems. The three cards are identical and equally spaced so we can imagine that the left and the middle card and right card are all closely related. With that same logic, you could also say that the tags in the cards (Galaxies, Milky Way, Speed of Light) are identical and therefore also closely related. But as we can clearly see on the right image the space between cards is marked as 32 and the space between tags is marked as 8. Hence, the question: How can we represent the same relationship (close) with different amounts of spacing? Well, the answer is a density context.

The cards are in one domain and the tags are in another domain. What matters to us as designers are not the absolute spacing but the relationship between items in that domain. And there are really just two relationships: near and away.

Let's make this tangible with a code example. I have a CodePen sandbox that shows a representation of the card we have above. It has headlines, a paragraph, tags, and a button. To create this I started by identifying the spacing between all these elements, whether they were supposed to have a near relationship, one degree of separation in our previous example, or an away relationship, two degrees of separation. And that's all I really needed here.

We start with the page at one particular density (near 24px, away 32px) for the separation between cards. Then I can drop it down (near 16px, away 24px) for the separation between elements within the card. I change these densities using an HTML attribute that I created called “density-shift”, because we're shifting the density down. I then go on to shift it down another level (near: 8px, away 16px) for each of the core elements of the card: the headlines, the tags, and the button container. Alternatively, you could create a naming convention for each data density for better identification.

You can extend this approach to have even more levels, something like “Cozy” and “Comfortable” found in Gmail for example. Or you can include typography in this system for something like a data dense table that has really tight spacing with really small text. And then a large hero image with lots of spacing and really large text.

Summary

My recommendation is to let the rules of the web allow for content to flow. Be prepared for changes based on user preference. To describe the space between elements, use relationships over pixels and identify when the density should shift as appropriate.

For more about gridless design, visit https://gridless.design

For more about the semantic spacing approach, visit https://complementary.space