Creating a Killer Home Page That Reduces Bounce Rate

When you’re first putting a website together, it’s sort of like your baby. You nurture it as it grows larger and stronger. You have hopes and dreams for it that it’ll do something great one day. And just like parents with new babies, website owners assume everyone out there is as interested in their site as they are.

Unfortunately, this is rarely the case. Sure, Aunt Sally might be thrilled to see photo number three hundred of little Jake but Joe Schmo on the street? Not likely. The people close to you might be interested in your website but unless it has real merit and you actually have something to say, no one is going to stick around for longer than a few seconds.

You can’t do business online just appealing to the people who are personally invested in you. Instead, you have to appeal to a broader audience, one that is interested in the subject matter of your site. And your job is to keep people on your site long enough to care about what you do, offer, or have to say.

Before we dive into how to make your site “stickier” let’s first talk about the phenomena at hand here: bouncing.

What is Bounce Rate and Why Should I Care About It?

A site’s bounce rate can be best defined by the percentage of people who visit your site directly via URL, through a link from another site, or through a link in search results but don’t click on anything. They might land on your site, look at it for five seconds, then hit the “Back” button.

No matter how a person leaves, it’s the act of landing on your site then “bouncing” off that defines the issue here. No one wants a high bounce rate. It means people aren’t engaging with your content, they aren’t reading what you have to say, and they certainly aren’t buying anything. It’s just generally bad, bad, bad and reducing bounce rate needs to be on your priority list if you want to see your newsletter signups, conversions, and/or sales increase.

Sometimes a High Bounce Rate is an Expected Thing…

There are occasions where a high bounce rate is perfectly normal and expected. If you have a single page site that uses a parallax scrolling effect, it’s totally acceptable to have a high bounce rate. I mean, your visitors leave your site without clicking on anything because, as the GetResponse Blog says, “…there is no other page.”

The same goes for single landing page sites. If you’re presenting all of your info on one page and your signup form is dynamic or some such, you’re going to have a high bounce rate, too. But you’d obviously see the difference in the number of subscriptions you acquire.

Bounce rate isn’t the only indicator of website success.

Sometimes a High Bounce Rate is a Good Thing…

Yes, it is possible and no, I haven’t lost my marbles. A high bounce rate is sometimes a good thing when you’re offering up information to your visitors. If your site is a success, it would make sense to see a bounce rate of 70% or higher since people are likely landing on your site, gathering the information they need, then leaving.

Question and answer sites often have high bounce rates but they still totally successful. Of site users, Search Engine Watch poses a good question: “…if a user comes into your site and finds exactly what they were looking for; an answer to their question or solution to their problem, why should they stay a moment longer or look around on other pages?”

…Still, a High Bounce Rate is Usually a Bad Thing

Now that we’ve covered the exceptions to the rule, it’s time to get down to the scenario that is  applicable to the majority of websites: a high bounce rate means something has gone awry with your content or how you’ve chosen to present it. It signals a disconnect between you and your visitors.

That’s why today we’re going to focus on some of the ways you can create a front page for your site that resonates so well with your target visitors that they can’t help but click around to learn more.

The Solution? Build a Home Page That Keeps Visitors From Leaving

How can you create a front page that demands visitors take a seat and stay awhile? The answer “it depends,” probably isn’t going to fly, is it? Unfortunately, that is partly true. There is no single solution for any site’s bounce rate problems. Something that works for a site that sells aquarium supplies might not work for the online shoe store. Further complicating matters, a single solution might not even work for two sites in the same niche.

But that’s okay. We’re not in the business of one-size-fits-all solutions. Instead, we’ve put together some of the very best ways to reduce bounce rate and crank up the effectiveness of your home page. Not all of these will apply to you, and they all won’t work on every site, but hopefully you’ll find a few gems in the mix.

Know Your Audience

Knowing your audience is twofold. You need to be specific, of course. Generalities and any old homepage won’t do. But you also need to have a clear understanding of:

  1. Who is visiting your site and
  2. What they want.

While these are two distinct notions, they are intertwined in how you’ll approach addressing them. Let’s take a look at the first: who is visiting your site?

