I am available for freelance work - HIRE ME

Usability and CSS3 Columns

posted by Matt Ward on Mar 16, 2011.

In this article, we’re going to discuss the issue of columns, which have been introduced in CSS3. While considering the influence of print on web design, we’ll look at the issue of how usability can potentially be impacted by some potential uses of CSS columns.

One of the cool new properties that CSS3 brings to typography on websites is the ability to quickly and easily create columns with the column-count property. For browsers that support this property, and the related column-gap, the columns will be generated automatically, without having to split the content and create columns with extra markup.

It’s an incredibly useful property, and I used and talked about it my “Create Beautiful CSS3 Typography” post from last May. Check out that post to see it in action.

As useful as it is, however, there are definitely some usability and user experience considerations that need to be taken into account when using this property. More specifically, we need to remember the medium that we are working with and continually remind ourselves that this is the web, not a piece of printed matter.

The Influence of Print

That being said, let’s start with question of print itself. When we were first introduced to the web back in the early to mid 90′s, I think that, for the most part, it was fairly clearly understood that the web and print were two distinct entities that were not at all analogous. Print was this wonderfully free medium where designers could run wild and do all sorts of interesting things with type, colour, alignment, rotation ans so forth (which is not to say that all printed pieces should do all of these things).

The infant web, on the other hand, was this network of publicly accessible, digital repositories of information. Sure, we called it the “information superhighway” because it was great for being able to share and find information on different subjects, but let’s be honest, compared to the world of print, the stuff we were seeing on the web really wasn’t all that pretty.

But then something started to change. I’ll admit that I don’t have any official documentation or source material to point to, but from my own observations and experience, this is what I generally believe was happening: businesses, big and small started jumping onto the web bandwagon—to the point where it pretty much became a necessity for almost all businesses to have their own online presence. As corporate websites were being deployed with more and more frequency, an increasing amount of attention was paid to these sites. Questions of identity and branding started to become important, and more and more designers started to become involved.

Many of these designers would have been traditional graphic designers—people who had previously developed their skills and earned their experience in the world of print. As such, many of them would have come to the web with a number of expectations and misconceptions, many of which were likely dashed like waves against sharp, pointy rocks.

Beautifully designed and carefully crafted, a site like Alexander Charchar's Reinart suggests a strong print influence

Beautifully designed and carefully crafted, a site like Alexander Charchar's Reinart suggests a strong print influence

Over time, though, we have seen more and more advancements in terms of technology that actually brings a wider range of options and possibilities for design on the web. We spend a lot more time talking about grids, typography and other elements that have their roots in the world of print design.

This is good thing, but it can also be a dangerous trend if it starts to blur the boundaries between a website and a printed page.

Columns on the Printed Page

Over the course of my design career, I have had occasion to work in both the web and in print. Some of the print projects that I have been given were magazine-type booklets, and I’ve found that there a number of benefits offered by working with columns. One of them is that they just look nice on the page. Just looking good not a great reason to use something, but it always helps. In some cases, depending on the text I was working with, I’ve also found that using two columns can actually fit a bit more content onto a page.

But, by far the biggest advantage of using columns is the benefits they bring to readability. The measure (or length) of a line of text has a direct impact on readability. Beyond a certain point, the longer the line, the more difficult it becomes to read with a high level of retention and comprehension. In a typical sized book, this is not generally an issue, but when you start to get into larger format publications like magazines, the measure of a single column will generally be undesirably high.

This is where the use of columns can be hugely beneficial. By using two, three and sometimes even four columns (in newspapers, for instance), designers can limit the measure of their text, helping to improve the overall readability of their designs and layouts.

Columns have been around for a long time. Here's an old german leaflet as an example. Photo by kladcat on Flickr

Columns have been around for a long time. Here's an old german leaflet as an example. Photo by kladcat on Flickr

The Usability Issue

Armed with both this knowledge and the continuing influence of print on web design, the introduction of CSS columns may seem like a great tool for us to use as a means of improving readability on our sites. And it certainly is.

It just needs to be used thoughtfully, and with the full spectrum of usability and the user experience in mind. Using CSS columns to improve readability is not necessarily a good thing if it comes at the expense of some other aspect of usability.

And there is certainly potential for this to happen.

