While your content matters, so do the ways you organize it on a page. The wrong content organization kills engagement and readability, influencing your site’s traffic, bounce rate, and overall SEO.
Just in case you didn’t know that:
- Reading online is 25% slower than from print.
- Visitors read only 20-28% of the words on a site.
So why make it challenging for them to scan your website page? Why make it visually weak and imbalanced so they can’t perceive the information and leave your website?
Yes, many factors affect the time a reader spends on your page: the length of its content, load speed, the quality of information there, and their interest in the topic you cover. However, a particular combination of math proportions, aka formatting, makes a big difference too.
The proper content organization makes your website appear more professional, keeps it user-friendly, and boosts your SEO, leading to better traffic, conversion, and overall ranks in Google.
In this post, we’ll learn the math behind content formatting and discuss the strongest blunders for you to avoid and skyrocket your content usability.
So, here we go!
1. Wrong width and font size
Do you know why a Microsoft Word page doesn’t take up your whole screen? Or, why is it kinda frustrating to read one-two words per line, trying to connect sentences together? The thing is, too wide or too narrow lines destroy the reading comprehension.
According to one study, 55 characters per line work best for those reading slowly, and 100 characters per line look and sound best for those reading fast. Given that you can’t know the reading speed of your audience for sure, the optimal width of your text content line is somewhere between 55 to 100 characters.
Some name 66 characters per line ideal, but you need to consider font size and typeface here: the bigger or wider the font, the fewer characters per line you should use.
Speaking of font size, we need to design it for a wide range of devices today. And if some experts argued 16px was the best size for the web back in 2011, that might be way too big for mobile today.
So, consider a minimum 14px font size for your blog and choose a typeface that would reflect your brand’s personality. But remember that standard sans serif fonts are still the most comfortable to read on screens.
Once you’ve chosen the font typeface, optimize the width accordingly. In general, somewhere between 500 and 650 pixels is okay.
2. Wrong alignment and spacing before/after subheads
Captain Obvious here, but make sure you align all text left. Though justified texts might look more appealing, you’ll fail to adjust it to different screen resolutions: the random spacing between words in the content will appear here by all means.
Frayed right-hand margins look better anyway.
Another blunder would be to format your content with the wrong spacing between subheads. Make the space before a subhead wider than the space after it, so readers can clearly understand to what paragraph this subhead belongs.
Wrong:
Right:
3. Poor color-contrast ratio and hard-to-see subheads
Your readers are the best scanners ever: they need about 10 seconds to open a website page and understand if they want to continue reading it. What helps them get the idea of why they need to keep on reading is subheads: poorly composed and hard-to-see, they fall short and kill your content usability.
Make your subheads of different font sizes or colors. Use bolded texts for them. Make them short. Your task here is to create a contrast between a subhead and a body paragraph so readers can better perceive the information.
A great trick to try for content usability is a table of contents. Corresponding WordPress plugins will help here.
Another blunder is poor color combinations and little contrast between the background and text on your page. Adjust no less than 5:1 color-contrast ratio and choose calm background colors for readers to feel comfortable when browsing your website.
4. Wrong image types and their volume
It’s hard to imagine a high-ranking page with no images: visual content influences a visitor’s average time on your website strongly. But it’s no less hard to select proper images and their number: sometimes, they do more harm than good to your content usability.
First, avoid standard stock photos. They don’t look realistic, and users are all sick and tired of them. Hand-drawn pictures, graphs, and animated images demonstrating research data work best: they are interesting to readers, and they force them to take a few more seconds to figure out what’s going on.
And second, consider the number of images per page. When formatting a 5,000-word blog post, one image is clearly not enough. But it would also be wrong to put an image every 100 words to frustrate readers and reduce load speed.
One picture for every 350 words is okay, and make sure to optimize its size for better usability.
As you know, large images influence the load speed of your page. (Actually, 40% of visitors won’t wait to see your content if it takes longer than three seconds to load.) If you test your site’s speed and see unoptimized images as a problem, make sure to format them so there is a balance between the size and acceptable quality.
How to optimize images:
- First of all, consider a file type: use JPEG for photos and PNG — for graphics, screenshots, and logos.
- Then, remember about dimensions: resize large stock photos and images from your cam whenever appropriate.
- And finally, think of compression: most editing tools like Photoshop compress pictures automatically, but you can also use apps like JPEGmini, Kraken, or TinyPNG by integrating them into your CMS if possible.
5. Wrong text structure
Avoid complex text structures when formatting your content, especially if writing is your business. Otherwise, visitors will get lost in it and find it hard to grasp. Readers need to concentrate all the time to remember where each paragraph belongs. So the more steps they’ll have to take for that, the bigger are the chances they’ll give up and leave your website.
That’s how different text structures influence content perception:
- Two-level structures work best (Title – H2 – H2 – H2).
- Three-levels (Title – H2 – H3 – H2 – H3 – H2) are fine too as it’s still concise and clear.
- Avoid structures of four levels and above (Title – H2 – H3 – H4 – H4 – H3 – H2 – H2) as they are hard to follow.
Also, consider different ways of breaking up your text content for better usability. Images and videos are great (they increase a visitor’s average time on a page), but try tables, quotes, and lists too. They provide a nice mixture of elements, make it easier for readers to perceive your content, and add credibility to it.
Plugins like TablePress or Table Maker will help if your website is on WordPress. For quotes, try customizing blockquotes with different background patterns. And if you want to change standard round dot bullets in lists, customize CSS with a “list-style-image” tag, like here:
You can create icons for bullet lists using tools like Crello, or feel free to find ready icons at NounProject. And this is how your bullet point lists can look after such customization:
Don’t forget on text fields and paragraphs length. Keep them short and use subheads or visual elements every 4-5 paragraphs.
How to know how many sentences to use in a paragraph to keep it short? It depends on three dimensions: your font size, your line width, and your line spacing. GRT Calculator will help you discover the perfect typography for your website.
Most specialists agree that two- or three-sentence paragraphs work best for web content. Also, make sure to add tons of white space for your users’ eyes to rest while reading.
But what about the length of the sentences themselves? Rumors have it, you need to keep them short too, no longer than 20-25 words. That’s all well and good, but the best practice would be to mix short and long sentences in content for better rhythm. It influences readability, and it will be easier for the audience to follow your thoughts and get emotionally involved in your content.
And yes, the perfect structure varies, depending on content type and length; sure enough, you’ll format a press release, a listicle, and a how-to guide differently.
Key takeaways for improving content usability
Content usability is very important for your website visibility and success. It impacts behavioral factors that, further, affect your organic search rankings: sessions, average time on a page, bounce rate — all they are about content quality.
So, don’t assassinate your conversion with poor formatting. Here’s how to do it right:
- Remember about the golden ratio: adjust your page’s line width, length, and font size.
- Align content left.
- Don’t complicate its structure.
- Make paragraphs short.
- Pay attention to the color-contrast ratio.
- Think of the subheads’ style.
- Remember about spacing between paragraphs and subheads.
- Optimize image types and size.
- Consider creative ways of content formatting: quotes, tables of contents, lists.
Following these formatting tips will ensure you not only publish great content but also encourage users to read and share it.
Any tricks you have to influence behavioral factors on your business website? Let us know in the comments!
Lesley is a professional copywriter and guest contributor to publications on digital marketing and self-growth. Specializing in data research, web text writing, and content promotion, she is in love with words, non-fiction literature, and jazz. You can check more works of Lesley here, or visit her Twitter @LesleyVos to say hi!