Knowing your target market is about more than market research. Facts and figures can only get you so far. To really get ahead you need to be able to step inside the mind of your ideal site visitor and/or customer. Who is she? How much money does she make? What does she do in her spare time? These are obviously really important questions to have answers to if you sell spa treatments. Your target site visitor in this case might be a woman in her mid twenties to late forties with disposable income who enjoys a little pampering now and then.

Even if you’re not offering a product for sale, a lot of your targeting efforts are going to be structured as though you were. Because even if you’re not selling something tangible, you’re still “selling” an idea or information. With that in mind, the goal of market research is to figure out what is causing your customers/visitors a problem so you can determine how to present the info on your site as a solution.

According to Marketing MO, there are a few questions you can ask of people who fit your market demographics. These questions include:

  • What are some problems you’re currently facing in your business?
  • How do you envision our information/product/service acting as a solution to these problems?
  • Who in your company will be using our solutions?
  • In what other ways could your problems be solved?

These are very general questions, of course, but they can give you a good starting point for information gathering.

A lot of “knowing your audience,” comes down to timing, too. The tricky part is determining if your visitors are actually looking for what your site offers when they come across it. This typically will spell the difference between a visitor that sticks and one that jumps ship. Some of this can be handled with precise SEO efforts, but that’s a topic for another day. For now, it’s important to recognize that gathering as much info about your visitors is your best course of action.

You can get more information about your target audience in a number of ways:

  • Face-to-face/phone/email interviews with people in your target demographics
  • Online surveys or questionnaires

You can also check out social media groups for those you’re trying to target to learn more about them and their preferences. Any relevant information you can put together can help you to shape your content accordingly. And that, dear web developers, is how you reduce bounce rate. Speak to your audience like you really, really know them and you can’t help but succeed.

Think About User Experience

Another thing you need to think about is user experience (UX). A good UX means the difference between someone landing on your site and exploring multiple pages and someone taking one look and finding the layout incomprehensible.

How can you improve your UX? Here are a few things to keep in mind:

Prioritize Responsive Design

If responsive design isn’t your thing, at the very least make sure you have a mobile version of your site. In some cases, this is preferable because a full-size site shrunk down to fit on a smartphone is really hard to read and navigate—even if it is responsive.

Take this site for example:

paul graham
This site is pretty hard to navigate on a smartphone.

I found this gem on a list of the worst websites for 2014 and I have to say, it’s pretty dang bad. It fits on a mobile screen well enough but the navigation is teeny tiny, practically unclickable. Of course, it looks pretty bad on a desktop screen, too, but you get the idea.

On the flip side, good responsive design is easy to spot because it works! If you’re not having to scramble around to find navigation, don’t have to scroll sideways, and don’t have to squint to read text, the site is probably pretty decent. For a little inspiration though, check out These Are Things, a great site I found on a list of the beautiful responsive websites at Six Revisions:

These Are Things
An all around lovely site.

The design and illustration studio has a cute and effective site design to start with, but view it on a mobile device and you’ll be doubly impressed:

These Are Things mobile site
The site has been condensed to the essentials, not squished!

See how it maintains the same design elements, makes navigation larger, and minimizes what’s shown to just the essentials? That’s what a good responsive site should do.

You can find out if your mobile design is a problem by checking out how you’re fairing in Google Analytics. If you notice a disproportionately high bounce rate from people who visit your site on a mobile device, you may have some adjusting to do.

