{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

No matter how good you are at the words, the sentences and the grammar, no matter how often you run your florid prose through the Hemingway app, there are some elements of an article page that can scupper everything.

Here are the most important.

Typeface, not a big deal. Font size, big deal.

You might find articles telling you the typeface you choose is important. It certainly is, if you want to convey your brand image correctly, but when it comes to readability, don't let anyone tell you Comic Sans is hard to read.

Comic Sans is fine, just have a look below (click through and you'll see it's easy to read).

mcsweeneys comic sans article 

What's more important is font size.

font size 

Notice I can't override style sheets in the Econsultancy rich text editor. So I've had to embed a picture to make this point about font size.

This raises an important point - many content writers are restrained by legacy infrastructure which only allows them to write in size 8, for example.

If such restrictions really can't be lifted by working with your tech team, it might pay to take a drastic step, like writing on a separate domain (perhaps using WordPress or Medium).

Sidebars? More like snide bars.

Removing sidebars removes distractions but also allows you to place calls-to-action in-line, increasing engagement and conversion.

Below are screenshots from a test by VideoFruit. The design without a sidebar led to conversion increasing by 26%.

In this example, the CTA didn't change, but more readers made it down the post and were able to zero in on the signup form with greater ease. All this hints at greater readability.

Read the full case study, but note that the test didn't quite achieve 95% confidence, so technically there's more testing to be done.

Some say sidebars come in and out of fashion, as web design trends change - centralised designs were certainly in fashion in 2015.

sidebar experiment videofruit

videofruit sidebar test

Wide columns = wide berth.

Below are two screenshots from the blog on 4Ps Marketing's website. It's a great blog by the way (click through below to read the article).

However, the article text spans the width of the whole page, which is far too wide (on desktop).

You can see that the headline looks great, but then even the subheader is difficult to read, despite being written in large font size. The paragraph text, a nice chunky sans serif, is perfectly readable (and enjoyably so) in isolation, but those long lines make it very difficult to focus, to be drawn in (click through to see at full size).

Somewhere around 600 pixels is wide enough (just like our blog, which is 615).

4ps marketing blog

4ps blog

Font colour, background colour and contrast.

Grey font colour is a common mistake. It's difficult to contrast with a background colour.

Here's a slightly ironic example, Squarespace's website.

The idea is perhaps to highlight the 'add to cart' button, but the grey text in the header menu, header text and body text does not contrast with the grey background.

squarespace website

Want more on web design? Why not read our post on web design trends for 2016 and beyond?

Ben Davis

Published 16 February, 2016 by Ben Davis @ Econsultancy

Ben Davis is a senior writer at Econsultancy. He lives in Manchester, England. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

804 more posts from this author

Comments (7)

Comment
No-profile-pic
Save or Cancel
Ruth Attwood

Ruth Attwood, Head of SEO at 4Ps Marketing

Thanks for the shout out Ben. Some excellent points here - no point having fantastic content (we try!) without it being easy for users to read. We're actually in the middle of overhauling our main site templates at the moment so will take your comments on board.

Selfridges' Inspiration blog I think does a nice job of the centred design while retaining more in the way of readability. For a more professional services example take a look at the Insights section on the White & Case LLP website - beautiful modern design but utterly on tone for the firm.

6 months ago

Pete Austin

Pete Austin, CINO at Fresh Relevance

@Ruth Attwood re "take a look at the Insights section on the White & Case LLP website - beautiful modern design but utterly on tone for the firm".

Nope. The body text is unreadably thin and small on my monitor. Bizarrely, the text gets physically *bigger* if I make my browser window narrower. Example of how some readability problems are because of lack of testing?
http://www.whitecase.com/insights

6 months ago

Avatar-blank-50x50

Rain Tan, Digital Marketer at Web Imp Pte Ltd

Great stuff Ben.

Oh I also find "Flesch Readability Score" helps too. It makes sure that what you wrote is easy to be read by the vast majority.

Side Bars is always a dilemma for me. Of cos I prefer no side bar, looks slick and clean. But side bars have been generating small amount of leads for me. So was wondering if there is any tools or methods i could use for A/B testing?

Oh it would be cool be you could give me some comments about my blog posts. http://www.webimp.com.sg/blog/2016/01/11-examples-of-best-website-design-in-singapore/ This is just a random post.

6 months ago

Ben Davis

Ben Davis, Senior Writer at EconsultancyStaff

@Ruth good to hear. better this way round than beautifully formatted, crap articles, I suppose.

@Pete absolutely, so little browser testing is done outside of emulators. For White & Case, I agree the body text is a little thin, but I don't see the same resizing you do, so just goes to show how results differ, user to user.

6 months ago

Andrew Martin

Andrew Martin, Head of SEO and Analytics at Personal

I see what you mean about 4ps - nice design style, but it makes for a pretty hard slog to read one line all the way across a desktop screen without straying to other lines or looking for keywords, links and images.

I think that up to about 75 characters is a much more comfortable reading experience.

6 months ago

Avatar-blank-50x50

Grahame Palmer, Marketing Director at All Things Ecommerce Ltd

Much of the problem stems from companies allowing "creative designers" loose on their websites.

Most of these "creative" people are hell-bent on "being different and unique", and will break most usability rules in their quest to make their site "look very different" from anyone else's.

Scant regard is given to the User Experience, or even the "natural behaviour" of visitors who like a degree or "regularity" and "conformity" in their viewing experiences.

There is good reason to abide by certain design and composition structures. People are habitual... If MOST blogs I visit follow much the same format, then I kinda expect this to be the case everywhere. If I have to spend ages working out what each component MEANS on a web page, I just don't have the time.

Good web design is not a "mental orgasm" for a designer. It's the ability to create a structure that intuitively imparts its intent to the viewer, and that this intuition happens very rapidly. The sooner people can see the structure and navigational hierarchy, the better. That structure needs to be consistent across the entire site, so that the visitor (almost instinctively) knows that by "clicking that link, this happens... and by clicking that link, something else happens... and I EXPECT it to happen..."

Ten years ago (pre mobile age), Jacob Nielsen researched viewer behaviours and proposed the theory of the F-Pattern.

It still applies - in its broadest sense, and all those self-centered, usually egotistical "creative designers", should take note of it.

6 months ago

Avatar-blank-50x50

Ashley Ryan, Email Marketing Strategist at B2 Interactive

The last part speaks to me so much. I see so many great blogs ruined by being painful to read because of background color, font color (and size) and typeface not working well together.

6 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.