Design for Readability

Compared to their print counterparts, the web versions of many magazines give readers a decidedly poor reading experience. Most websites follow a lackluster design model. Will digital publications ever be able to compete with the reading experience that printed ones have bought readers to expect?

Web designers have it rough. Translating ideas from designs to fully-coded websites is a process fraught with challenge and, due to factors often outside of their control, most find themselves in a perpetual state of compromise. Fortunately – for writers, readers, and everyone in between – the gap between what we can imagine and what we can create is closing, pointing the way to a more beautiful, readable web.

The Standard Content Design Model

Everyone who has used the internet is familiar with what I call the Standard Content Design Model (or SCDM for short): the prototypical blog format, where “content” fills one, long, vertical column. It dominates nearly all digital publications (Hi, UX Booth readers). The SCDM is so versatile that it’s used to display search results, news feeds …anything you can imagine!

It’s the norm largely because, by default, that’s how browsers present text. It looks like this:

Three versions of the SCDM.

Cause, meet effect

A number of milestones in the history of the web have had the power to change browsers and, potentially, uproot the SCDM. With the release of CSS in December 1996, for example, designers gained the ability to quickly, easily and consistently define the layout of their designs. In theory, this was a death knell for the SCDM.

But not in practice.

Perhaps early web designers were so focused on making elements of their designs (headers, main navs, sub navs, footers, sidebars, links, ads, etc.) behave consistently that the content – the one, true variable – became an afterthought. Another (more likely) cause is due to the popularity content management systems (CMSs) gained as a consequence. Instead of having to worry about coding, CMS + CSS allowed publishers to swap out designs with the click of a button. This left them with more time to focus on content.

How would you like your content? Vertical? Vertical? or Vertical?

For those of you who’ve built a site or two before: there’s nothing new here. This is the current state of affairs with regards to publishing. And back when WordPress was only used for blogs, it was good enough.

Today, though, WordPress is used to maintain large websites with many different types of content. Applying a custom design to one post, or to a whole set of posts, is difficult and time consuming. As a result, ventures outside the SCDM are still rare – a full sixteen years after the release of CSS!

Why? It probably has to do with how we think about content in the first place.

Design before content

In the standard content model, the design (form) of a site precedes its content (function). Many people agree that this approach is off piste; function should come before form because, in many ways, it serves to define it. Jeffrey Zeldman writes:

Content precedes design. Design in the absence of content is not design, it’s decoration.

Jeffrey Zeldman

Instead of designing for content in a way that gives users the most enjoyable reading experience, web designers have been making designs (using the “standard” model), and plopping their content into it. As an afterthought.

This mindset seems to be the primary difference between designing for the web and designing for print. On the web, design often precedes content, yielding to the SCDM and the subpar reading experience that comes with it. In print design, content comes before layout and readability shines.

Head to head

Let’s investigate this discrepancy courtesy of Esquire magazine. Take this article about Bruce Jenner, father of the youngest two Kardashian’s and former decathlon Olympic gold medalist, in the June/July 2012 issue of Esquire.

On their website, the article is a perfect example of the SCDM in action. The page has 3 columns, with navigation on the left, links and ads on the right, and the article straight down the middle. The text of the article, the central content of that page, is crowded on all sides by links and ads that distract me when I’m reading. Nevermind that the article is paginated, which studies have shown decreases readability.

Now let’s take a look at the magazine version. First of all, I’ve got to include more images because the intriguing title page is a two-page spread with a photo. (Side note: was that Wheaties box designed before I was born?)

The style of this spread makes me want to read more. Varsity-style lettering is a fitting choice when your subject is a former Olympic athlete and the color scheme of the typography and section dividers match well with the photo, giving everything a sense of balance.

Turning the page, we come to the article itself. Again, custom typography plays a major role in the design. It serves to separate sections of the story as well as for decoration and contrast.

The photo here you may recognize from the screenshot of the web version, but it’s much bigger and clearer in the print version (you can’t even enlarge it on the site). The text of the story has more room to breathe, here, because it takes up all of the real-estate, instead of being confined to a fixed width down the middle of the page and crowded further in by ads, links and nav items the way the website is. Finally, the text in the magazine layout is broken up into columns so that the reader’s eyes can travel naturally from top to bottom, and from left to right.

Overall, the magazine makes for a much more pleasant reading experience. The website serves its purpose – the same content in print is available online – but if you were given both options, which would you read? I have to wonder if the poor design of their web content has a secret agenda. Maybe they designed it poorly to drive readers to buy the magazine, instead.

Designing for readability

All is not lost, though. We’ve recently seen the addition of media queries, responsive typography and web fonts to our toolbox.

Thanks in part to these milestones, the web continues to be a playground of innovation. Some designers are pushing the boundaries of what it means to properly Design around their content.

I Love Typography

I Love Typography makes custom designs for each new article they post. This one is called The Design of a Signage Typeface.

The font is big enough to embrace, the different background colors make it easy for the reader to keep their place, and the two column format allows our eyes to travel in both directions, a familiar experience because that is how we read print.

