What are the benefits?

Here’s why I suggest you use single column web design:

  1. Constraints are good. They encourage creativity. The more you limit yourself on purpose, as a designer, the more creative you will have to be to achieve a good design. If you only allow yourself to use black and white when you design a website, you’ll come up with interesting ways to use those two colours. If you only allow yourself a one column layout, you’re more likely to focus on inventive ways to design the page.
  2. Your design will be ready for small screens. Mobile first design became very important once everyone started to carry the small screen internet everywhere they went. It’s extra effort to figure out how a design should work on a large screen and a small screen, in terms of column layouts. If you design for a single column in both situations, your job is easier.
  3. A single column is how the web works. If you write HTML on its own, and don’t use any CSS, the natural layout of the web is a single column, one element after another. You can take advantage of this natural way to create a website, or you can fight against it.
  4. Related to the above, if you write your own HTML and CSS, single column web design is easier to code. Especially if you’re a designer first and a developer second, you might not have the time to wrestle with the more advanced parts of CSS. Sticking to a single column means you’ll find it easier to build your own websites, and not have to rely on other people to do it.

In Everything Easy is Hard Again, Frank Chimero points out that tables, floats, flexbox, and CSS grid are repeated attempts to solve the same problem.

It was 1997, I was learning HTML, and there was one problem with the design that was confusing me: how do I put two things next to each other? Twenty years later, we’re still working out the answer to that very basic question.

The latest layout technology in CSS is powerful, no doubt about it. I use it myself. But if you ever want to avoid the complexity and take it easy, there’s a solution: don’t put things side by side.

What are the problems? → ← What is single column web design? Back to the table of contents