I think most of us would agree that the reading experience of the web is pretty broken. Whether it’s too many ads and distracting elements on a blog, text that is set to 11px (which is completely unreadable), or even lines of content that have a too long line length – the reading experience of the web can definitely be improved.
Today, more and more things are being read on the web every day. Not only do we visit websites to find out information about a company, but we also read e-books, blog posts, and articles online.
Over the last few years, we’ve begun to read more things on our smartphones, tablets, phablets, and laptops then we ever read in books or printed material.
One of the great things about web articles and books is that you can access them from where ever you are, at any time and from any device.
E-books and apps have been traditionally used instead of articles and “web books” because of the flexibility and creativity they afforded publishers. However, this is all changing with things like web fonts, improved text control with CSS3 and even tools like Typecast.
I believe in the future, we’ll see more and more “e-books” and articles take on more of a book feel, and the divide between e-books and the web will further blur.
A call to designers
I’m going on record here with a call to all designers: Learn the foundational principles of typography and print design.
For hundreds of years, print designers have studied the foundations of typography – i.e. typesfaces, basic emphasis techniques, optimal line-lengths, alignment, hyphenation and on and on.
But let’s be honest for a minute – when was the last time you as a “web designer” thought about these things, or even studied them? It’s like we as web designers have somehow been excused from the study of typography to focus on “design” and pretty graphics.
This is pretty ironic considering the fact that the web is 95% typography!
I know for me, being a mostly self-taught designer, I never studied typography principles until several years after I started designing websites.
Speaking of learning about core principles, one thing that many websites fail at is the principle of proper line-length.
We know from basic typography principles that the best general line-length for longer articles is between 50 and 75 (some suggest up to 96) characters per line.
So why do we see websites like this one that have over 130 characters per line – rendering it nearly impossible to read? It’s a little cynical since this is a study about line-length, and they don’t adhere to the “optimal line-length”.
Here’s an except from the “Web Style Guide”, that should have been optimized for larger screens. With my browser sizemaximized, it has over 220 characters per line!
Longer line-lengths result in the text being hard to read, and usually leaves users feeling frustrated at best.
In the print world, this line-length problem was always fixed by splitting text into multiple columns, or by using a larger font size.
However, it’s not so easy on the web, since we never know what size device our article will be read on (we’ll come back to this point later on). Not to mention, it’s been pretty difficult to set text in multiple columns before CSS3 was supported by browsers.
The beauty of a two-column layout is that it breaks up longer lines of text and allows your eyes to better track your content.
Examples of two column layouts
I took a stab at creating some multi-column templates that could be used for an e-book or article.
Here’s how it would look on a smartphone:
Here’s the Tablet styling:
Here’s how it would look like on a larger desktop:
Now let’s look at some more creative examples of websites that use more than one column for displaying an article.
I wish this designer would have optimized this 3-column layout for the iPad – it looks really nice that way.
This case study by Super Steil does a great job of using multiple columns to improve the readability and visual interest of the design.
This case study about Google drive also uses multiple columns, however most of the website is a png image – cheat, cheat…
This is normally what happens when a designer is in a hurry and they don’t want to spend the time to create the actual HTML.
A Major Problem to Multi-Column Layouts
To practically implement multi-columns on the web, we are going to need to keep in mind our device width and height when designing such layouts.
I believe one of the reasons many designers have chosen not to include multi-column layouts in their design is because of the difficulty different device sizes brings to such creative layouts.
Instead of just slapping text into a containing div and giving it a width of 90% with a max-width of 1140px, you actually have to do some serious planning and calculation when optimizing for multiple device sizes.
For smaller devices, more than one column is not really feasible because the line-length would be so short. However, the same article might look great set in two-columns on an iPad.
Although this brings up another problem – how tall do you make your columns of text? I mean do you really expect your users to follow one column of text down 5000px only to scroll back up to the top of the page for the next column?
I think we’ll have to wait for the iPhone 101 before we can use columns this tall
Okay, I think you get the point.
To do things correctly, we really need to detect the height of the device when choosing how tall to make the columns.
This is a little more difficult than it seems at first glance because there is no easy way of giving a containing div a percentage-based height of your viewport height.
height: 50%; doesn’t make the div 50% of the viewport, it makes it 50% of the height of the containing element.
The best way I’ve come up with to deal with this problem is to use media queries to detect the height of the viewport and then adjust your columns accordingly. So even if I’m on a landscape iPhone 5, I might still only want one column because my height is not very tall.
Be sure to break your articles up into sections so that your column heights are not very tall. Much better to have a 500px tall column, than a 5000px tall column.
Before we finish for today, here are some links that will help you learn how to implement multi-column techniques in your own web projects.
Action item for this week
Since we’ve learned about multi-columns this week and how the web needs to become a more readable place – let’s see some of your work! Take one of your favorite articles off my site, or any other article off the web and create a more readable, beautiful version.
Be sure to post a link to your new & improved article layout in the comments.