I Love Typography doesn’t always go with a two column format in a custom design, but I wish they would because it reduces the amount of scrolling. It seems such a waste of perfectly good real estate when there is only one column on the left (as they use here).

I Love Typography’s custom-designed blog posts are also designed responsively. See for yourself. (Note that on a mobile device the design reverts to one column for obvious reasons.)

Jason Santa Maria

Jason Santa Maria is famous for redesigning his website with each new piece of content he publishes. His candy series is no exception, and this one in particular, formatted in two, wonderfully even columns, is a sweet treat. Again, emulating multi-column magazine formats improves the reading experience, and requires less scrolling, which is nice.

Similarly, Santa Maria’s archive uses three columns, allowing readers to scan quickly across months and years to find what they’re looking for. As an added bonus, articles with custom layouts are accompanied by screenshots, to help the visually inclined find them more quickly.

Craig Mod

Craig Mod’s journal has an interesting design. I usually dislike type set this small, but because the columns are well spaced and each section is appropriately titled it’s enjoyable. The titles serve to break up the sections, so user can quickly scan the content. Users often scan – as opposed to read – web content, so it’s important to include subtitles.

The Great Discontent

The Great Discontent publishes artist interviews. Each interview starts with a huge header image that takes up the entire browser, much like the Esquire article we examined above (the magazine version, not the web version). No confusion who this interview is going to be about.

The interview itself occupies the middle column of the design. The top of the left column is used for the “About” section, where you can learn more about the artist being interviewed. The right column and the left column below the “About” section reprint memorable quotes from the interview, or relevant quotes from related sources. The reprinting of quotes and inclusion of relevant outside material are an old magazine technique that allows readers to scan to find the good stuff and important takeaways. It also helps hook the reader. Maybe you weren’t interested until you read that quote halfway down. You might go back and read the whole thing after that.

Usually about halfway through the interview, a second image or video is included. Notice how these images, accompanied by quotes and links, take up the whole three columns, effectively interrupting the interview itself. This is a nice break for readers. It allows them to rest their eyes, but if they want to keep reading, there’s no one stopping them from scrolling.

Finally, the previous and next arrows are displayed on the right and left at all times. These arrows subtly inform the user that there are more interviews to be read without distracting from the reading experience the way a sticky top or side nav would. It also avoids burying the prev/next links at the bottom of the article, in the usual way, so that even the reader who didn’t read all the way to the bottom knows that there is more good content to be found.

A more readable future

Fortunately, web technology develops rapidly. Over the next few years it will become easier and easier for designers to give content the attention it deserves. In the meantime, designers can do their part by putting in the extra time to design more readable content. Yes, there are hurdles to jump, but the tools are available now and some industry pioneers are already leading the way.

Developers can speed the process by focusing their energies on creating more flexible methods to format readable content (flexible templates, more custom content types, on-the-fly paragraph division to form even columns out of long content, etc) that don’t break designs and layouts.

And if designers and developers learn to work closely together, anything is possible.

About the Author

Matt Herron

