I’ve been through it all. From publishing posts that no one reads to posts that get thousands of views and hundreds of comments within a day.
Putting in time and effort into writing a post and then getting an average time on page of 10 seconds sucks.
When I write a post, I want readers to take 10, 20, or even 30 minutes out of their days to read it word by word. I know that not all readers will do that, but if a decent chunk of them do, I’mthrilled.
On a typical blog, only about 2% will spend more than two minutes reading a post.
Fewer will read the whole thing. The good news is that yours doesn’t have to be a typical blog—it can be better.
There are many factors that affect how much time the average reader will spend on one of your blog posts:
- load speed
- interest in topic
- quality of writing
- quality of presentation (i.e., formatting)
- length of content
These elements are all more or less under your control, so it’s important that you take the time to understand them.
In this post, we’re going to focus specifically on the quality of your presentation.
I’m going to show you 9 most crucial and often missed formatting tips that can make a bigdifference to the average amount of time your readers spend on your page.
1. Forget blog width, focus on this instead
Imagine if a blog post was printed on a page the size of a giant movie poster.
You would have a heck of a time trying to read the whole thing, having to constantly look back and forth, trying to find the next line.
It would be slow, frustrating, and hard to retain information this way. Not only that, if someone walked up to you with it and asked you to read it, it’d probably be intimidating.
The same thing happens when you make your blog post too wide. I am sure you noticed that the page in Microsoft Word doesn’t take up the whole width of your screen. Same concept.
Now, let’s take it to the other extreme: imagine if you wrote one word per line. It’d make it harder to connect words and sentences together. Additionally, you’d be scrolling non-stop.
So, the optimal setup is obviously somewhere in the middle.
Luckily, we can transition from theoretical concepts to the actual research data.
A study of reader comprehension found that:
- When someone is reading slowly, lines of about 55 characters per line are best.
- When someone is reading fast, lines of about 100 characters per line are best.
When I say “best,” I am talking in terms of reading speed and comprehension.
It’s important that you consider both of these reading types when you write a blog post.
Why? Because a small portion of readers will read your whole post, practically word by word.
However, most Internet readers are skimmers. Readers only read an average of 20-28% of a post, even if they like it.
With the huge amount of content being published, over 2 million blog posts per day alone, skimming is necessary. People skim to read the key points of an article to see if they are interested. If they are interested, they often go back and read the article more slowly.
When you optimize your content for skimmers, they will be able to understand more from quickly scrolling through, which gives you a better chance of grabbing their attention.
So what’s the best width? I think it’s safe to say that each line should hold somewhere between 55 to 100 characters. Every letter, space, or punctuation (comma, period, etc.) count as a single character.
Some claim that around 66 characters per line is ideal, but I’ve found that a bit higher works better for most blogs.
There’s two more factors we need to consider here: font size and font typeface.
The bigger your font, the fewer characters will fit on a line. Similarly, some fonts are wider than others.
First, pick your font, which you’ve probably already done.
Then optimize your blog width. In general, somewhere between 500 and 650 pixels is ideal. Quick Sprout falls near the upper limit of this range.
Before we do any testing, see if you’re doing okay already. Copy a single line of one of your previous posts into a character count calculator.
Note that there will be some variation based on which line you choose. You can check four or five lines to get a more accurate average.
If you already fall within that 55 to 100 character range, it’s up to you if you’d like to change it at this point.
Assuming that you’re not in this range, or are at the very low end, here’s how you can optimize your font size and blog width.
Step 1: Pick a blog width
Unless you are very comfortable modifying HTML and CSS, or you have a developer, it’s usually the easiest to change the font size unless your blog width falls out of that 500-650 pixel range (pretty rare).
I can’t show you how to easily change the width of your blog because it depends on the exact theme you’re using. Font size is much simpler.
Step 2: See what 100 characters looks like
In both Chrome and Firefox, you can bring up an element/page inspector using the shortcut “Ctrl + Shift + I”. You can use this to dig around and play with the code on your blog a bit (don’t worry, none of it will have any effect on your actual blog).
Alternatively, right-click on a sentence and select “inspect element” to bring up the inspector. If you use the shortcut, scroll through the HTML until you find the paragraph tags that contain a sentence in your post.
Next, left-click (the normal one) on any element that contains a sentence in the inspector.
Then, right click that sentence and choose “Edit as Text.”
Highlight the entire sentence, delete it, and then copy and paste this example phrase that has 100 characters (without the quotation marks):
“This is a line of words that has only 100 characters in it. Copy it to test font sizes on your blog.”
Then press enter to see the changes reflected on your screen.
If you want your blog to be 100 characters wide, it should accommodate this example phrase perfectly. Adjust the phrase if you would like fewer characters.
On the character count test that we did earlier, I saw that Quick Sprout was set up to fit about 100 characters. No big surprise that this sentence fit almost perfectly.
But if the sentence did not fit as you’d like, you can also preview different font sizes using the inspector, so don’t close it yet.
With that sentence highlighted in the inspector, look on the panel on the right. That’s where you can see the CSS.
Scroll down, and look for a “font-size” property that doesn’t have a line through it. Assuming you have a responsive theme (which you really should), it’ll look something like “font-size:X.XX em.”
If you can’t find it, you can also click the “+” sign at the top of the CSS section to create a new property. Then, click inside the new curly brackets – {} – and type in “font-size:1em” to start.
To change the font size, left-click the number (the “X.XX” part), and type in a different number. A bigger number will make the text bigger.
Press enter after each change and keep adjusting that value until you’re happy.
Step 3: Make the changes
Once you’ve found your ideal font size, you need to make the change in your admin panel, whether you’re using WordPress or a different platform.
First check your theme options as there’s usually an easy setting to change font size.
Otherwise, you’ll have to add the CSS to your CSS code in the editor, ideally in a child theme.
2. Is it time to ditch the sidebar?
The sidebar is such a standard feature of blogs that it’s rarely thought about, but that’s a mistake.
The average sidebar is barely ever used by visitors. Even a highly optimized sidebar like Brian Dean’s at Backlinko only gets 1.9% of visitors clicking on the most important element:
Okay, so why does this matter? The problem is that your sidebar is a distraction, especially to new readers.
The time that you have to capture a visitor’s attention has become increasingly short. It’s under 4 seconds now.
A new visitor may spend anywhere from 1-2 seconds looking at your sidebar, or about 25-50% of your window of opportunity to get them to do what you want.
There are a few good case studies that support the idea of removing your sidebar. Brian Harris was able to improve his email opt-in rate by 26% on blog posts by removing his:
Impact Branding & Design also tested this idea. They went from this complicated sidebar:
to this:
By doing that, they were able to improve lead volume by 71%.
What those studies confirm is that a sidebar can be a distraction.
On a landing page, you definitely should not have a sidebar.
On a blog, you’ll have to test it. In most cases, I believe it will increase the average time on page for your posts. As we saw, it might also increase your email opt-in rate.
Personally, I like being able to include my bio on every blog post (in the sidebar) to help build my brand and be more memorable. But that doesn’t mean that it is or isn’t going to be right for you.
Split test having a sidebar and not having a sidebar. See if the results indicate that you should drop the sidebar altogether.
3. Images can be an asset or a distraction
I’m a huge fan of images, but you need to use them in the right way.
Proper image selection will have a large positive impact on the amount of time your visitors spend reading your blog posts.
The former Director of Product Management for PRWeb analyzed thousands of press releases to discover the impact of images.
He found that press releases with no images had an average time on page of 2:18. However, press releases with at least one image had an average time on page of 2:47.
Even if you don’t pick the best pictures, being able to break up your text is bound to have a decent effect on your time on page.
Image guideline #1: Use the right type of images
Based on that analysis, any picture seems better than no picture, but there is a difference between different types of pictures.
I looked at 41 blogs across a variety of niches to find which types of images were shared the most.
The best were hand-drawn and animated images. Following that were graphs, infographics, and stock photos.
Some of those image types aren’t realistic. Are you really going to include five hand-drawn images or infographics in a post? Probably not because they’re expensive. Even if you have the skill to make them yourself, they take a lot of time to make.
But graphs? You can easily find a few useful graphs from research you cite. Graphs are fantastic because they are not only interesting but they also force the user to take a few seconds and figure out what’s going on.
What about stock photos? I don’t recommend just using plain stock photos, but you can buy these for $1 or less if you know where to look. You can even customize them to look better and grab more attention. Check out my guide to making inexpensive custom images if you haven’t yet.
Image guideline #2: Use the right number of images
Imagine if I used one picture for a 5,000-word article. It might help the time on page a bit, but I doubt it would do much.
At the same time, having 100 pictures for a 1,000-word post would be ridiculous unless you write for BuzzFeed.
Blog Pros looked at 100 most popular blog posts to find similarities. They found that the most popular articles had one picture for about every 350 words (3.2 images per 1149 words).
Remember, that’s just an average; some had more. You’ll notice that on my posts, I probably go closer to one picture for every 200 words.
Finally, you also need to consider page speed. If you overload your post with pictures, it will take longer to load. It is very important to use a high quality content delivery network (cdn) and fast hosting if you plan to use a lot of images in posts.
You should also be optimizing the file size of your images.
4. Creative ways to break up your content
Part of why images are so great at increasing your visitors’ average time on page is because they break up your text.
No matter how good you are with words, no one wants to read a wall of text because it’s boring.
While images might be your primary way of spacing things out and varying your reader’s experience, there are other effective ways of doing this that give you even more diversity.
Option 1: Lists
Most find that lists are easier to read than normal text. Additionally, you have many different list options:
- lists like this one also break up the text
- numbered lists provide some extra variety
- you can also use custom bullets
The guys at Authority Hacker have a solid blog design and style. Custom bullets are a part of it:
Changing your standard round dot bullet to something like a green checkmark will require some custom CSS.
For example, this is the CSS of the bullet points in the picture above:
li {
list-style-image:url(“images/ul1_m_green.png”) !important;
}
The “list-style-image” property tells the browser that you’d like to use an image for your list (the HTML for lists is “li”).
The “url” element designates the URL of the image you’d like to use. Finally, the “!important” tells your browser to override any other list style properties.
A custom bullet image doesn’t have to be complicated. That simple checkmark looks great. You can either create your own using a tool like Canva or buy a simple icon at the Noun Project.
Option 2: Embedded social media
What’s better than an element that breaks up your text? An element that can also get you additional traffic.
Embedding social media elements is becoming more and more common because it works, especially now because the web hasn’t been saturated with them yet.
The easiest way is to use a plugin like TweetDis. That’s the latest one we’re trying out on the Crazy Egg blog, and it seems to be working pretty well. Here’s what it looks like (box design 4 if any of you try out the plugin):
It stands out, breaks up the text really well, and gets the post a few extra tweets. What’s not to like?
If you don’t want to use a plugin to embed Tweets or Facebook posts (or other social networks), most networks provide a way to embed a specific share. They will still function almost as well (sometimes better) but are a bit more of a pain to use. Here’s a good guide that outlines the process.
Option 3: Tables
Although the application of tables is far more limited than the other options, they provide a nice mixture of image and text elements.
Tables are useful when you’re writing an article that compares multiple things. The best free option for WordPress that I’ve seen is the TablePress plugin:
Again though, if you are familiar with HTML and CSS, you can create your own custom layouts as well.
Option 4: Quotes
In addition to breaking up text, quotes add credibility to your article. If you have an opinion on a topic but aren’t an authority in that niche, you can quote an expert with a similar opinion, and it will be taken more seriously.
There’s one more aspect of quotes that I love, and it’s that you can also use them as part of your promotional strategy. Contact anyone that you quote in your article (if possible) after you publish your post, and let them know. Then, politely ask for a share if they like it.
Alternatively, contact authorities in your niche before you publish your post, and ask for a quote on a specific topic. When you send them the post later, they are much more likely to share it.
5. Lead your visitor through your page
For most blog posts, it’s a case of: here it is, read away.
That’s what starts the skimming for a lot of people.
You might’ve noticed that in my advanced guides on Quick Sprout (which are very long), I don’t leave navigation to chance. In some of my guides, I even include a dotted line in the background that takes you from section to section:
Another subtle tactic I use is I include downward-facing arrows when possible. Again, these direct the reader’s attention down to the next section so that they keep reading.
Finally, this isn’t just a tactic for blog posts; it’s used by copywriters for landing pages as well. Take a look at the initial landing page for Air Story that was written by Joanna Wiebe of Copy Hacker:
Look at the person in the background. It’s been proven that faces in pictures attract attention. We also naturally follow their eye-line, which in this case is to the call to action.
If you’re using pictures of people in your blog posts, try not to have any that are looking up: that kills your reader’s momentum. Either have them looking sideways, towards the reader, or down towards the next section.
6. Give skimmers a chance to re-engage
Remember skimmers?
They’re the ones hopping and scrolling through your page instead of reading every word. You need to win their attention.
To win their attention (and subsequently convince them to go back and read your post in full), you need to take advantage of the elements in your posts that stand out.
We already covered images, and that’s a great start. But there are two other elements that are also important.
Element 1: Colored backgrounds
While it takes some extra effort, I’ve found using colored backgrounds is an effective way to grab attention.
In my definitive guides, I used background color changes to signify a new section. It’s as if it’s saying: “Hey skimmer, check out this before you keep scrolling.”
Element 2: Take full advantage of your subheadlines
Subheadlines (your H2s and H3s) stand out by default. They stand alone on a line and are usually bolder and bigger than the surrounding text.
The worst thing you can do is to write a really basic and plain headline. Instead, take extra time and care to create powerful subheadlines.
For example, if I called this section “Backgrounds and Headlines,” very few skimmers would stop.
But with a title such as “Give Skimmers a Chance to Re-Engage,” a decent portion of the readers will get curious and at least start reading. Then it’s up to me to convince them to keep reading by giving them useful content.
7. Give users control over their visit
One of the main reasons that skimmers skim is that they are unsure if they are interested in your article.
Maybe they already know a lot about the topic you’re writing about and aren’t sure if you’re adding anything new. Or maybe they’re just interested in one or two parts of it, and not a full article.
If you can show these skimmers exactly what’s in the article, they are going to find what they’re looking for easier. This stops them from entering “skimming” mode, and it also prevents them from missing what they’re looking for.
The most effective way to do this is by either explaining the article in the introduction or by having a table of contents.
I’m going to outline 3 different types of table of contents, but they can all work well, so pick whichever one seems appropriate for your posts.
1. Standard Wiki-style table of contents
Wikipedia isn’t pretty, but it’s brilliant from a usability point of view. All of its articles feature the exact same simple table of contents.
You can manually create it if you want to learn a bit of simple HTML and CSS, but it’s much easier to install a plugin like Table of Contents plus. A simple click of a button will automatically grab all your subheadings and create a table of contents:
2. Text- and link-based table of contents
Sometimes headlines alone aren’t descriptive enough, especially if you’re creating a huge guide.
I’ve tried out a few different methods and found that one of my favorite ways to start a guide is an introductory table of contents that mixed descriptions with links.
You could also do this on a much smaller scale in a single blog post with the simple HTML code I mentioned earlier.
You can link to any point on a page pretty easily. To do so, just add an “id” tag to any HTML element (div, span, p, a, img, H2, H3, etc.).
For example:
<h2 id=”tip7″>7. Give Users Control Over Their Visit</h2>
Then, I could link to it from anywhere in this post by referencing that id in a link (an <a> tag):
<a href=”#tip7″>This link will take you tip 7</a>
Create links for all the important areas of your post, and put them together in your intro as you see fit.
3. Image-based table of contents
I came across this type of table of content recently, and I love it. It’s a creative way to get the attention of your readers and direct them to the sections they’ll appreciate the most.
Here’s what it looks like:
This would take some time to put together, using the link HTML code I showed you in option 2 and some CSS to get the layout/color correct. However, you could re-use it in the future with ease.
8. Showcase alternative content formats
I’m a big supporter of giving the reader (you) as much control as possible. You’re the only one who knows what you like the most and what you’re interested in. The same holds true for your readers.
On top of navigation options, you can also give your readers the choice of the format they want to consume your content in.
A single topic could be covered in:
- an article (text/images)
- an infographic
- a podcast
- a video
- a slideshow
If you plan ahead, you can create your article in more than one format before you publish it. This allows readers to pick their favorite format. Some like to listen; others would rather read.
Keep in mind that having content in multiple formats, also known as repurposing, can help expand your promotion options as well.
Let’s go through a few examples of it.
First, a small infographic in an article:
Infographics don’t necessarily need to be as huge as standalone posts on Quick Sprout are. If you do have a large infographic, you can also clip the relevant part to a section in your article and just include that.
If you haven’t seen, CopyBlogger has recently adopted podcasting like madmen! Almost all of their content is hosted on their new Rainmaker.fm podcasting platform.
The problem for them was that many of their visitors prefer to read. Considering that a large part of their audience are writers, there’s a huge chunk that simply prefer reading. In addition, podcasting is a fairly slow format, which often takes 10 minutes to say what you could read in five.
The team at CopyBlogger anticipated this problem and decided to offer their content in two different formats. You can listen to the podcast as the first option, or you can read a well-formatted transcript below.
Finally, you can also do the opposite, like we do on Crazy Egg. All the content on the blog are traditional articles, which are published once every weekday. However, at the bottom of certain posts, there’s an opportunity to download a podcast version of the post (3-4 times a month).
Think about which formats work best for the topic you’re writing about and what your audiences prefers.
You can try out a few different formats over the course of a few months and then stick with the ones that perform the best.
9. Read your visitor’s mind to ramp up results
The eight tips above show you what you need to do, but not exactly how to do it.
If you really want to maximize the amount of time your readers spend consuming your content, you need to test.
First, come up with a hypothesis
Always have a reason for including or changing something. I’d recommend starting by trying these tips on an older post that gets fairly steady traffic.
You might want to start with adding a table of contents. Your theory, for example, would be: a table of contents should prevent readers from missing what they’re looking for.
Second, you need to test it
You could simply make the change and compare your new results to old ones, but that isn’t the best option.
Ideally, you would use a tool like Optimizely to create 2 different pages (1 the same, 1 with a table of contents) and split traffic to each option.
Third, look at the results
After you’ve had a significant amount of traffic read the post, you need to look at the metrics you’re most interested in:
- average time on page
- bounce rate
- pages per visit
That’s how you determine if your change truly helped. A winning change should result in positive improvements in at least two of the three metrics above (ideally all three). Not every test will win, and that’s why it’s important to keep testing new theories after.
Finally, determine why you got the results you did
This is the trickiest part, but it is essential to maximizing your engagement improvements.
The only way to determine the underlying reasons of why your results changed is to use heatmap software (obviously, I’m partial to Crazy Egg).
You could use the software to look at:
- which percentage of readers used the table of contents
- how much attention was given to the table relative to surrounding text and elements (e.g., the sidebar)
- which table of content links were clicked the most
Once you think you understand how the new modification affected your readers’ behavior, you can come up with a new theory. If your initial experiment already won, you can develop a theory on how to improve it further (split-test the size, color, or format, etc.).
Testing never ends!
Once your traffic reaches a high level, you can then hire a conversion rate optimization expert to execute all these steps for you. Until then, you’re on your own.
Conclusion
The average time that a reader spends on your pages is one of the most important metrics for an online business.
On top of that, it’s one of the most important feedback mechanisms that lets you know if people are benefiting from your work.
If you use even a few of these nine formatting tips, you can more than double the average time on page for most blogs, which is huge.
Think about the difference that kind of engagement would provide, not just for a single post, but for every post you write in the future.
Then, make a list of which of these tips you’d like to try in your next post so that you don’t forget. I’d love it if you came back and let me know how it went.
But first, one more thing: I’d be really interested to find out which of these tips is the most useful or surprising for you. Please let me know in the comments below.
I’ve been through it all. From publishing posts that no one reads to posts that get thousands of views and hundreds of comments within a day.
Putting in time and effort into writing a post and then getting an average time on page of 10 seconds sucks.
When I write a post, I want readers to take 10, 20, or even 30 minutes out of their days to read it word by word. I know that not all readers will do that, but if a decent chunk of them do, I’mthrilled.
On a typical blog, only about 2% will spend more than two minutes reading a post.
Fewer will read the whole thing. The good news is that yours doesn’t have to be a typical blog—it can be better.
There are many factors that affect how much time the average reader will spend on one of your blog posts:
- load speed
- interest in topic
- quality of writing
- quality of presentation (i.e., formatting)
- length of content
These elements are all more or less under your control, so it’s important that you take the time to understand them.
In this post, we’re going to focus specifically on the quality of your presentation.
I’m going to show you 9 most crucial and often missed formatting tips that can make a bigdifference to the average amount of time your readers spend on your page.
1. Forget blog width, focus on this instead
Imagine if a blog post was printed on a page the size of a giant movie poster.
You would have a heck of a time trying to read the whole thing, having to constantly look back and forth, trying to find the next line.
It would be slow, frustrating, and hard to retain information this way. Not only that, if someone walked up to you with it and asked you to read it, it’d probably be intimidating.
The same thing happens when you make your blog post too wide. I am sure you noticed that the page in Microsoft Word doesn’t take up the whole width of your screen. Same concept.
Now, let’s take it to the other extreme: imagine if you wrote one word per line. It’d make it harder to connect words and sentences together. Additionally, you’d be scrolling non-stop.
So, the optimal setup is obviously somewhere in the middle.
Luckily, we can transition from theoretical concepts to the actual research data.
A study of reader comprehension found that:
- When someone is reading slowly, lines of about 55 characters per line are best.
- When someone is reading fast, lines of about 100 characters per line are best.
When I say “best,” I am talking in terms of reading speed and comprehension.
It’s important that you consider both of these reading types when you write a blog post.
Why? Because a small portion of readers will read your whole post, practically word by word.
However, most Internet readers are skimmers. Readers only read an average of 20-28% of a post, even if they like it.
With the huge amount of content being published, over 2 million blog posts per day alone, skimming is necessary. People skim to read the key points of an article to see if they are interested. If they are interested, they often go back and read the article more slowly.
When you optimize your content for skimmers, they will be able to understand more from quickly scrolling through, which gives you a better chance of grabbing their attention.
So what’s the best width? I think it’s safe to say that each line should hold somewhere between 55 to 100 characters. Every letter, space, or punctuation (comma, period, etc.) count as a single character.
Some claim that around 66 characters per line is ideal, but I’ve found that a bit higher works better for most blogs.
There’s two more factors we need to consider here: font size and font typeface.
The bigger your font, the fewer characters will fit on a line. Similarly, some fonts are wider than others.
First, pick your font, which you’ve probably already done.
Then optimize your blog width. In general, somewhere between 500 and 650 pixels is ideal. Quick Sprout falls near the upper limit of this range.
Before we do any testing, see if you’re doing okay already. Copy a single line of one of your previous posts into a character count calculator.
Note that there will be some variation based on which line you choose. You can check four or five lines to get a more accurate average.
If you already fall within that 55 to 100 character range, it’s up to you if you’d like to change it at this point.
Assuming that you’re not in this range, or are at the very low end, here’s how you can optimize your font size and blog width.
Step 1: Pick a blog width
Unless you are very comfortable modifying HTML and CSS, or you have a developer, it’s usually the easiest to change the font size unless your blog width falls out of that 500-650 pixel range (pretty rare).
I can’t show you how to easily change the width of your blog because it depends on the exact theme you’re using. Font size is much simpler.
Step 2: See what 100 characters looks like
In both Chrome and Firefox, you can bring up an element/page inspector using the shortcut “Ctrl + Shift + I”. You can use this to dig around and play with the code on your blog a bit (don’t worry, none of it will have any effect on your actual blog).
Alternatively, right-click on a sentence and select “inspect element” to bring up the inspector. If you use the shortcut, scroll through the HTML until you find the paragraph tags that contain a sentence in your post.
Next, left-click (the normal one) on any element that contains a sentence in the inspector.
Then, right click that sentence and choose “Edit as Text.”
Highlight the entire sentence, delete it, and then copy and paste this example phrase that has 100 characters (without the quotation marks):
“This is a line of words that has only 100 characters in it. Copy it to test font sizes on your blog.”
Then press enter to see the changes reflected on your screen.
If you want your blog to be 100 characters wide, it should accommodate this example phrase perfectly. Adjust the phrase if you would like fewer characters.
On the character count test that we did earlier, I saw that Quick Sprout was set up to fit about 100 characters. No big surprise that this sentence fit almost perfectly.
But if the sentence did not fit as you’d like, you can also preview different font sizes using the inspector, so don’t close it yet.
With that sentence highlighted in the inspector, look on the panel on the right. That’s where you can see the CSS.
Scroll down, and look for a “font-size” property that doesn’t have a line through it. Assuming you have a responsive theme (which you really should), it’ll look something like “font-size:X.XX em.”
If you can’t find it, you can also click the “+” sign at the top of the CSS section to create a new property. Then, click inside the new curly brackets – {} – and type in “font-size:1em” to start.
To change the font size, left-click the number (the “X.XX” part), and type in a different number. A bigger number will make the text bigger.
Press enter after each change and keep adjusting that value until you’re happy.
Step 3: Make the changes
Once you’ve found your ideal font size, you need to make the change in your admin panel, whether you’re using WordPress or a different platform.
First check your theme options as there’s usually an easy setting to change font size.
Otherwise, you’ll have to add the CSS to your CSS code in the editor, ideally in a child theme.
2. Is it time to ditch the sidebar?
The sidebar is such a standard feature of blogs that it’s rarely thought about, but that’s a mistake.
The average sidebar is barely ever used by visitors. Even a highly optimized sidebar like Brian Dean’s at Backlinko only gets 1.9% of visitors clicking on the most important element:
Okay, so why does this matter? The problem is that your sidebar is a distraction, especially to new readers.
The time that you have to capture a visitor’s attention has become increasingly short. It’s under 4 seconds now.
A new visitor may spend anywhere from 1-2 seconds looking at your sidebar, or about 25-50% of your window of opportunity to get them to do what you want.
There are a few good case studies that support the idea of removing your sidebar. Brian Harris was able to improve his email opt-in rate by 26% on blog posts by removing his:
Impact Branding & Design also tested this idea. They went from this complicated sidebar:
to this:
By doing that, they were able to improve lead volume by 71%.
What those studies confirm is that a sidebar can be a distraction.
On a landing page, you definitely should not have a sidebar.
On a blog, you’ll have to test it. In most cases, I believe it will increase the average time on page for your posts. As we saw, it might also increase your email opt-in rate.
Personally, I like being able to include my bio on every blog post (in the sidebar) to help build my brand and be more memorable. But that doesn’t mean that it is or isn’t going to be right for you.
Split test having a sidebar and not having a sidebar. See if the results indicate that you should drop the sidebar altogether.
3. Images can be an asset or a distraction
I’m a huge fan of images, but you need to use them in the right way.
Proper image selection will have a large positive impact on the amount of time your visitors spend reading your blog posts.
The former Director of Product Management for PRWeb analyzed thousands of press releases to discover the impact of images.
He found that press releases with no images had an average time on page of 2:18. However, press releases with at least one image had an average time on page of 2:47.
Even if you don’t pick the best pictures, being able to break up your text is bound to have a decent effect on your time on page.
Image guideline #1: Use the right type of images
Based on that analysis, any picture seems better than no picture, but there is a difference between different types of pictures.
I looked at 41 blogs across a variety of niches to find which types of images were shared the most.
The best were hand-drawn and animated images. Following that were graphs, infographics, and stock photos.
Some of those image types aren’t realistic. Are you really going to include five hand-drawn images or infographics in a post? Probably not because they’re expensive. Even if you have the skill to make them yourself, they take a lot of time to make.
But graphs? You can easily find a few useful graphs from research you cite. Graphs are fantastic because they are not only interesting but they also force the user to take a few seconds and figure out what’s going on.
What about stock photos? I don’t recommend just using plain stock photos, but you can buy these for $1 or less if you know where to look. You can even customize them to look better and grab more attention. Check out my guide to making inexpensive custom images if you haven’t yet.
Image guideline #2: Use the right number of images
Imagine if I used one picture for a 5,000-word article. It might help the time on page a bit, but I doubt it would do much.
At the same time, having 100 pictures for a 1,000-word post would be ridiculous unless you write for BuzzFeed.
Blog Pros looked at 100 most popular blog posts to find similarities. They found that the most popular articles had one picture for about every 350 words (3.2 images per 1149 words).
Remember, that’s just an average; some had more. You’ll notice that on my posts, I probably go closer to one picture for every 200 words.
Finally, you also need to consider page speed. If you overload your post with pictures, it will take longer to load. It is very important to use a high quality content delivery network (cdn) and fast hosting if you plan to use a lot of images in posts.
You should also be optimizing the file size of your images.
4. Creative ways to break up your content
Part of why images are so great at increasing your visitors’ average time on page is because they break up your text.
No matter how good you are with words, no one wants to read a wall of text because it’s boring.
While images might be your primary way of spacing things out and varying your reader’s experience, there are other effective ways of doing this that give you even more diversity.
Option 1: Lists
Most find that lists are easier to read than normal text. Additionally, you have many different list options:
- lists like this one also break up the text
- numbered lists provide some extra variety
- you can also use custom bullets
The guys at Authority Hacker have a solid blog design and style. Custom bullets are a part of it:
Changing your standard round dot bullet to something like a green checkmark will require some custom CSS.
For example, this is the CSS of the bullet points in the picture above:
li {
list-style-image:url(“images/ul1_m_green.png”) !important;
}
The “list-style-image” property tells the browser that you’d like to use an image for your list (the HTML for lists is “li”).
The “url” element designates the URL of the image you’d like to use. Finally, the “!important” tells your browser to override any other list style properties.
A custom bullet image doesn’t have to be complicated. That simple checkmark looks great. You can either create your own using a tool like Canva or buy a simple icon at the Noun Project.
Option 2: Embedded social media
What’s better than an element that breaks up your text? An element that can also get you additional traffic.
Embedding social media elements is becoming more and more common because it works, especially now because the web hasn’t been saturated with them yet.
The easiest way is to use a plugin like TweetDis. That’s the latest one we’re trying out on the Crazy Egg blog, and it seems to be working pretty well. Here’s what it looks like (box design 4 if any of you try out the plugin):
It stands out, breaks up the text really well, and gets the post a few extra tweets. What’s not to like?
If you don’t want to use a plugin to embed Tweets or Facebook posts (or other social networks), most networks provide a way to embed a specific share. They will still function almost as well (sometimes better) but are a bit more of a pain to use. Here’s a good guide that outlines the process.
Option 3: Tables
Although the application of tables is far more limited than the other options, they provide a nice mixture of image and text elements.
Tables are useful when you’re writing an article that compares multiple things. The best free option for WordPress that I’ve seen is the TablePress plugin:
Again though, if you are familiar with HTML and CSS, you can create your own custom layouts as well.
Option 4: Quotes
In addition to breaking up text, quotes add credibility to your article. If you have an opinion on a topic but aren’t an authority in that niche, you can quote an expert with a similar opinion, and it will be taken more seriously.
There’s one more aspect of quotes that I love, and it’s that you can also use them as part of your promotional strategy. Contact anyone that you quote in your article (if possible) after you publish your post, and let them know. Then, politely ask for a share if they like it.
Alternatively, contact authorities in your niche before you publish your post, and ask for a quote on a specific topic. When you send them the post later, they are much more likely to share it.
5. Lead your visitor through your page
For most blog posts, it’s a case of: here it is, read away.
That’s what starts the skimming for a lot of people.
You might’ve noticed that in my advanced guides on Quick Sprout (which are very long), I don’t leave navigation to chance. In some of my guides, I even include a dotted line in the background that takes you from section to section:
Another subtle tactic I use is I include downward-facing arrows when possible. Again, these direct the reader’s attention down to the next section so that they keep reading.
Finally, this isn’t just a tactic for blog posts; it’s used by copywriters for landing pages as well. Take a look at the initial landing page for Air Story that was written by Joanna Wiebe of Copy Hacker:
Look at the person in the background. It’s been proven that faces in pictures attract attention. We also naturally follow their eye-line, which in this case is to the call to action.
If you’re using pictures of people in your blog posts, try not to have any that are looking up: that kills your reader’s momentum. Either have them looking sideways, towards the reader, or down towards the next section.
6. Give skimmers a chance to re-engage
Remember skimmers?
They’re the ones hopping and scrolling through your page instead of reading every word. You need to win their attention.
To win their attention (and subsequently convince them to go back and read your post in full), you need to take advantage of the elements in your posts that stand out.
We already covered images, and that’s a great start. But there are two other elements that are also important.
Element 1: Colored backgrounds
While it takes some extra effort, I’ve found using colored backgrounds is an effective way to grab attention.
In my definitive guides, I used background color changes to signify a new section. It’s as if it’s saying: “Hey skimmer, check out this before you keep scrolling.”
Element 2: Take full advantage of your subheadlines
Subheadlines (your H2s and H3s) stand out by default. They stand alone on a line and are usually bolder and bigger than the surrounding text.
The worst thing you can do is to write a really basic and plain headline. Instead, take extra time and care to create powerful subheadlines.
For example, if I called this section “Backgrounds and Headlines,” very few skimmers would stop.
But with a title such as “Give Skimmers a Chance to Re-Engage,” a decent portion of the readers will get curious and at least start reading. Then it’s up to me to convince them to keep reading by giving them useful content.
7. Give users control over their visit
One of the main reasons that skimmers skim is that they are unsure if they are interested in your article.
Maybe they already know a lot about the topic you’re writing about and aren’t sure if you’re adding anything new. Or maybe they’re just interested in one or two parts of it, and not a full article.
If you can show these skimmers exactly what’s in the article, they are going to find what they’re looking for easier. This stops them from entering “skimming” mode, and it also prevents them from missing what they’re looking for.
The most effective way to do this is by either explaining the article in the introduction or by having a table of contents.
I’m going to outline 3 different types of table of contents, but they can all work well, so pick whichever one seems appropriate for your posts.
1. Standard Wiki-style table of contents
Wikipedia isn’t pretty, but it’s brilliant from a usability point of view. All of its articles feature the exact same simple table of contents.
You can manually create it if you want to learn a bit of simple HTML and CSS, but it’s much easier to install a plugin like Table of Contents plus. A simple click of a button will automatically grab all your subheadings and create a table of contents:
2. Text- and link-based table of contents
Sometimes headlines alone aren’t descriptive enough, especially if you’re creating a huge guide.
I’ve tried out a few different methods and found that one of my favorite ways to start a guide is an introductory table of contents that mixed descriptions with links.
You could also do this on a much smaller scale in a single blog post with the simple HTML code I mentioned earlier.
You can link to any point on a page pretty easily. To do so, just add an “id” tag to any HTML element (div, span, p, a, img, H2, H3, etc.).
For example:
<h2 id=”tip7″>7. Give Users Control Over Their Visit</h2>
Then, I could link to it from anywhere in this post by referencing that id in a link (an <a> tag):
<a href=”#tip7″>This link will take you tip 7</a>
Create links for all the important areas of your post, and put them together in your intro as you see fit.
3. Image-based table of contents
I came across this type of table of content recently, and I love it. It’s a creative way to get the attention of your readers and direct them to the sections they’ll appreciate the most.
Here’s what it looks like:
This would take some time to put together, using the link HTML code I showed you in option 2 and some CSS to get the layout/color correct. However, you could re-use it in the future with ease.
8. Showcase alternative content formats
I’m a big supporter of giving the reader (you) as much control as possible. You’re the only one who knows what you like the most and what you’re interested in. The same holds true for your readers.
On top of navigation options, you can also give your readers the choice of the format they want to consume your content in.
A single topic could be covered in:
- an article (text/images)
- an infographic
- a podcast
- a video
- a slideshow
If you plan ahead, you can create your article in more than one format before you publish it. This allows readers to pick their favorite format. Some like to listen; others would rather read.
Keep in mind that having content in multiple formats, also known as repurposing, can help expand your promotion options as well.
Let’s go through a few examples of it.
First, a small infographic in an article:
Infographics don’t necessarily need to be as huge as standalone posts on Quick Sprout are. If you do have a large infographic, you can also clip the relevant part to a section in your article and just include that.
If you haven’t seen, CopyBlogger has recently adopted podcasting like madmen! Almost all of their content is hosted on their new Rainmaker.fm podcasting platform.
The problem for them was that many of their visitors prefer to read. Considering that a large part of their audience are writers, there’s a huge chunk that simply prefer reading. In addition, podcasting is a fairly slow format, which often takes 10 minutes to say what you could read in five.
The team at CopyBlogger anticipated this problem and decided to offer their content in two different formats. You can listen to the podcast as the first option, or you can read a well-formatted transcript below.
Finally, you can also do the opposite, like we do on Crazy Egg. All the content on the blog are traditional articles, which are published once every weekday. However, at the bottom of certain posts, there’s an opportunity to download a podcast version of the post (3-4 times a month).
Think about which formats work best for the topic you’re writing about and what your audiences prefers.
You can try out a few different formats over the course of a few months and then stick with the ones that perform the best.
9. Read your visitor’s mind to ramp up results
The eight tips above show you what you need to do, but not exactly how to do it.
If you really want to maximize the amount of time your readers spend consuming your content, you need to test.
First, come up with a hypothesis
Always have a reason for including or changing something. I’d recommend starting by trying these tips on an older post that gets fairly steady traffic.
You might want to start with adding a table of contents. Your theory, for example, would be: a table of contents should prevent readers from missing what they’re looking for.
Second, you need to test it
You could simply make the change and compare your new results to old ones, but that isn’t the best option.
Ideally, you would use a tool like Optimizely to create 2 different pages (1 the same, 1 with a table of contents) and split traffic to each option.
Third, look at the results
After you’ve had a significant amount of traffic read the post, you need to look at the metrics you’re most interested in:
- average time on page
- bounce rate
- pages per visit
That’s how you determine if your change truly helped. A winning change should result in positive improvements in at least two of the three metrics above (ideally all three). Not every test will win, and that’s why it’s important to keep testing new theories after.
Finally, determine why you got the results you did
This is the trickiest part, but it is essential to maximizing your engagement improvements.
The only way to determine the underlying reasons of why your results changed is to use heatmap software (obviously, I’m partial to Crazy Egg).
You could use the software to look at:
- which percentage of readers used the table of contents
- how much attention was given to the table relative to surrounding text and elements (e.g., the sidebar)
- which table of content links were clicked the most
Once you think you understand how the new modification affected your readers’ behavior, you can come up with a new theory. If your initial experiment already won, you can develop a theory on how to improve it further (split-test the size, color, or format, etc.).
Testing never ends!
Once your traffic reaches a high level, you can then hire a conversion rate optimization expert to execute all these steps for you. Until then, you’re on your own.
Conclusion
The average time that a reader spends on your pages is one of the most important metrics for an online business.
On top of that, it’s one of the most important feedback mechanisms that lets you know if people are benefiting from your work.
If you use even a few of these nine formatting tips, you can more than double the average time on page for most blogs, which is huge.
Think about the difference that kind of engagement would provide, not just for a single post, but for every post you write in the future.
Then, make a list of which of these tips you’d like to try in your next post so that you don’t forget. I’d love it if you came back and let me know how it went.
But first, one more thing: I’d be really interested to find out which of these tips is the most useful or surprising for you. Please let me know in the comments below.
I’ve been through it all. From publishing posts that no one reads to posts that get thousands of views and hundreds of comments within a day.
Putting in time and effort into writing a post and then getting an average time on page of 10 seconds sucks.
When I write a post, I want readers to take 10, 20, or even 30 minutes out of their days to read it word by word. I know that not all readers will do that, but if a decent chunk of them do, I’mthrilled.
On a typical blog, only about 2% will spend more than two minutes reading a post.
Fewer will read the whole thing. The good news is that yours doesn’t have to be a typical blog—it can be better.
There are many factors that affect how much time the average reader will spend on one of your blog posts:
It’s important that you consider both of these reading types when you write a blog post.
Why? Because a small portion of readers will read your whole post, practically word by word.
However, most Internet readers are skimmers. Readers only read an average of 20-28% of a post, even if they like it.
With the huge amount of content being published, over 2 million blog posts per day alone, skimming is necessary. People skim to read the key points of an article to see if they are interested. If they are interested, they often go back and read the article more slowly.
When you optimize your content for skimmers, they will be able to understand more from quickly scrolling through, which gives you a better chance of grabbing their attention.
So what’s the best width? I think it’s safe to say that each line should hold somewhere between 55 to 100 characters. Every letter, space, or punctuation (comma, period, etc.) count as a single character.
Some claim that around 66 characters per line is ideal, but I’ve found that a bit higher works better for most blogs.
There’s two more factors we need to consider here: font size and font typeface.
The bigger your font, the fewer characters will fit on a line. Similarly, some fonts are wider than others.
First, pick your font, which you’ve probably already done.
Then optimize your blog width. In general, somewhere between 500 and 650 pixels is ideal. Quick Sprout falls near the upper limit of this range.
Before we do any testing, see if you’re doing okay already. Copy a single line of one of your previous posts into a character count calculator.
Note that there will be some variation based on which line you choose. You can check four or five lines to get a more accurate average.
If you already fall within that 55 to 100 character range, it’s up to you if you’d like to change it at this point.
Assuming that you’re not in this range, or are at the very low end, here’s how you can optimize your font size and blog width.
Next, left-click (the normal one) on any element that contains a sentence in the inspector.
Then, right click that sentence and choose “Edit as Text.”
Highlight the entire sentence, delete it, and then copy and paste this example phrase that has 100 characters (without the quotation marks):
“This is a line of words that has only 100 characters in it. Copy it to test font sizes on your blog.”
Then press enter to see the changes reflected on your screen.
If you want your blog to be 100 characters wide, it should accommodate this example phrase perfectly. Adjust the phrase if you would like fewer characters.
On the character count test that we did earlier, I saw that Quick Sprout was set up to fit about 100 characters. No big surprise that this sentence fit almost perfectly.
But if the sentence did not fit as you’d like, you can also preview different font sizes using the inspector, so don’t close it yet.
With that sentence highlighted in the inspector, look on the panel on the right. That’s where you can see the CSS.
Scroll down, and look for a “font-size” property that doesn’t have a line through it. Assuming you have a responsive theme (which you really should), it’ll look something like “font-size:X.XX em.”
If you can’t find it, you can also click the “+” sign at the top of the CSS section to create a new property. Then, click inside the new curly brackets – {} – and type in “font-size:1em” to start.
To change the font size, left-click the number (the “X.XX” part), and type in a different number. A bigger number will make the text bigger.
Press enter after each change and keep adjusting that value until you’re happy.
Otherwise, you’ll have to add the CSS to your CSS code in the editor, ideally in a child theme.
Okay, so why does this matter? The problem is that your sidebar is a distraction, especially to new readers.
The time that you have to capture a visitor’s attention has become increasingly short. It’s under 4 seconds now.
A new visitor may spend anywhere from 1-2 seconds looking at your sidebar, or about 25-50% of your window of opportunity to get them to do what you want.
There are a few good case studies that support the idea of removing your sidebar. Brian Harris was able to improve his email opt-in rate by 26% on blog posts by removing his:
Impact Branding & Design also tested this idea. They went from this complicated sidebar:
to this:
By doing that, they were able to improve lead volume by 71%.
What those studies confirm is that a sidebar can be a distraction.
On a landing page, you definitely should not have a sidebar.
On a blog, you’ll have to test it. In most cases, I believe it will increase the average time on page for your posts. As we saw, it might also increase your email opt-in rate.
Personally, I like being able to include my bio on every blog post (in the sidebar) to help build my brand and be more memorable. But that doesn’t mean that it is or isn’t going to be right for you.
Split test having a sidebar and not having a sidebar. See if the results indicate that you should drop the sidebar altogether.
Even if you don’t pick the best pictures, being able to break up your text is bound to have a decent effect on your time on page.
Remember, that’s just an average; some had more. You’ll notice that on my posts, I probably go closer to one picture for every 200 words.
Finally, you also need to consider page speed. If you overload your post with pictures, it will take longer to load. It is very important to use a high quality content delivery network (cdn) and fast hosting if you plan to use a lot of images in posts.
You should also be optimizing the file size of your images.
Changing your standard round dot bullet to something like a green checkmark will require some custom CSS.
For example, this is the CSS of the bullet points in the picture above:
li {
list-style-image:url(“images/ul1_m_green.png”) !important;
}
The “list-style-image” property tells the browser that you’d like to use an image for your list (the HTML for lists is “li”).
The “url” element designates the URL of the image you’d like to use. Finally, the “!important” tells your browser to override any other list style properties.
A custom bullet image doesn’t have to be complicated. That simple checkmark looks great. You can either create your own using a tool like Canva or buy a simple icon at the Noun Project.
It stands out, breaks up the text really well, and gets the post a few extra tweets. What’s not to like?
If you don’t want to use a plugin to embed Tweets or Facebook posts (or other social networks), most networks provide a way to embed a specific share. They will still function almost as well (sometimes better) but are a bit more of a pain to use. Here’s a good guide that outlines the process.
Again though, if you are familiar with HTML and CSS, you can create your own custom layouts as well.
There’s one more aspect of quotes that I love, and it’s that you can also use them as part of your promotional strategy. Contact anyone that you quote in your article (if possible) after you publish your post, and let them know. Then, politely ask for a share if they like it.
Alternatively, contact authorities in your niche before you publish your post, and ask for a quote on a specific topic. When you send them the post later, they are much more likely to share it.
Another subtle tactic I use is I include downward-facing arrows when possible. Again, these direct the reader’s attention down to the next section so that they keep reading.
Finally, this isn’t just a tactic for blog posts; it’s used by copywriters for landing pages as well. Take a look at the initial landing page for Air Story that was written by Joanna Wiebe of Copy Hacker:
Look at the person in the background. It’s been proven that faces in pictures attract attention. We also naturally follow their eye-line, which in this case is to the call to action.
If you’re using pictures of people in your blog posts, try not to have any that are looking up: that kills your reader’s momentum. Either have them looking sideways, towards the reader, or down towards the next section.
The worst thing you can do is to write a really basic and plain headline. Instead, take extra time and care to create powerful subheadlines.
For example, if I called this section “Backgrounds and Headlines,” very few skimmers would stop.
But with a title such as “Give Skimmers a Chance to Re-Engage,” a decent portion of the readers will get curious and at least start reading. Then it’s up to me to convince them to keep reading by giving them useful content.
You could also do this on a much smaller scale in a single blog post with the simple HTML code I mentioned earlier.
You can link to any point on a page pretty easily. To do so, just add an “id” tag to any HTML element (div, span, p, a, img, H2, H3, etc.).
For example:
<h2 id=”tip7″>7. Give Users Control Over Their Visit</h2>
Then, I could link to it from anywhere in this post by referencing that id in a link (an <a> tag):
<a href=”#tip7″>This link will take you tip 7</a>
Create links for all the important areas of your post, and put them together in your intro as you see fit.
This would take some time to put together, using the link HTML code I showed you in option 2 and some CSS to get the layout/color correct. However, you could re-use it in the future with ease.
Infographics don’t necessarily need to be as huge as standalone posts on Quick Sprout are. If you do have a large infographic, you can also clip the relevant part to a section in your article and just include that.
If you haven’t seen, CopyBlogger has recently adopted podcasting like madmen! Almost all of their content is hosted on their new Rainmaker.fm podcasting platform.
The problem for them was that many of their visitors prefer to read. Considering that a large part of their audience are writers, there’s a huge chunk that simply prefer reading. In addition, podcasting is a fairly slow format, which often takes 10 minutes to say what you could read in five.
The team at CopyBlogger anticipated this problem and decided to offer their content in two different formats. You can listen to the podcast as the first option, or you can read a well-formatted transcript below.
Finally, you can also do the opposite, like we do on Crazy Egg. All the content on the blog are traditional articles, which are published once every weekday. However, at the bottom of certain posts, there’s an opportunity to download a podcast version of the post (3-4 times a month).
Think about which formats work best for the topic you’re writing about and what your audiences prefers.
You can try out a few different formats over the course of a few months and then stick with the ones that perform the best.
You could use the software to look at:
No comments:
Post a Comment