Most WordPress themes are responsive nowadays so finding one that suits your needs shouldn’t be too difficult. Here are a few that have recently caught my eye:

  • Magfolio

    magfolio

    The Magfolio theme is designed with e-commerce and portfolios in mind. You can use it to display artwork for sale and it includes the Revolution Slider, shortcodes, and WooCommerce compatibility. It’s responsive and built on Bootstrap 3.0, HTML5, and CSS3. It also comes with portfolio and blog layout options as well as a custom page template.

    It comes with seven color schemes, widgets, SEO-friendliness, and a robust Theme Options panel.

    Magfolio is available for $58.

  • Infinity

    infinity

    The Infinity theme is simple. Minimalism is totally “in” so it’s no surprise why this theme is so popular. It’s perfect for showing off your best work and includes a nifty project filtering feature that lets your visitors find what they’re looking for with ease. It also features infinity scrolling so readers will be drawn into blog post after blog post, a slideshow shortcode, a theme options panel, custom widgets, page templates, Google Fonts, and more.

    You can also expect a totally responsive layout here, three background patterns, video support, and seriously helpful lifetime staff support.

    You can get Infinity for $59.

  • Gather

    gather

    Another theme that offers total responsiveness and a sleek look on any sized device is Gather. It’s got that whole minimalism thing going on, too, and is designed primarily for e-commerce sites, though it does work as a portfolio and a blog as well.

    This theme is WooCommerce ready and makes setting up a store a snap. Other features include a filterable portfolio, a slideshow, multiple shortcodes, page templates, custom widgets, a theme options panel, cross-browser compatibility, and more.

    Get Gather now for $59.

  • Hemingway

    hemingway

    Nothing wrong with a simple theme. That’s why Hemingway is such a great responsive choice. Its two-column layout is ideal for bloggers and includes a full-width header, parallax scrolling, and it’s retina-ready. Other features include a custom accent color, custom widgets, multiple page templates, and more.

    Hemingway will look good and make sense on any device and you really can’t beat the price tag: free.

  • Gander

    gander

    Built on Bootstrap 3, you know Gander has all the right stuff when it comes to responsiveness. This theme is designed for building job boards and it makes it quick and easy to do, to boot. You can post new gigs and receive applications. And its responsive design is certain to improve bounce rate so you can get more subscribers.

    It comes with two plugins: WP Job Manager and WordPress SEO by Yoast, both of which are necessary in order for the job board to function correctly.

    Gander is available for free.

Offer Clear Navigation

Creativity obviously has a role in web design but navigation is not the place to flex your creative muscles. It’s a much better idea to keep things entirely predictable. If a visitor has to search around for more than a couple of seconds for the page he’s looking for, he’s going to go back to the search results and try to find that info somewhere else. And since a “bounce” is literally someone leaving your site without clicking on anything, it makes sense to put your links where people can find them

Never (ever!) make your visitors have to hunt for information. Look at this other site from the worst website list:

speed-crunch
Those symbols means what again?

SpeedCrunch.org does offer prominent navigation options but they are indecipherable. A few of them are easy to figure out but others are complete question marks. And even if you can figure them out, why make your visitors work to understand your navigation? It makes no sense to do this.

Instead, you should offer clear and to-the-point navigation and at least you know visitors will get to where they want to go. That means the logo at the top of the site should be clickable and link to the homepage. It means navigation should be along the top of the site or down the left-hand side. It also means that navigation is broken down into logical categories with the primary navigation on the homepage and subcategories broken down in dropdown menus or something similar.

Now here’s a good example of a site doing navigation right:

ted-navigation

TED.com is a popular site that includes simple navigation categories at the top that drop down into an organized offering of sub-menu options. I like that there’s a lot of whitespace here. The problem of accidentally “losing” the dropdown menu if you move your cursor one pixel too far to the right is no longer an issue.

While it’s customary to feature navigation across the top of your site or on one side, there’s no reason why you can’t be a little creative, so long as you don’t make your visitors’ lives more difficult. Take the site Betsy Smith Worldwide, for instance:

betsy-smith-worldwide

This copywriter and consultant has opted to make her entire homepage navigation. And you know what? It works.