Matt Herron works from coffee shops and coworking spaces in Austin, TX as a content strategist and editor for The Phuse. You can get in touch with him on Twitter.

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Interesting article.

    Small fix: “In web design, content often precedes design, yielding to the SCDM and the subpar reading experience that comes with it.” I think you mean design often precedes content.

  2. Good post. One thing I would say is that ‘content comes before layout’ in print isn’t strictly true. Print layout is constrained due to the physical limitations of the book, magazine, whatever. These sizes are what they are because people find them comfortable to hold and due to the physical sizes of human arms. Websites don’t have this limitation hence the natural vertical scrolling of the SCDM as you call it.

    The comparison of the web and print is therefore slightly flawed as these are different things with different constraints. For example I don’t like reading a magazine converted to PDF or Flash (using Issuu, etc) on screen as it doesn’t make for a pleasant reading experience. I’d much rather read large type in a single column, as per Zeldman’s re-designed blog on screen.

    You’re right that considering typographic niceties makes for improved readability but I personally don’t like the two-column approach. I think some print-based approaches just aren’t that successful on screen.

    • I understand your hesitation about porting print techniques to screen design—they don’t always translate. But we are doing our websites an injustice by not utilizing the whole space in a design, or even imagining what else could be done with the space. I am just trying to get designers to realize that the way things have been done isn’t necessarily the way things HAVE to be done or even the way they should be done.

      One of the best aspects of web design is that it is a flexible medium, and, as you said, it doesn’t have the limits of print design (pages have edges, what?)— but instead of utilizing this flexible medium we hedge the content into a single column in the middle of the page (a la SCDM). Can you not imagine a better way to use the space?

      Sure, Zeldman’s latest redesign is pretty nice, but it has a history: it was purposely based on read-it-later apps, and he was fishing for a reaction from the community (which he got) instead of focusing on readability.

  3. Eddy Tore July 4, 2012

    Many of paper media have smaller size than standard (20-22 inch) monitor; web screen space is unlimited unlike paper surface.
    Why then a big good photo is a rarity on web versions?

  4. I spent a soul-destroying 9 months at a major national and regional newspaper company and while I hated being there, I learnt a lot about the industry and why so many news and magazine sites are so lacklustre.

    When an article is written for print, the journalist is given a word count. The piece is then handed over to graphic designer who crafts a finished page with the photos and custom type treatments and layouts.

    That same article is also then dumped into the CMS by the journalist/junior editor, completely bypassing the custom design stage that is done for print. I don’t think you can blame the CMS systems, I have never used any that didn’t allow blocks of CSS to be added alongside the article.

    The problem seems to me to be due to most magazines and newspapers being rather reluctant to truly engage with the web (there are exceptions of course). They know it is the future but still see print as their primary focus.

    • I totally agree with your last assertion, that for whatever reasons newspapers are still reluctant to engage with the web. Many publications are beginning to see the error of that approach. Let’s hope the rest do soon, too.

    • I agree with you both. It’s definitely a culture issue that I think is shifting. I’d be interested to see how this type of a comparison comes into play when working with an app rather than a web page.

  5. Holy Cow! ILT’s post structure is impressive. They really stepped up the game. I think we’re all guilty of falling claim to SCDM now and then. The past year has been a big one for pushing beyond the standard model. I can’t wait to see where things go.

  6. Adam Tolley July 10, 2012

    While the two-column layout on the page http://jasonsantamaria.com/articles/monkey-nuts-barmbrack-and-apples looks pleasing enough, its less functional on smaller monitors.

    Using my Macbook Pro 13″ with its decidedly non-pro 800 pixels of vertical resolution I had to scroll down to the bottom of the first column then up to the top of the second.

    The directional shift is bad from an aesthetics point of view, but much worse, it subverts a muscle memory reflex to scroll down while reading and makes me think about page navigation, instead of the story.

    The web definitely needs more content aware design, but we cannot simply take those things which worked for print and apply them to web pages (I am stating the obvious at this point).

    • That’s true. I’ve got the same problem here. Would like to read more comments on that. How do others think about this?

  7. Interesting article. Agree that more can be done on the web to make content more appealing. I think its important though to consider the context of use; Users treat a web article a lot different than a print article. The environment they are consuming the content in is often different and they engage with it differently. Web users often expect intuitive and consistent layouts. But in the right context I agree the techniques discussed can improve the experience.

  8. thanks very good post.

  9. We always try to avoid boxes when designing a website. Really makes it stick out.

  10. Absolutely. And it doesn’t help that within that SCDM, we stuff it as full as possible with elements and links and colors. It’s overwhelming. Dirty, cluttered and messy.

    Great read. Thank you.

  11. Nice sharing. Completely agree with line “Design for readability”. Very useful tip for designers and developers to work closely together for better results.

  12. Web and browser technology is moving forward to better enable flexibility in content design. The type of content and the targeted user should drive the composition and presentation design.

  13. Mostly spot on, but there’s one thing I can’t agree to: You seem to imply with your example of I Love Typography that having custom designs per article is a good thing. I disagree. It may work for magazines, but it doesn’t work on the web.

    People don’t navigate magazines, and nobody surfs a news stand. But web users are constantly clicking links from one site to the next, sometimes opening links in multiple tabs. Surrounded by all this mess, the web user
    is forced to ask “Where am I?”

    Magazine readers never ask this. They had to open the cover of the magazine to get to the article they’re reading. The cover spells out in big letters where you are at all times.

    Web users have no such luxury. If they come to an article by way of home page, then they know where they are; they read the cover. But if they arrive from a link on Twitter, or click through from a Google search – What then? How does the user know what site they are reading?

    Sure they can look at the address bar, or read the title of the page, and get an idea of what they are looking at. But that takes more concentration than the instant recognition of a logo and branded design. And history has shown, when you test the user’s patience, they are more likely to leave your site.

    The whole point of having the same (or almost the same) design on every page is so users instantly know where they are, and don’t get lost on the web. Look at any page on Ebay, Amazon, Facebook, and Youtube and you know what site your on, without thinking.

    Furthermore, uniform designs create interface consistency. In a good design, the button to go to the homepage will always look the same, and be in the same place. You don’t have to relearn how to navigate every time you visit the site.

    The GQ design is much more functional and usable than I Love Typography. GQ’s designed imported some of print’s best typographic principles, but it translated them for the web. The uniform style on every page left no question what site you were on. I had no trouble reading it. I hope more sites learn from their example.

  14. Really Interesting article, personally I try to keep my designs as simple as possible, started to use cufon aswell on a lot of the sites I build.

  15. I am seeing links on top of the text in the first few paragraphs of this page. That’s not very readable.

  16. I think this is where bookmarklets like Readability and Safari’s built in “Reader” functionality eliminate the distractions and make a simple, vertical scrolling article.

    Then in the mobile world, there’s apps like Flipboard that re-format the content from websites to a magazine style layout.

Related Posts