The accustomed behaviour for reading longer editorial like articles, stories and blog posts online is to start at the top and then scroll down as far as it takes to reach the bottom of the page. This works because it is a logical, gradual process that the user can work through at their own pace. But what happens if we start introducing columns into the equation without careful consideration?

The reading pattern is broken.

If the content spills beyond the immediate viewport, it means that I need to scroll down the first column, then scroll back up to the beginning of the next column, only to resume the downward movement again. I don’t know about you, but on a long, in-depth article, I would find this kind of thing incredibly frustrating, which is certainly one of the hallmarks of a poor user experience.

This contrasts against the use of columns on a printed page, where the entire page is visible at any given time. We simply move our eyes across the page, again in a predetermined and accepted reading pattern. It’s intuitive because it matches how we have been taught to read.

So Where Do We Use CSS Columns?

Now, I am by no means suggesting that column-count is not a useful property, because it is. As I’ve already mentioned, it just needs to be used thoughtfully and with careful consideration. Setting two columns on a long article doesn’t work because it disrupts an accepted reading pattern that users are used to.

One place that I love the idea of columns, however is with lists. Let’s suppose I wanted to present a list of characters from the X-Men universe.

  • Cyclops
  • Jean Grey
  • Beast
  • Iceman
  • Angel
  • Professor X
  • Magneto
  • Wolverine
  • Rogue
  • Gambit
  • Sabertooth
  • Mystique
  • Cable
  • Nightcrawler
  • Shadowcat
  • Banshee
  • Colossus

I could go on and on, but you get the idea. Now this list works well enough, but there’s a lot of dead space to the right of it, especially since the list items are relatively short. I’m all for the use of white space, but in this particular case, it might be useful to be able to have this list broken across three columns.

Traditionally, to do this I would have to manually select where I wanted each column to end and then intervene by adding in specific markup, such as a <div> or <span>. It would likely also be possible to use JavaScript to compute this dynamically, but it would still require extra HTML to be added.

With CSS columns though, I can do it quickly and easily. In this case, I’ve created a simple class called threeCol, which basically sets the value of the column-count (and its related, browser-prefixed cousins) to 3, and the column-gap to 20px. Suddenly (if you have a supporting browser) we have a list that looks like this:

  • Cyclops
  • Jean Grey
  • Beast
  • Iceman
  • Angel
  • Professor X
  • Magneto
  • Wolverine
  • Rogue
  • Gambit
  • Sabertooth
  • Mystique
  • Cable
  • Nightcrawler
  • Shadowcat
  • Banshee
  • Colossus

This works nicely because it brings all of the list items into closer proximity to each other, without affecting usability by disrupting any reading patterns. It’s also just one example of how this new property can be effectively leveraged! There are many others, but the thing to keep in mind with all of them is that most of its effective uses will be in small, snippets of content rather than longer sections.

Conclusion

CSS3 is a big deal, and there are dozens of new articles and tutorials being written on the subject, seemingly on a daily basis. Some of it is still experimental and some of it can be used for some pretty awesome progressive enhancement. Like any new technology or technique that gets introduced into the web design mix however, it needs to be carefully considered and weighed.

I hope this article has not only illustrated some of the issues specific to CSS columns, but that it has also demonstrated the importance of critical thinking when it comes to usability and the user experience!

What do you think? Are you using CSS columns in your designs today? How do you implement them and what kind of restrictions to place on their use?

 

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Mar 16, 2011

David says:

Nice article (stumbled it by the way)! Good point with the splitting the list up into three columns to reduce white space. I always use CSS in my columns in my designs, but haven’t started using CSS3 yet

Mar 18, 2011

Joffrey Kater says:

Like your article! Very useful resources :)

Small tip, your link to retin art is not working :)

Keep up the good work!

Mar 18, 2011

Colin Oakes says:

Great post Matt! You bring up some very important useabiliy issues that are inherent with CSS3.

Do you think CSS3 columns could be used for a site layout rather than for content?

Mar 19, 2011

Matt Ward says:

Thanks Colin. For the most part, I think the answer to the layout question would be no, based on the way it renders to an equal height. There may be a few exceptions though, such as creating a listing of fairly evenly sized post boxes, where the positioning doesn’t have to render perfectly.

For main content/sidebar relationships though, I don’t think it’s the right tool for the job.

Mar 19, 2011

Colin Oakes says:

