Multi-column articles

Question

I just came across this article by Paul Lewis. The first thing I noticed was the multi-column layout.

It's great that people are trying to break the usage of overused templates for articles/blogs, but there's something not quite right about it. Maybe it's just due to how other articles are structured but I find that it looks more like a grid of different things and my eye doesn't quite know where to look.

How could we make this more usable? How could we draw the user to the start of the piece by default? Or is this layout never going to work as well as other possibilities?

Comparing it to printed articles in magazines, etc., does this not feel 100% right because you never just see a flat square group of columns like this? E.g. In a magazine, the first column might be taller than the rest because there might be an image above the rest, etc.

Answer 1

Very long lines of text are hard to read, and people tend to make mistakes when finishing one line and wanting to move to the next line. Multi-column formats help deal with this problem, but multi-column layouts are not appropriate for every situation.

Multi-column articles work well when you don't have to scroll to see the bottom of each column. Think of a newspaper. On a website it means that the user has to scroll to the bottom of the page to finish reading column 1, then scroll back up to continue reading column 2, then scroll down the page to finish reading column 2, then etc. etc.

The designer may not have this problem if they are designing on a large screen, but that is not the case for the majority of users.

The only time that multiple columns work well for articles on digital devices are when you have to change the page to continue reading. This is what The Economist app for iPad does to maintain their standard column layout, and it works well.

Answer 2

Internet users are very much used to one (text) column layouts. Depending on your target group (e.g. web developers) you might want to break with this convention to underline individuality.

For the web, mainly consumed with desktop computers, yes, this layout is never going to work as well as other possibilities. The experience may be better on tablet computers. But then I think one should go one or two steps further, like designing the page so that there's no vertical scrolling.

Options to increase the usability of a multi column layout are

• numbering the headings (strongest)
• using drop caps
• using line indention

Personally I would always prefer bigger font size than multiple (text) columns.

Answer 3

Maybe Paul Lewis wants his blog look like a newspaper to make it more institutional. If so he should have used drop caps and indented lines, and not a (sub)title to start the article.

Those elements serve the reading, that is why they are still used in nowadays newspaper , they are less about aesthetics and logic than readability.

Also he might think that everybody has a super huge screen and he really is into condensed content because I really do not understand why he is making us scrolling up and down when we can just scroll to one direction or why the columns' height are not responsive.

Answer 4

Line length readability suggests that each line should have 50-60 characters (or 75 max) per line for optimal reading experience.

The left paragraph has ~100 characters per line, whereas, the right one has ~50-60 characters per line. I find the right one to be easier to read.

^{download bmml source – Wireframes created with Balsamiq Mockups}

I see many sites with 2 column designs who use 1 column for media and 1 for text. Making for easier text reading and better space utilization.

^{download bmml source}

The point is, you can use multi column layout quite effectively to convey your information. You just need to find out what design fits your bills. Like, in the example you mentioned, the 3 column layout, while it makes the text easier to read, the fact that it is spanning across my entire screen makes it a bit difficult for me to consume the content. Guide the users' eyes with you design/visual cues and make the content easy to consume.

One problem I can point out in the example you mentioned, there is no enclosure for the text and the common background makes me jump the space between columns. Look at the 'SAME HYMN SHEET, DIFFERENT PAUL' paragraph, because it is in a separate color background, my eyes are locked within the region while reading it.

---

Just noticed this question in the side bar suggestions: Ideal column width for paragraphs online

The answer gives some nice summary of rules of thumb:

General Rules of Thumb Take these with a grain of salt, they are just guidelines; feel free to break them. I repeat, they are not "one-rule for all" you need to adopt; just a push/clue in the right direction.

• 12 words per line
• 39 characters regardless of type size (alphabet-and-a-half)
• multiply the point size by 2 and interpret it as picas (points-times-two)
• around 50-60 to at most 75 characters (spaces included) — this is usually the guideline borrowed from our friends in typography

"The Elements of Typographic Style" by Robert Bringhurst, mentions the following more specific measurements

• 45 to 75 characters line length (measure); specifically 66 including spaces; Single Column
• 40 to 50 characters; multi-column
• 85 to 90 characters; discontinuous text; generous leading
• 40 characters (minimum); justified
• 12 to 15 characters; marginal notes; English

Variables in readability:

• font-size
  • larger = I've tried it, (some) people find it annoying. Just aim for the happy "medium size"
  • medium/standard = larger width
  • smaller = smaller width
• line-height
  • large (1.9+) = easier to scan lines, longer lines become more acceptable
  • normal = shorter lines
  • smaller = very short lines
• content length
  • big blob = long lines + large line-height
  • short message = short lines + reasonable line-height