If you’re using WordPress, many themes offer clean navigation, so you really shouldn’t have much trouble finding one that works. The official WordPress theme releases each year are all good examples of great navigation. I mean, Twenty-Fourteen, anyone? However, if you need a little guidance here are a few themes you might want to check out:

  • Smartify

    smartify

    Here’s a single page theme that you’re going to want to checkout. Smartify is built on HTML5 and is effectively a portfolio theme. It works great for web designers wanting to show off their best work. It offers OptionTree for customization and includes a contact form, Fancybox, and design files for easier customizing.

    The navigation is placed just below the bold header—right where you’d expect it to be. It’s simple, easy-to-use, and leaves nothing up to guesswork.

    Smartify costs $28.

  • Viewpoint

    viewpoint

    Eye-catching is the best word I can use to describe Viewpoint. This theme is a single page portfolio with stunning parallax scrolling, bold typography, and prominent social media links. So, it’s easy to see how this theme can help you net new clients.

    The responsive design makes it a pleasure to use on any device and it includes easy-to-use navigation right above the header, so there’s absolutely no mistaking how to get around the site.

    Viewpoint is currently priced at $43.

  • Foodie Theme

    foodie

    If food is your thing, then the Foodie theme is a great choice. This theme is designed for blogging—about cooking, about recipes, about your favorite kitchen utensils, or what have you. So long as it relates to food, it’ll work. This theme has easy to locate navigation as well, only it’s positioned on the righthand side of the screen. This works particularly well for the blog format.

    Foodie also comes with a recipe builder, large image posts, video embedding support, custom backgrounds, and custom widgets.

    This theme will set you back $79.

  • Showcase Theme

    showcase

    Showcase is the creative person’s dream come true. It’s ideal for showing off your latest artwork, photography, or videos within a clean layout that lets your work speak for itself. It features lefthand navigation, which makes it easy for visitors to get to where they want to go without having to stray far from your work (or vice versa). And when viewed on a smartphone, navigation is condensed into a dropdown menu right below the header.

    It runs on the Seed framework and includes shortcodes, Gravity Forms, page templates, a grid layout, and more.

    Showcase costs $69.

  • Origin

    origin

    Origin is a grid-based portfolio theme that offers an uninterrupted view of your work. While visitors are sucked into the great imagery right away, the left-hand navigation makes it easy for them to find their way around, too. It’s the perfect balance between minimalism and functionality.

    This theme is responsive and offers plenty of opportunities for customization. It’s also great for avid bloggers.

    Origin is available for $69 as a part of an Elegant Themes membership.

  • Memoir

    memoir

    I like the look of this theme. The main navigation in Memoir is off to the left with nice side expanding submenus. And being that this is a blog theme, there is more navigation options in a righthand sidebar for added convenience.

    This theme is super simple and ideal for someone looking to improve their blogging presence without having to configure a ton of settings or features.

    Memoir is also available for $69 from Elegant Themes.

  • Photogra

    photogra

    It’s all in the name, really. Photogra is a photographer’s dream theme, offering the perfect way to highlight your work in a stunning portfolio. It features a responsive design, plenty of customization options, and jQuery effects for added interest. This theme has lefthand navigation that’s easy to spot and a fullscreen slider that presents even more options (that you can swap out on a whim).

    This easy-to-use theme will cost you $48.

Optimize Your Site’s Speed

Site speed is a crucial component of a good UX. If your site loads slowly, people won’t sit around and wait anymore. Gone are the days when people suffered through slow load times. Instead, the solution is simple: they go to a different site.

According to KISSmetrics, sites that take longer than 4 seconds to load are 25% more likely to have a higher bounce rate. And for sites that take longer than 10 seconds, that percentage increases to 30-40%. That’s significant. And sure, fixing site load time can take some effort but it’s a relatively simple thing to do to see your bounce rate decrease. It’s one of the few things you can do that is standardized. It doesn’t require market research or design prowess.

In WordPress, you can improve your site’s speed in a number of ways, including using a caching plugin, reducing your image sizes, and minifying your code.

Put 70% of Your Effort Into “Above the Fold” Design

Okay, so 70% isn’t an exact figure here but I definitely wanted to emphasize the importance of what you put above-the-fold, or the space that appears in the viewport of your web browser without scrolling. You need to put the majority of your most important information above-the-fold since that’s what a visitor sees first. That’s why site navigation is also in this space—you don’t want to make people have to work to find out what they want to know.

What are some things that should go above-the-fold? Navigation, of course. Your site’s name and a subheading or tagline. Prominent contact information. Social media links are a good idea, too. As far as content goes you’ll want an eye-catching graphic that reels in visitors and makes them want to stay. I’m talking about more than just a logo. Sliders are great for this because they give you a chance to present more than one large image and that feature links to multiple pages of your content. You can change up what appears here as well

