Total Noob
Banned - By Request
- May 10, 2009
- 2,446
- 2,732
If people are arriving on your pages and leaving before they read all of the way through, you are wasting traffic and leaving money on the table.
Neglecting the aesthetics of how your content is displayed will turn readers off and make them bounce at a high rate.
If you have published content that people read (pretty much everyone on this forum), these six basic suggestions can help you improve your bounce rate. They?re easy to implement and they will have a positive effect on the overall performance of your content.
(And before YOU bounce from THIS post, consider the effects a few hours of optimization could have. A 10% decrease in your bounce rate will result in a 10% increase in earnings (hypothetically). Calculate that increase over the span of a month, then read on.)
#1 - Font size should be 12pt or higher
The body text of your content is what the reader will ultimately be staring at. The words need to be big enough so he or she doesn?t have to strain after a few seconds or minutes of reading.
12pt (roughly 16px) is the generally accepted standard for laptops and monitors. That?s big enough to ensure readers of all vision levels can read it, but small enough to still be seen as traditional body text.
If you?re using an off-the-shelf website template or WordPress theme, the designer may automatically set the body text to less than 12pt. Check right now, and if it?s lower than that, adjust as necessary. Play around with a few different sizes to see which one is the most visually pleasing with your current design.
Check up on your mobile body text font size, too. Responsive website templates and themes tend to scale everything down so that it?s too small, even for tablets and phones. Confirm with a tool like http://ready.mobi/ that your content is effortless to read on every device. Content may be too big, resulting in 1-3 words per line, or it may be too small, resulting in the reader having to strain.
#2 - Line spacing should be ~150% of your font size
Less talked about is line spacing, another important attribute to making your text readable and keeping visitors on the page. It?s the amount of space that?s in between each line of a paragraph.
The general rule of thumb is that line spacing should be 150% of your font size. Experiment with 150% +/- 20% until you find a spacing that looks good with your formatting and the font you use.
#3 - Lines should be 50-75 characters long
More than 75 characters and it?s difficult to keep track of your place within a paragraph. Fewer than 50 characters and the eyes are flickering too much - and after a certain amount of time, the short lines do nothing to improve speed of reading. They actually slow you down because you keep losing your place.
If your paragraphs are unusually wide or unusually long, you should address the line length to make everything easier on the eyes. This rule isn?t necessarily set in stone like the font size and line spacing rules are, but it?s something you should pay attention to.
#4 - Match quality images with quality content
Don?t skimp on the images you use for headers and contextual images. In a second, images can legitimize your words and keep readers on the page. Or, they make you look utterly generic to your audience, resulting in an immediate bounce. Your choice.
Think about how you would react if you landed on a site filled with images like the one below...
http://previews.123rf.com/images/wavebreakmediamicro/wavebreakmediamicro1111/wavebreakmediamicro111107690/11227358-An-illustrated-white-figure-with-a-red-question-mark-on-top-Stock-Photo.jpg
?you would bounce, right?
I like http://photodune.net - the balance of affordability and quality is perfect (each photo is $1 for the smallest size). As with all stock photo libraries, it?s not all good, but there are plenty of gems in the rough.
Some of you will be able to get by with more generic images - say, a nice picture of a laptop with Google Analytics on it for a post like this (if BHW had featured images). Try your luck with this https://bootstrapbay.com/blog/free-stock-photos/ of free HQ stock photo sites - most of them publish new images weekly and have a decent number of photos for you to browse through.
#5 - Add to your voice through colors
If you landed on a health website with an orange and brown color scheme, what would you think?
That?s a pretty glaring example, but the point is clear: your website?s colors have to match the content you?re putting out. If they don?t, your readers will get confused on a subconscious level and be less inclined to trust your brand and the information/opinions you?re publishing. And because of that, they will bounce.
This is a http://www.color-wheel-pro.com/color-meaning.html of all of the colors and their meanings. Note that the first two on the list - red and orange. They?re the two I use for Boston Hype for a reason.
As far as text coloring itself, your text should be dark and your background should be light. This is a http://www.ironicsans.com/owmyeyes/ of how light-on-dark text just doesn?t work.
Every color on your website should be coordinated, too. Once you have a base color defined, go http://paletton.com/ to generate other colors to be used in other elements, such as CTAs.
#6 - Make everything above the fold attractive
Everything above the fold is your first impression. Make a good one! If you don?t, this is where the majority of your bounces will come from.
In general, all you need is a nice header image, the author name, the date, and sharing options. Try to make it as clean as possible. The goal is for your reader to say ?looks good? and move right down to the actual words.
Remove your useless elements, such as:
UI is just as important as design. Clean your website up so the reader will land on the page, say ?okay, looks good?, continue reading, and eventually continue onto your conversion funnel (hopefully).
#7 - Optimize with a heatmap
Heatmaps are the bomb. They can show where users are looking on your site and how far down the page they get.
For smaller websites and less important assets, a heatmap won?t be necessary - there just won?t be enough traffic to justify using one.
But let?s say you have a landing page that?s solid in every regard besides its unusually high bounce rate - you might be able to garner some insight into where people are leaving with a heatmap. Then, you can address those sections individually to make them pop and appeal to the user more. And as you knock each problematic section off one by one, your bounce rate will gradually get lower and lower.
http://www.mequoda.com/articles/subscription_websites/5-heat-map-tracking-tools-to-watch-what-your-visitors-do/ - some are free, the good ones are paid.
Neglecting the aesthetics of how your content is displayed will turn readers off and make them bounce at a high rate.
If you have published content that people read (pretty much everyone on this forum), these six basic suggestions can help you improve your bounce rate. They?re easy to implement and they will have a positive effect on the overall performance of your content.
(And before YOU bounce from THIS post, consider the effects a few hours of optimization could have. A 10% decrease in your bounce rate will result in a 10% increase in earnings (hypothetically). Calculate that increase over the span of a month, then read on.)
#1 - Font size should be 12pt or higher
The body text of your content is what the reader will ultimately be staring at. The words need to be big enough so he or she doesn?t have to strain after a few seconds or minutes of reading.
12pt (roughly 16px) is the generally accepted standard for laptops and monitors. That?s big enough to ensure readers of all vision levels can read it, but small enough to still be seen as traditional body text.
If you?re using an off-the-shelf website template or WordPress theme, the designer may automatically set the body text to less than 12pt. Check right now, and if it?s lower than that, adjust as necessary. Play around with a few different sizes to see which one is the most visually pleasing with your current design.
Check up on your mobile body text font size, too. Responsive website templates and themes tend to scale everything down so that it?s too small, even for tablets and phones. Confirm with a tool like http://ready.mobi/ that your content is effortless to read on every device. Content may be too big, resulting in 1-3 words per line, or it may be too small, resulting in the reader having to strain.
#2 - Line spacing should be ~150% of your font size
Less talked about is line spacing, another important attribute to making your text readable and keeping visitors on the page. It?s the amount of space that?s in between each line of a paragraph.
- Too little and your readers will lose track of where they are when they go to a new line.
- Too much and your content look like a 9th grader?s double-spaced essay.
The general rule of thumb is that line spacing should be 150% of your font size. Experiment with 150% +/- 20% until you find a spacing that looks good with your formatting and the font you use.
#3 - Lines should be 50-75 characters long
More than 75 characters and it?s difficult to keep track of your place within a paragraph. Fewer than 50 characters and the eyes are flickering too much - and after a certain amount of time, the short lines do nothing to improve speed of reading. They actually slow you down because you keep losing your place.
If your paragraphs are unusually wide or unusually long, you should address the line length to make everything easier on the eyes. This rule isn?t necessarily set in stone like the font size and line spacing rules are, but it?s something you should pay attention to.
#4 - Match quality images with quality content
Don?t skimp on the images you use for headers and contextual images. In a second, images can legitimize your words and keep readers on the page. Or, they make you look utterly generic to your audience, resulting in an immediate bounce. Your choice.
Think about how you would react if you landed on a site filled with images like the one below...
http://previews.123rf.com/images/wavebreakmediamicro/wavebreakmediamicro1111/wavebreakmediamicro111107690/11227358-An-illustrated-white-figure-with-a-red-question-mark-on-top-Stock-Photo.jpg
?you would bounce, right?
I like http://photodune.net - the balance of affordability and quality is perfect (each photo is $1 for the smallest size). As with all stock photo libraries, it?s not all good, but there are plenty of gems in the rough.
Some of you will be able to get by with more generic images - say, a nice picture of a laptop with Google Analytics on it for a post like this (if BHW had featured images). Try your luck with this https://bootstrapbay.com/blog/free-stock-photos/ of free HQ stock photo sites - most of them publish new images weekly and have a decent number of photos for you to browse through.
#5 - Add to your voice through colors
If you landed on a health website with an orange and brown color scheme, what would you think?
That?s a pretty glaring example, but the point is clear: your website?s colors have to match the content you?re putting out. If they don?t, your readers will get confused on a subconscious level and be less inclined to trust your brand and the information/opinions you?re publishing. And because of that, they will bounce.
This is a http://www.color-wheel-pro.com/color-meaning.html of all of the colors and their meanings. Note that the first two on the list - red and orange. They?re the two I use for Boston Hype for a reason.
As far as text coloring itself, your text should be dark and your background should be light. This is a http://www.ironicsans.com/owmyeyes/ of how light-on-dark text just doesn?t work.
Every color on your website should be coordinated, too. Once you have a base color defined, go http://paletton.com/ to generate other colors to be used in other elements, such as CTAs.
#6 - Make everything above the fold attractive
Everything above the fold is your first impression. Make a good one! If you don?t, this is where the majority of your bounces will come from.
In general, all you need is a nice header image, the author name, the date, and sharing options. Try to make it as clean as possible. The goal is for your reader to say ?looks good? and move right down to the actual words.
Remove your useless elements, such as:
- Links to the author page
- Links to the comments
- Links to the date (by default, WP will include the above three automatically, you can remove them with some basic PHP work or a plugin like https://wordpress.org/plugins/wp-author-date-and-meta-remover/)
- Search bars (does anyone ever search on your site? No? Get rid of it?)
- Anything that isn?t immediately necessary to the user.
UI is just as important as design. Clean your website up so the reader will land on the page, say ?okay, looks good?, continue reading, and eventually continue onto your conversion funnel (hopefully).
#7 - Optimize with a heatmap
Heatmaps are the bomb. They can show where users are looking on your site and how far down the page they get.
For smaller websites and less important assets, a heatmap won?t be necessary - there just won?t be enough traffic to justify using one.
But let?s say you have a landing page that?s solid in every regard besides its unusually high bounce rate - you might be able to garner some insight into where people are leaving with a heatmap. Then, you can address those sections individually to make them pop and appeal to the user more. And as you knock each problematic section off one by one, your bounce rate will gradually get lower and lower.
http://www.mequoda.com/articles/subscription_websites/5-heat-map-tracking-tools-to-watch-what-your-visitors-do/ - some are free, the good ones are paid.
