How To Solve False Bottom Issues

Is your bounce rate high on mobile devices and you don’t know why? If so you may want to check your bottom.

False bottoms happen when elements of your website are cut off by the device. You know you can scroll down for more content but from the visitors’ point-of-view it looks like the entire page is displayed. Below is a mockup of how a false bottom would appear on a phone.
 

False Bottom Website Issue

False Bottom Issue

False Bottom Website Fix

False Bottom Fix

Notice how the false bottom issue appears to be complete and how the fix appears to have more content below the fold.

How You Can Solve This Issue

  1. Add a call-to-action button
    In the false bottom fix we’ve added a learn more button below the text. On tap the screen will automatically scroll down to the section below the hero.
  2.  

  3. Reduce text/image sizes
    Reducing the size of the hero text and background image made the section below display higher which indicates to the visitor that there is more content on this page.
  4.  

  5. Add a directional cue
    An arrow pointing down is another great way to tell your visitors there is more information below.

Does Your Website Have a False Bottom?

Want to find out if your website has a false bottom? Send us a message and we’ll check your page.

Let's Stay Connected

We'll send you an occassional email when we post new resources. We'll never sell your email address and you can unsubscribe at any time.
Try it out — it's free.