Jake Przespo

Almost every designer and developer has used multiple columns in at least one of their projects. They allow for content to be broken up logically and neatly within a grid. The CSS3 multi-columns module released in 2005, was a great and easy way to code multiple columns. However, it causes usability issues when used incorrectly.

The properties:

• column-count — the amount of columns to break the content into
• column-width — the width of each column
• column-gap — the padding between each column
• column-rule — the border between each column

The problem

CSS3 Multiple Columns module

I don’t have a problem with the actual property itself, but the usability issue it could cause if used incorrectly. I will be the first to say that CSS3 is the way to go and that everyone should use its properties for enhancements, but let’s not go backwards.

I was reading a blog post recently that was using this property on a large portion of its content. Now of course my first reaction was “Wow, CSS3 stuff is making things so easy.” Then I found myself doing something that I felt was odd. I was scrolling down the page to read the column I was on, but when the column ended, I had to scroll back up to continue reading. This did not feel natural to me. I feel that it has been a long and tough battle for the average person to learn the standards of navigating a site. Why do we want to make it harder on them?

The usual flow of a website has been in one direction, not two. I’m all for trying to use as much CSS3 as I can, but this one doesn’t make much sense to me. I still feel it is an issue with multiple columns in general, but this property used incorrectly could cut off mid-sentence forcing the user to scroll up to finish reading.

The solution

Don’t use it on large bodies of text. As we all know, the resolution size inside the browser affects the content. This is fine. However, I do not think it is good for usability when the user needs to scroll in two directions to read content. In the general sense, the fold on the web is not relevant anymore. The idea that content needs to be above the fold is a myth; humans have interacted with the web long enough to know that content below the fold is still usable.

If the property needs to be used, it should only be on smaller bodies of text where each column is readable without scrolling up or down. This CSS3 property does make coding multiple columns easier of course, but we need to consider the context we use it in.

What do you guys think? Am I being too anal and need to accept it’s not that big of a deal, or is this something that should be kept in mind when using this CSS3 property?