Warning: Horrible formatting ahead! Please bear with me while I’m making my point.
Some people still write on their blogs as if it’s a book – long paragraphs stretching over miles of pixels challenging the concentration abilities of their readers. I mean, how funny, interesting and engaging should your blog post be for your readers to hang in there even after they feel like they need to use their index finger to follow the lines? And no, sprinkling some highlights here and there doesn’t make it better. This is one huge block of text. Does your brain hurt a bit? Shall I stop? Ok, I guess you get the point.
Does this feel better?
Ah, the one-sentence paragraphs!
The breeze of fresh air. The cold pack for the eye.
In your face, every teacher of English language out there!
I say let’s always write in one-sentence paragraphs only.
Just kidding, of course.
Please tone it down with these.
Because when it’s too much of “the other thing” it stops being exciting.
Speaking of too much. I once reviewed a website and told its owner to use more highlights in her blogs. She then went and made whole paragraphs bold. True story.
Another real-life example:
1. Here’s how a famous owner of a site with a domain authority 61 formats their web pages
I kid you not. This is a real-life example that I’m staring at while I type these lines. When I come across things like this, I feel like a small part of me dies inside.
I guess you can get away with all possible things when you are famous.
Are you famous?
If you are not sure, start writing really long sentences without any punctuation marks because writing for the web is chill and rules are there to be broken anyway and see what happens.
Speaking of punctuation marks.
What do you think of this?! Or this?!?!
SOME PEOPLE THINK ALL CAPS ARE ALSO A FUN IDEA!
BUT NOTHING BEATS ALL CAPS IN BOLD WITH THREE EXCLAMATION MARKS!!!
Sometimes it’s a whole sentence, sometimes, it’s just a very IMPORTANT part you must read asap.
These are some huge letters! I guess it must be a great course you want me to sign up for if it comes with letters like that.
#shutupandtakemymoney
But too small letters are no fun either. A heads up: You make my eyes hurt -> I don’t like you -> I don’t buy your product.
What else? Ah! The bullet points.
The bullet points:
- should make your text easy to scan and process
- should highlight individual important points, like features or benefits
- should not look like one long paragraph with some dots on the side.
You know another reason why this text is hard to read? Because it’s just text.
You haven’t seen a single image since X words, Y line and Z paragraphs. It’s an ocean of letters with no land in sight to give your tired eyes some rest and your attention span some boost.
Now you know how your readers might feel.
Phew. You made it out of the formatting horror chamber. Thanks for not giving up!
So, what do we have there?
9 painful blog formatting mistakes (that annoy the hell out of your readers)
- Too long paragraphs
- Too many consecutive one-sentence paragraphs
- Highlighting too much text
- Screwed-up space between paragraphs
- Long sentences that are difficult to visually process (and, thus, understand)
- Overusing exclamation and question marks, and using ALL CAPS
- Using too small font size
- No space between individual bullet points
- No images
Let’s see how to fix this. And by “fix” I mean templates and code snippets kind of fix.
How to format your web content to keep your visitors reading
What’s the point of formatting your online content anyway? What do you want to achieve?
Formatting your online content should achieve two things:
- Break visual monotony to keep the attention of your readers (because novelty keeps them going).
- Highlight important parts in a smart way so that your readers can easily understand:
- whether your page contains information relevant to them
- where to find what in case they aren’t interested in reading the whole thing.
Easier said than… Actually no, it’s not that difficult to do.
7 rules of formatting web content that will make your visitors read till the end
(Assuming the content itself is valuable and relevant to your audience)
1. Hit the sweet spot with the length of your paragraphs
Magical powers: Breaks the visual monotony and keeps your visitors’ attention.
- Don’t use paragraphs longer than 4 lines.
- Don’t use more than 2 consecutive one-line paragraphs.
- Vary the length of your paragraphs between long and short paragraphs to break the visual monotony and make the content more scannable.
2. Vary the length of your sentences
Magical powers: Breaks the visual monotony and keeps your visitors’ attention.
If you can, break your long sentences apart.
Example:
This is one long sentence.
I loathe these pop-up forms, but I’ve seen statistics and case studies showing they work, and now I’m not sure what to do.
This is how you can break it into 3 short sentences that combined convey the same information:
I loathe these pop-ups. But I’ve seen statistics and case studies showing they work. Now I’m not sure what I should do.
If you have a beautiful long sentence you don’t want to massacre…
Long sentences can be beautiful and easy to read. If you have a long sentence too close to your hard to break apart, here’s how you can improve its readability:
#1. Separate parts of the sentence using “-” or “(…)”.
Example 1:
Depending on how you look at it, the average conversion rate of a pop-up form – be it a welcome mat, a slider, or a pop-up form of any kind – is between 1.95% and 2.9%.
Example 2:
The only pro-popup case studies featuring “normal people” I was able to find (like, for example, this one from 2013 or this one featuring cases from 2008 to 2012) were published years ago.
These are the experts of my post “The #1 reason to get rid of pop-up forms (backed by data)”, by the way.
#2. Stretch the sentence over multiple paragraphs to create shorter paragraphs
Example:
CTA buttons are the doors you place for your visitors to guide them through your sales funnel.
The more doors you place on one spot,
…the less control you have over where your visitors go next,
…the more difficult it becomes for you to guide them the way you want.
(This was me talking about 3 less known CTA button mistakes that cost you money.)
What? Writing for the web is chill. You need to see if this style fits your message and target audience though.
3. Use bold and italic highlights for words or short phrases, not multiple lines at once.
Magical powers: Helps your visitors identify relevant information faster.
If you need to highlight a whole paragraph use a blockquote or a colored box.
I like using gray boxes, like this one. I think they look fancy. I use them often to highlight examples or quick navigation at the beginning of my blog posts.
To use it on your website, copy-paste this code snippet into your CSS file:
div.box-grey italic {background-color: #EFEFEF; font-style: italic;padding:25px;}Then, copy-paste this snipped into your post in your text editor (the one that shows you HTML):
<div class="box-grey italic"><p>This text will appear within a fancy gray box.</p></div>If you are using WordPress, there is a weird bug in 4.8 version that swallows some tags and screws this up. In this case, forget those <p> and </p> tags and insert an empty line before and after your text for it to work:
<div class="box-grey italic">
This text will appear within a fancy gray box.
</div>
If you want a different background color for the box, change the color value (in this example, #EFEFEF) to the color of your choice in the CSS code snippet.
4. Use uniform spacing between the paragraphs.
Magical powers: Makes your content look more professional (and, thus, trustworthy).
Here’s what I mean:
This is your heading.
This line is too close to it and ruins the whole uniform spacing thingy. This doesn’t look nice.
You’ll notice it as soon as you start the next paragraph.
So you should rather do it like this:
If this is your heading…
This is where the next line should start, and not sooner.
And when you start another paragraph after that, the whole thing will look nicely balanced.
If you have nothing to do with this and it’s your theme screwing with you again, manually increase the margin after your headings.
For example, adding this code snippet to your CSS file will add 25 px of white space after headings h2, h3 and h4 on your website:
h2, h3, h4 {margin-bottom:25px;}5. Use enough white space between the individual bullet points
Magical powers: Makes your content easier to read and process.
If you’re using a free web design theme, chances are your bulleted lists don’t have any extra space between individual bulet points per default. Which kills the whole purpose of the bulleted lists: instead of short and punchy single paragraphs that makes it easier to read and absorb your content, your readers have to struggle through a huge block of text with some decoration on the side.
#epicfail
Here’s the trick to claim your rightly deserved white space back:
In your custom CSS file, add:
ul.custom li, ol.custom li {margin-top: 24px;}
ul.custom >:last-child {padding-bottom: 24px;}
If it doesn’t work and some other style is overwriting it, add !important after the margin values to show it that you really mean it:
ul.custom li, ol.custom li {margin-top: 24px !important;}
ul.custom >:last-child {padding-bottom: 24px !important;}
This will add 24px of white space between the individual bullet points and 24px of white space after the last bullet point.
Next time you need a list of bullet points (ordered or unordered), copy-paste this HTML snippet into your blog post:
<ul class="custom">
<li>Bullet point 1</li>
<li>Bullet point 2</li>
<li>Bullet point 3</li>
</ul>Basically, you need to assign class “custom” to the <ul> element.
If you end up with too much space between the last bullet point and the first sentence of a new paragraph…
…remove the padding after the last element by deleting the line ul.custom >:last-child {padding-bottom: 24px !important;} This depends on your theme.
6. Use font size big enough to be read without pain
Magical powers: Doesn’t make your readers curse you and close the page.
Google recommends using at least 16 px, maybe more depending on the properties of your font (I use 18 px).
To change the size of your font in WordPress, go to your Dashboard -> Appearance -> Customize and look for corresponding settings in your theme.
Or you can simply copy-paste this line in your CSS file, whether you are a WordPress user or not:
body {font-size: 16px;}7. Use images and/or “color boxes”
Magical powers: Breaks the visual monotony and keeps your visitors’ attention.
Regarding the images:
You can use free images you find online. You can make your own. Or you can even slap some text on the white background. As long as it reinforces your message and isn’t too ugly, it’s a win.
Slapping some text on a white background works great for listicle posts.
For example, It took me 5 minutes to create this masterpiece, but with its 19 siblings, it made my mega post about 20 common website mistakes way easier to process:
If you think your post is just perfect without any images (happens), give a couple of paragraphs a color box treatment. Put them, well, in a box that has a different color than your usual background:
You know, like the ones I showed you above with gray background, but not necessarily gray. It can be also yellow. But that’s it. You can only use these two colors. Just kidding. You can use any color that still leaves the text readable.
Or you can use block quotes. They also nicely break the visual monotony of your text.
The text you put in a block quote looks fancier and feels more important. So you can also use it as a way to highlight important stuff.
TL;DR
What do you mean it was too long and you didn’t read it? Was it me, or were you just in a hurry?
Unfortunately, this is a kind of post that only makes sense if you read all of it (otherwise this would be its only paragraph).
But if I had to give you a summary at a gunpoint:
- The way you format your web content – highlights, font sizes, paragraph length, space, images, etc. – can make or break your landing pages and blog posts. And by “break” I mean screw up your bounce rate, time on page and, ultimately, conversions.
- If your content makes a great first impression and is easy to scan and process, you’ll get trust brownie points from your visitors. But that’s not happening if your web pages are full of formatting errors.
- In this post, I list 9 painful blog formatting mistakes and provide ultra-specific ways to fix them:
- Too long paragraphs
- Too many consecutive one-sentence paragraphs
- Highlighting too much text
- Screwed-up space between paragraphs
- Long sentences that are difficult to visually process understand
- Overusing exclamation and question marks, and using ALL CAPS
- Using too small font size
- No space between individual bullet points
- No images
Additional reading
Speaking of first impressions, these couple of seconds you have to persuade your website visitors to give you a chance:
There is much more to it than just content formatting.
(Don’t you sometimes hate content marketing? It seems to never end, and there is always more to everything!)
I made a handy list with all the points you need to cover to ensure your website visitors won’t bounce immediately. Check it out:
I was writing a philosophy blog that not many people were commenting on. A former student, who is a Facebook friend, gave me some advice and made me aware of your site. I will begin to make the needed changes from long, long tests.
Hi Rich and welcome 🙂 Not sure what you’ve seen so far on my website, but if you’d like to understand what makes a great website and how to write blog posts people also comment on, I would suggest to start with this website checklist.
OMG Gill, this is a much needed post.
Formatting is something A LOT of people need a lesson on because they abuse the hell out of it. Run on ssentences. Or even worse now, making each sentence its own (like they’re allergic to a 3 sentence paragraph here and there).
Kudos for this post and pointing all of these things out. And I agree that those grey boxes do look nice.
I started using something similar in my posts here and there. Really makes the entire content more visually appealing.
– Andrew
Hi there, Andrew 🙂 Right? Half of an article written with one line paragraphs! I thought it was time to call it out 🙂
Glad you enjoyed this post. Thanks for stopping by!
Nice one Gill. Very insightful and informative.
Thank you, Kevin 🙂
Hi Gill. I’ve read way too many poorly formatted blogs because I didn’t have too much trouble reading the poorly formatted section.
Scary, I know.
Your points make perfect sense and the properly formatted part was much easier to read. I like the space between the bullet points. I’m going to get that into my theme tomorrow, so thank you for that.
I like the colored boxes too. Maybe I’ll write a plugin to make them easier to use. Just what I needed. More things for my to-do list. 😉
Excellent post, Gill. I’m becoming a fan.
Hi there, Wayne 🙂
Thank you for your kind words. To be honest, I rarely read poorly formatted articles. I make an exception only for outstanding content I know I won’t find anywhere else.
But these days 80-90% of the content out there is not unique. You can find the same information just by clicking the next link in the Google search results. So, it’s important for us as content creators to make sure we don’t alienate readers by doing things that can easily be avoided.
Glad you found it useful.
P.S. Re the plugin for the boxes: I think a plugin like this already exists. But as every active plugin makes your pages load slower, it’s a good idea not to use a plugin if you can easily implement its functionality with plain HTML / CSS / PHP.
As simple as a plugin like this would be I don’t think there would be any impact on speed, especially if you having caching turned on.
I think the problem with plugins is all of the extra crap that plugin developers add in that doesn’t need to be there. Social sharing plugins are the worst – ads, thousands of formatting options, then loading ALL of the CSS to support all of the options even though only one was chosen.
That’s why I said I could write it myself. It’s a simple plugin that wouldn’t have any significant effect on speed.
Sure, if you’re certain it won’t affect your load speed and it’s something quick, then go for it. I just don’t trust code I haven’t written myself, but my PHP is not good enough to create plugins fast. So I prefer to hack my website with HTML / CSS 🙂