A couple of weeks ago I chided The Next Web on App.net over their (then current) design. I like The Next Web, but I’ve never been a fan of their site design. In fact: most sites that I like and read have a pretty poor design.
I get a lot of new writers asking me where I got my design (I made it) and what theme they should choose. These are the wrong questions to be asking, just as I assume that unreadable sites are asking the wrong questions about their design.
The right questions are a bit easier than you think. Here are the steps I used to get to where I am now:
- Pick one accent color.
- Dark text, light background.
- Loaded a 5,000+ word post, that I had yet to read, onto the theme and started reading. If I made it through the post without a single annoyance from the site design — I had a winner.
Number three on this list is so often overlooked and yet it is by far the most important point on the list. If you make your site readable, people won’t mind reading it, and if people don’t mind reading your site, then you have a chance at gaining new readers. So make your site readable.
I wondered after thinking about this just how readable the web really is — well the web that I encounter. So I took a look at twelve different sites to see if I thought the designers behind the sites were optimizing for reading, or for ads/pageviews/money.
To do this I needed to disengage from the site and content and provide myself with a birds-eye view of the design. I did this with overlaid color on the different sections of the layout. Here is the key:
- Red: Crap that does nothing but distract from the content. E.g. ads, logos, related content, pull quotes, comments, and navigation.
- DF-Looking-Slate-Color: The goods. This is the content, the byline, the date, anything else that is important to the actual writing.
- Light gray: Secondary content. Pictures and media that sometimes can be helpful, but not always is — usually added not for page views or other bullshit reasons, but out of a need for pretty pictures or examples/figures.
- Tan: White space, or, more accurately, empty space.
Each site was grabbed via Little Snapper on my retina MacBook Pro with Little Snapper set to grab at a 1440x900 screen resolution.
The Next Web
Since I mentioned The Next Web above, it’s only fair to start with them.
There’s a lot of red all around the content and it comes up right next to the content. If you were to stack the shapes I think you would be surprised by the red versus slate. The overall design isn’t as bad as I thought it would be, however less red is always better.
This is still very clearly a site designed to optimize the dollars. Try as they may, The Next Web still needs to pay the bills and those bills are paid with ads.
The New Yorker
Thought there was a lot of red on The Next Web?
As you can see The New Yorker is horribly cluttered with a bunch of bullshit that distracts the reader’s eye. There’s a lot of red going on. Worse still is that the actual content column is almost as wide as the red-bullshit column. That’s just horrible.
Big time green-back optimization.
The Wall Street Journal
Sticking with the old guard for a moment, take a look at the Wall Street Journal.
There is still a lot of red, but it’s not all along the side of the content. Most of it is concentrated at the top and bottom. Perhaps more interesting is the use of secondary content to add to the story that is being told. I can’t say I am a fan of this, but for as ugly as The Wall Street Journal site is, the readability is far better than I thought it would be.
Still optimized for page views, but not as obtrusive as one would guess.
9to5Mac
Surely new media must fare better than old, right? Well not if your site uses banker hours.
I picked a longer post for 9to5 Mac — well truthfully I picked a post with a longer Press Release on 9to5 Mac. There’s no doubt that this site is all about making money. Red all around — even breaking into the “story” to get you to click on ads.
Poor form, greedy.
Macworld
Had I done this survey eight months ago, I’d probably be making fun of Macworld. But take a look at their current design.
It’s fantastic. Money crap at the top and bottom, secondary content easily glossed over at the top, and boom a long continuous run of gravy, erm, content.
To be fair to the other sites, this isn’t always the case with Macworld — at times there is more secondary content.
Nonetheless this looks like a site made for reading content to me.
Engadget
After seeing those results I was really interested to see how some other big tech sites fared. So I looked at Engadget’s Windows 8 review.
Not too bad right? Wrong. The length of the article actually skews the results, there is a good amount of red — I actually had to chop off the comment section to get the image down to size. While it’s not the worst, there is something really horrible going on here: secondary content galore.
To make up for the lack of words, there’s a ton of pictures and pull quotes shoved into the post. So much so that every content section is very short, then you get interrupted by less important secondary content, then back to the good stuff and then… you get the picture.
Not very good.
Truthfully I am not even sure what this is optimized for: pictures perhaps?
The Verge
It’s no secret I don’t like The Verge, so I was really curious to see how they fared. Better then Engadget on the red bullshit side of things, but look at how chopped up the content is.
That’s bad if you ask me. Every text block is short, surrounded by added media and pull quote crap. At least with Engadget your eye had one column it needed to read down, with The Verge the content shifts from left to right to left to right to left to… my god, pick a side.
I am guessing this is optimized for people who just got done watching a tennis match…
Not All Doom and Gloom
There are, however, a handful of sites that actually seem to give a shit about reading experience.
MacStories
Look at how grand this looks. Sure there is a large chunk of red, but it is all crammed at the top. One tasteful distracting picture at the beginning of the post and then you are off to the races.
Well done.
The Loop
While Jim & Peter don’t often post in-depth, long, articles — they have still taken time to carefully craft a site that is all about reading.
This pictures looks worse than The Loop is given how short this post was and that most of the red is just comments at the bottom. Strip out the comments and you have a clean and easy to read site.
Shawn Blanc
It’s like this guy used to be a designer or something. Shawn’s fallen into the secondary content trap that breaks up posts, but overall it is surprising just how clean his site is.
I gave his logo as content pass because it is the only place that he states his name — no proper byline — which makes it primary content in my book.
The Masters
All of those sites are excellent, but there are two that I looked at which are phenomenal…
Curious Rat
Not only is there very little red on the site (and you could argue the point that the upper left watermarked mouse logo could be excluded) but there is nothing very close to the actual content to distract the reader. Tons of white space, very little red.
The little content blob at the bottom is the only place Harry Marks mentions his name for a byline — so again it gets a non-red pass.
Daring Fireball
Which brings us to papa bear. Simply outstanding. Far and away the most readable site I looked at (if you exclude the light text on dark background aspect). There certainly is red on Daring Fireball, but look at how far it is spaced from the primary content.
This is truly a site that is made for reading. Add to that the fact that Gruber rarely ever posts a picture and readers are left with very little to distract them.
Bravo.
Lesson
It’s no secret that having a readable site is very important to me — I just wonder why it is so unimportant to so many other sites. More than anything else though, I learned just how choppy adding secondary content can make your writing.
I’ve been victim to adding too many ancillary pictures to posts in hopes that it makes the post nice looking — all the while not realizing that in doing so I am worsening the reading experience. For that I am sorry.
I hope that some sites take it upon themselves to realize that good writing need not have tons of pictures and pull quotes and that jamming ads and related-page-click-mes around the article does nothing but make people not want to read your article.
It’s no surprise to me that the smaller the site the better the layout — it’s when non-content creators make the design that things seem to go awry. There are obvious exceptions, but not many.
Oh, and this Site?
This is not really fair though — as I am sure some of you realize — after studying these sites I changed the CSS on this site to push all images off to the left side of the post. It’s true that the secondary content is still there, but by making this simple change there are not any large breaks between content blocks.
This isn’t fool proof stuff, and my site will always be a leg up given that I refuse to display advertising, but there are some very simple changes that a lot of these sites can make to give a better reading experience. My advice: just make all that slate colored content flow together and have tan all around the slate.