Now when I say 70% of your effort, I don’t mean you need to cram in every single little detail about why your site is important in this space. Rather, I mean you need to distill the key components into this small area, which can take a lot of work—hence the majority of your effort. Got it?

The “everything must go above-the-fold” idea used to include calls-to-action, too, but that’s seeming to be less and less a hard and fast rule. According to KISSmetrics, a good call-to-action can be well below-the-fold so long as the content that proceeds it interests the visitor enough to keep reading and keep scrolling. They cite David Ogilvy’s research on how people read advertisements to prove their point: Just 20% of people read past the headline but readership only drops marginally between 50 and 500 words.

If you hook a site visitor to keep reading past the headline, it’s likely they’ll keep scrolling past the fold.

Or as KISSmetrics more succinctly put it: when it comes to the effectiveness of a call-to-action, the fold has nothing to do with it.

All of this is not to say that a CTA can’t go above-the-fold, however. It most certainly can. Unbounce offers a clear example of a call-to-action working quite nicely in this space:

xout

Beyond the two very clear call-to-action buttons, the design here works well in a number of other ways: it has a bold, attention-getting headline, clean graphics, clear navigation, and it gives visitors clear “next step” links.

Encourage a Click and Eliminate a Bounce

The key to reducing bounce rate is to encourage your site visitors to take action. That action is typically clicking on a link of some sort. So long as it’s an internal link, you will successfully reduce your bounce rate. But how can you encourage a click? Well, the process is very similar to crafting a good call-to-action, only instead of encouraging a signup or a sale, you’re encouraging someone to click on a link.

It’s actually much easier than a traditional call-to-action but the same principles apply. To create a good CTA (or in this case, we might think of it as a call-to-click!) you need to:

  • Create a sense of urgency. Why put off tomorrow what can be done today? At least, that’s the feeling you should instill in your site visitors. A lot of this will have to do with how the copy is written, but you must make readers feel like they need to take action right this second or else they’ll miss out. Anything short of that and you’re likely to incur a bounce.
  • Make the CTA clear. This is not the place to leave things up to the imagination. If you want a visitor to click, make that apparent. If you want them to complete another action, make that clear, too. Now is not the time to start a guessing game.
  • Remember that any page can be a landing page. While the focus of this post has been on how to make a homepage that promotes visitor “stickiness,” it’s worth mentioning that a lot of people won’t even see your homepage. In fact, they’ll be approaching your site through links in search results, which more often than not point to internal pages on your site. Basically, make sure you invest effort in reducing the bounce rate on every page of your site, not just the front page.

Make Sure Your Content Meets Expectations

Nothing repels a visit faster than landing on a site from a search query only to find the resulting page has nothing to do with what they were looking for. It’s frustrating and misleading, so don’t let it happen!

The best solution is to make sure your content makes sense for the subject matter of your site and that it is optimized for search engines to the best of your ability. The GetResponse Blog actually has a good suggestion: use Google Webmaster Tools, specifically the Search Queries report, to assess site visitors’ expectations versus the reality your content provides:

“Despite the shortcomings of Google Webmaster Tools, the Search Queries report is one of the best ways to know what people expect to find on a page. Check your Search Queries report for pages with bounce problems – there may be a gap between what people are expecting and what the page is actually about.”

Another aspect of meeting expectations is presenting your content in an easy-to-read manner. No huge blocks of text. No rambling on and on for thousands of words without subheadings, graphics, and lists. It doesn’t matter how good your content is—if it looks boring it is boring. The web is a visual place. Don’t ever forget that.

Use a Popup

Okay, so I’m not the biggest fan of popups. In fact, they can be quite annoying at times, especially if they are poorly timed. That being said, no one can deny their effectiveness. Annoying as they are, popups work and when used correctly, they can encourage a visitor to stay on your site.

Popups can be used to detect exit behavior on any page. They’re particularly helpful in acting as a last ditch effort to get people to signup for your newsletter just as a visitor is about to exit your site. But they can also be used right on the homepage and work to reduce bounce rate. When a user is about to hit that back button, a popup can be displayed that features an incredible offer. With some good old fashioned split testing and a little trial and error, you can feasibly see your bounce rate go down.

