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.
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.
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.
- Jean Grey
- Professor X
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.
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:
- Jean Grey
- Professor X
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.
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: