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).
What’s more important is 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.
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).
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.
Want more on web design? Why not read our post on web design trends for 2016 and beyond?