Here are a few plugins that make implementing popups easy:

  • PopUp Pro

    popup-pro

    We sort of have to plug our own stuff, you know? PopUp Pro by your very own WPMU DEV is a convenient way to integrate popups into your site without being too showy or obnoxious about it. You can create stylish popups within mere seconds with this plugin. Build advertisements and CTAs that attract attention and demand action.

    You can configure the plugin to display popups at precisely the right moment so you can keep a visitor on your site for just a little bit longer. These popup triggers including everything from the length of time spent on the site, where the visitor has scrolled to, if the mouse has navigated away from the browser, and so forth. It also gives you the option to display offers, promotions, discounts, and more.

    Other features include CTA buttons, responsive or fixed layouts, the option to hide on mobile, and the ability to control who sees the popups.

    You can download PopUp Pro for $19/month on its own or for $24.50/month as a part of a WPMU DEV membership.

  • OptinMonster

    optin-monster

    Another plugin you might wish to consider is OptinMonster. This plugin makes it a primary goal to convert regular site visitors into subscribers or customers. With it, you can easily create opt-in forms within seconds. You can use it to target specific user behavior, pages, and more. And you can even use it to implement A/B tests to see what opt-in form works the best.

    Get a user to click on your popup opt-in form and actually sign up, and you’ll have kicked the bounce to the curb.

    OptinMonster comes in several versions that range in price from $49 to $499.

  • Pippity Popups

    pippity

    When you want to customize every aspect of your popups, you might want to consider Pippity Popups. This plugin is optimized to display popups when they make the most sense for your visitors—when they’ve had some time to digest your site’s content and are about to leave or have scrolled down to a certain spot in the content.

    It comes with 18 different themes and allows you to customize everything from the fonts to the colors to overlays. You can set up A/B tests, choose between popups and opt-in bars, and view the popup you’re creating in real time as you create it. You can also add product images, bulleted lists, select when and how the popups appear, and use auto open/close. Additionally, you can set up multiple popup profiles, and track your progress through detailed analytics.

    Pippity Popups comes in three versions, ranging in price from $49 to $164 for a year subscription.

  • Dreamgrow Scroll Triggered Box

    dreamgrow-scroll-triggered

    If you want to play around with popups but aren’t willing to commit just yet, Dreamgrow Scroll Trigger Box might be a good choice. It’s a simple plugin that displays a popup box when a visitor has scrolled down to a certain part of the page. You can display whatever you want in this box like a newsletter signup form, a call-to-action button, a Facebook Like button, or anything else you deem important.

    The plugin is designed to boost conversions and keep visitors on your site for longer. And motivating a visitor to take action is one of the best ways to reduce your bounce rate. You can even use it to ask visitors to share your blog post with their social followers.

    You can also set how long a popup stays hidden after a visitor opts to close it, select from multiple design templates, select where the popup appears on the page, and more.

    Dreamgrow Scroll Triggered Box is free.

  • Optin Revolution Pro

    optin-revolution-pro

    Lastly, there’s Optin Revolution Pro, a feature-filled plugin that makes it simple to retain visitors on your site through stylish popups designed to convert. These popups are built to help you boost your subscriber rate, increase your social followers, and more. You can also run split tests to see which version of your popups perform better.

    Some other features include the ability to add videos to your popups, set up unblockable entry and exit intent popups, and targeted popup placement, so you have total control over how they appear and how your visitors engage with them. This plugin also includes support for the top email marketing platforms like MailChimp, GetResponse, Constant Contact, Aweber, and more. Set up subscriber segmentation, create custom thank you messages/pages, and more. Analytics are included as well.

    Optin Revolution Pro comes in three plans: Plus, Professional, and Developer, which are priced at a one-time fee of $77, $97, and $297, respectively.

Wrapping Up

Building a website or blog for your business can be quite an undertaking.

It’s a good idea to spend some time on reducing bounce rate so as to ensure the greatest number of people possible appreciate what you have to offer.

Have you had success with any of the above bounce reduction tactics? Have any other tricks up your sleeve? I’d love to hear about them in the comments.