Ya that makes sense. Thanks for the reply!

Mar 22, 2011

Rob Bowen says:

You definitely have to plan your content better when you arrange it in columns. We use them regularly on Dead Wings, but we are always careful as to how we arrange it so that the readability doesn’t get broken as you mention. You do have to break it up. Using columns for every paragraph tends to not work out.

Mar 24, 2011

Khalid Majid Ali says:

Yep I’ll surely use CSS3 columns on my next projects. A very informative post.

Mar 31, 2011

Jamie says:

I’ve just completed my first “valid” HTML5 site and used a lot of CSS3, including columns. My first issue was indeed with height and I think there needs to be some way to control that (and any overflow).

Another thing I think would be beneficial would be an attribute that would force a new column at that point in the markup, instead of using an extra line break or two and ending up with (potentially) lots of extra markup.

Apr 1, 2011

Niels Matthijs says:

Nice article, two things though:

1. columns in print usually apply a text-align:justify, so even though you can split your text into different columns if you want, it still won’t look as nice as it does on paper (text-align:justify on the web is still pretty much not done as far as I’m aware).

2. The list example is valid, but there are still usability concerns attached to it. The scanability of a list seriously decreases when split into columns. Just imagine you’re trying to find one option within the given elements of the list. In the first example you’ll scan on first/last letters and word length, but in the column version of the list you’ll follow a much more erratic scan pattern.

It does work very well for checkboxes, as they usually need to be considered one by one. As for radiobuttons, I personally wouldn’t use it, but if the designer demands so the css3 property definitely comes in handy (no more unnecessary markup!).

Apr 1, 2011

jay design says:

Hi Matt. Really enjoyed reading your article. I thought the example of using a three-column layout to break up that list was spot on. Several columns of text, in my opinion, are far more aesthetically pleasing than a single block and I also think that they read better too.
However, I also agree with your point about the potential downsides of using lengthy columns of text. I think this is where we can use other web technologies, like the ‘Back to top’ links for example, that are being seen more and more now to assist the user, without having to necessarily adjust the intended layout to accommodate for readability issues.

Apr 1, 2011

Wendy says:

I use HTML tables for that kind of thing because I find it quicker and easier to do it that way. Is there still a place for them or should I switch to pure CSS?

Apr 1, 2011

Zoe Gillenwater says:

I totally agree that columns are a bad idea for usability/readability on the web in many (most?) cases. I only find them acceptable when used on small spans of text (like the larger intro paragraph that many articles have) and on simple lists, like your example.

Apr 1, 2011

Marcy says:

I would love to use CSS columns, but “all browsers” aren’t able to use them yet, so I still use the “grid” for columns.

Apr 11, 2011

Janna says:

I love the idea of how CSS3 columns work. Thanks for the article, really helped me understand a lot more. Thanks!

Jun 7, 2011

Luke watts says:

Enjoyed reading your informative article..I love to use css3.Hope we will use this for upgrading our business website..Thanks for sharing this…

Jun 22, 2011

Jamy Golden says:

Awesome article. I haven’t used CSS3 columns in production yet. There are a few cases where they could be used for progressive enhancement but I feel that is still pretty limited at the moment due to older browsers. CSS3 Regions is definitely something to keep an eye on!

Aug 10, 2011

Martin says:

However I completely agree that CSS shouldn’t be used to create graphics. CSS3 is meant to make life easier by letting you easily change things and have less bloat in your HTML, not the opposite!!

Sep 9, 2011

Tyus says:

Nice post. I just started using columns recently and I really like the results. You can use it with multiple paragraphs and just wrap it in a div. And with a little jquery you can control the number of columns based on screen size. It works grate and if people are still using EI they can get the normal single paragraphs they are use to.

Sep 12, 2011

Stealth Web Design says:

Interesting article! I’m interested in designing with CSS3 and seeing how I feel about it.

Thanks!

Nov 3, 2011

Cody says:

Cool article, that is interesting that columns have been around us in every day life and we put them in our designs thinking we are creative.

Apr 30, 2012

matt says:

Thanx man! helps me on my web

Jan 24, 2013

W3C-WebDesign says:

This is very informative post. I really enjoy it and this is a great artical.I hope I will use this for our next business website.

This is great job!

Thanks for sharing this post.

Alex

Leave a Comment

Links

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014