What is single column web design?

You might be familiar with single column web design already. On devices with small screens like mobile phones, almost every container and element on a website is shown in a single column because of limited screen space. One element follows another vertically down the screen.

The topic of this book, however, is to use that same approach to layout even on larger screens. Even when you have more horizontal space to work with, single column web design means that you still put each element below the previous one.

To put it another way, the only requirement of single column web design is that no element can sit side by side with another element.

One thing to note is that stacked elements, for example where a paragraph is inside a container which has a background, do not count as being side by side. Another thing to note is that if two elements are apparently sitting side by side, but they’re actually part of an image, that doesn't count. Single column web design is more of a technical limitation than a principled one.

You might be wondering why this is something I even care about. In the next chapter you'll find out more about the benefits of approaching web design this way.

What are the benefits? → ← Introduction Back to the table of contents