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 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.
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.
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.
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.
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
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:
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
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
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
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
or . 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
Usability And CSS3 Columns
![Usability And CSS3 Columns]()
Reviewed by JohnBlogger
on
4:42 PM
Rating:
No comments: