what is unbounce
CATEGORY
DID YOU KNOW WE HAVE A PODCAST?

Become a Better Marketer. Anytime, Anywhere.

Listen and learn on the go with Unbounce’s Call to Action marketing podcast. Tune in and get inspired in the car, while you cook, or at the gym.

Do These Landing Page Design Trends Help or Hurt Conversions?

Landing page design trends
Image courtesy of Toothpaste for Dinner

Every landing page designer walks the fine line between form and function. It’s not enough just to make a page that’s pretty — that page has to convert, regardless of what it looks like.

That doesn’t mean that beauty in design can’t be a huge factor in conveying your message. It just means that landing page design elements need to accentuate that message, not take away from it.

Here are a few landing page trends that you should be aware of – and when to be wary of them.

Living in a parallax universe

Parallax scrolling is now as ubiquitous as hot dog stands in New York. It has been around for a few years, peaked in popularity a few months ago, and seems to be maintaining speed for the time being, according to Google Trends.

Parallax scrolling for landing pages

Parallax scrolling refers to background images that move slower than the foreground image while the visitor scrolls down the page.

Parallax scrolling landing pages
Click here for an example of parallax scrolling, courtesy of Horse & Cart Agency.

When used properly, parallax on a landing page can help tell the story you want to convey to your audience. Aspirational images can be used in conjunction with your kick-ass copy to create an immersive experience with the ultimate goal of increasing conversions.

When it’s done well, it doesn’t get in the way of the landing page visitor’s quest for information — instead, it enhances the visitor’s overall experience with that page.

The danger, as with any cool design feature on the web, is that it is often used just for the sake of having that cool effect on a landing page without any real thought as to its purpose.

Unbounce has developed nine new parallax templates that are optimized for conversion. Try them now!

The intention should always be to accentuate your message and lead visitors to your call to action so that you can convert them.

If parallax helps you do that, then by all means, carry on. If it’s distracting your visitors from converting, then it should be scrapped.

Less is Moore’s Law

You may have heard of  Moore’s Law, the “observation that, over the history of computing hardware, the number of transistors in a dense integrated circuit doubles approximately every two years.” In other words, our devices are getting wicked fast.

In response to this, designers are adding more content to landing pages, perhaps believing that they’ll be able to take advantage of faster internet speeds and devices.

Using the HTTP Archive’s comparison feature, we see that in November of 2010 the average web page was 702 KB. By February of 2015 that number increased to 1,999 KB. We also see that the average sizes of images have increased, and CSS files are now an extra 3 KB on average.

Landing page load time
Click for larger image.

The above is an analysis of web pages in general, but we’re seeing this trend on landing pages, as well. And it must stop. Here’s why.

Page speed is kind of a big deal. By which, I mean that it’s a really big deal. Just one second can mean a 7% decrease in conversions on your page. And 40% of visitors to a page will abandon it if it doesn’t load within three seconds.

By adding elements to your landing page, like high-res images that have not been optimized for the web, you risk losing conversions. It’s as simple as that.

Optimizing your pages for fast load times

You don’t have to sacrifice quality in order to accomplish this. If you are concerned about the size of your page and its load time, you can use several tools to assess size and load time.

Tools like Photoshop and GIMP give you the ability to save images for the web that look great and are light in size.

You can also restrict your page size by doing away with external items like fancy fonts and iFrames. The extra time that they take to load could be crucial to your conversion rate.

Pingdom is a good tool that gives you a performance grade, shows your load time plus page size and breaks down the elements on the page, showing you the size of each. Although you should not take the results here as definitive, you can troubleshoot problems with this information by identifying areas of your landing page that are slowing down your load time.

Always remember that your landing page serves only to convert, not to show off your design skills.

Ghosts are scary – especially on landing pages!

It’s hard to point to the reason for the love affair with the ghost button, but we’re definitely seeing them more often on landing pages.

Ghost buttons on landing pages
So clickable! /s

Does the ghost button look good? Maybe, if you’re into that sort of thing. Will it increase conversions?

Hard to say without testing it, but they do violate the conversion-centered design principle of contrast, which says that your CTA button should stand out from the rest of your page.

It’s possible to code these buttons so that they change color on a mouseover event, but other than a happy accident, what’s to draw someone to actually get their mouse pointer over that button?

Sometimes they can look more like content holders than clickable buttons, as in the page below.

Ghost buttons call to action

Other times, they just don’t inspire a click. Check out this page (which isn’t exactly a landing page, but uses a ghost button as a CTA):

Are ghost buttons effective

There appears to be no sense of urgency behind that button. No matter what else they’ve done on the page below, it could all be canceled out by this weak CTA button.

Think of your users and how they’re most likely to convert. If you think they might be the type to appreciate the clean aesthetic of a ghost button, validate your assumptions.

Test your ghost button versus a more traditional solid, contrasting one. It never hurts to have more data to work with.

Responding to the need for responsive design

With this query on MeanPath we find that just 3.08% of the 146,599,190 web pages queried have code that responds to the needs of mobile browsers.

Despite the fact that people search for information on their mobile device 80% of the time, designers are still ignoring the need for mobile optimization.

This leaves an amazing opportunity for those of you who are willing to optimize your landing pages for mobile.

Your customers will thank you when they don’t have to pinch and zoom to find the information they’re looking for (they’ll probably just leave your page, anyway), and you’ll have an advantage over almost 97% of the people who decided it wasn’t in any way important to have a mobile presence in 2015.

If that wasn’t enough, designing your landing pages to be mobile-friendly will become a major ranking signal for Google as of April 21, 2015. Google is rewarding those who have taken the time to build landing pages that respond to the needs of mobile customers.

It really is time for landing page designers to sit up and pay attention.

It’s all by design…

If there’s one message to take away from this post and chant as your landing page design mantra, it’s this: Conversion is the ultimate consideration in any landing page design.

If you can use trends in web design to enhance your audience’s experience, you’ll capture the attention of your audience, and you’ll get the conversion – which is what it’s all about.

Are any of these design elements working for you? Let us know in the comments below. We’d love to hear about what’s converting for you.

— Mark John Hiemstra

Listen to Mark John on the Call to Action podcast:


Landing page design trends

About Mark John Hiemstra
Mark John Hiemstra is a content marketer who formerly worked out of Unbounce’s Montreal office. A writer by day and a reader by night, he is loathe to discuss himself in the third person, but can be persuaded to do so from time to time. Find him on Twitter here: @markjohnh
» More blog posts by
  • Loved this post!! +1 for Moore’s Law puns and scary ghost buttons :)

    • Mark John Hiemstra

      Ha! Thanks, Liesl!

    • Sarah B Danks

      Exactly :)

  • Learned a few things here! Can’t believe those mobile non-believer stats. We suspect mobile has helped our SEO, especially being such a new site.

    • Mark John Hiemstra

      And if you really read into that announcement from Google that I linked to, you can see how serious they are about it. Good for you for being on top of that. Come April you may even see more rewards!

  • the hardest part about conversion optimization is throwing away something you love, but that is just not working. Perhaps we should create a place on websites where all the beautiful sliders and ghost buttons can live on, but just not interfere with the business:).

  • Julesfrog

    “…an advantage over almost 97% of the people who decided it wasn’t in any way important to have a mobile presence in 2015.”

    97%! That seems so high.

    • Mark John Hiemstra

      Amazing to think that this is still something people aren’t resolving. More for those who do, I guess. :)

  • Brilliant post guys!

    I like those ghost buttons as a consumer/user – I think they’re less pushy and intrusive – but do they make me press the button? I’m not sure. Would love to see some tests done on it in the future, but for now I think I’m sticking with the old solid color contract buttons!

    Thanks for the read!

    • Mark John Hiemstra

      Thanks for the kind words, Sarah!

      One of the things that happens with trends like this, sometimes, is that they get used wrong. Some people use the containers as content holders instead of clickable buttons and it confuses people — is it a button, is it not? If they’re to be effective, everyone will have to use them the same way and people will need to expect the same result every time.

      That said, we’re busy gathering data and we’ll share it with you in the next few weeks. Watch for it! :)

      • Sarah B Danks

        Yes, Mark, I agree! Some people use them This Way, then others use them That Way…and the poor consumers are all “what the WHAT?”

        Which leads me to my biggest gripe: designers doing what’s “hip” and “trendy” JUST BECAUSE.

        No.

  • Thorsten

    Great post! It would be interesting to know which content users are searching on mobile… I think this will be way different to desktop searches.. if most is funny YouTube videos why bother with further optimization? And do you think a responsive website is enough, or should there be a dedicated web version for mobile? Where would be the line between an App? uh.. many questions, hm?

    • Mark John Hiemstra

      Excellent questions.

      >…why bother with further optimization?

      If someone *is* finding your landing page via their mobile device, you had better make sure they get the answer they’re looking for immediately, or they’ll go back to watching “epic fail” videos.

      >And do you think a responsive website is enough, or should there be a dedicated web version for mobile?

      Responsive. Here’s why: You need a single domain for your site/pages to get all that Google love. This is crucial. Don’t design two. Use one.

      As to your question about apps, not quite sure what you’re getting at there, but remember this, Google indexes apps the same way they do webpages: https://developers.google.com/app-indexing/

      • Thorsten

        THX for the answers Mark, solved a lot of riddles… so responsive is the way to go… the idea behind the apps question was: if a responsive website is good enough on mobile phones or if it is better to create a dedicated app with would be optimized for the small screen size from the start, but I think you are right.. that would be another “channel” to reach the customer and should be considered another leg of your business… right?

        • Mark John Hiemstra

          Sorry for the delayed reply, Thorsten!

          Yes, exactly. Mobile apps should be seen as both a means of providing value to customers/prospects and they can also be used — and this is the real juice — to gather behavioral information on those who use your app so that you can do some really accurate, highly targeted marketing campaigns once you’ve segmented users based on those behaviors. Hope that helps!

  • Great article, as I read it from my iPhone 5s! hehe

  • Great Info. Tell me something. in the unbounce software, do i need do anything to make a page mobile responsive? or if its a ‘mobile responsive’ template, will it all be automatic?
    thanks…

    • Hey Lester, great question!

      In the Page Editor, you can switch back and forth between your mobile and desktop views, enabling you to make changes to each. In the spirit of customization, we provide the ability to set up your mobile page to be a smaller, responsive version of your desktop page, or build a completely different mobile design altogether. The first time you load up the mobile version, you might have to make a couple quick touch ups to fit the desktop elements inside the smaller mobile canvas. Here’s an academy video showing this: http://documentation.unbounce.com/hc/en-us/articles/203788184-Working-With-the-Page-Builder-#content2

      • I should add – enabling/disabling the mobile version of a page is just a click of a checkbox. You can turn it off and on at any time. :)

  • Yip mobile responsive is the way forward. More and more people are searching on their mobiles so it makes sense to design landing pages with mobile users in mind.

  • Great post! Thanks for sharing!

  • Jocelyn Czerwinski

    +1 for the post, thanks.

    Did however find your CTA on this page is broken: http://try.unbounce.com/with-advanced-design-features/

    :( Takes me to http://try.unbounce.com/with-advanced-design-features/clkn/http/unbounce.com/pricing/ with “We’re sorry, but the link you followed appears to be invalid.”

    • Amanda Durepos

      Thanks for the heads up Jocelyn. It should be resolved now.

  • Good points, Mark. We tried using ghost buttons before as well, but after doing a test, we switched to traditional colors of red and green (the transparency wasn’t really working for us). And yes: just aiming for a ‘cool look’ won’t guarantee leads.

  • Can I just say what a comfort to find a person that genuinely knows
    what they are discussing online. You actually understand how to bring
    a problem to light and make it important. More and more people should read this
    and understand this side of the story. I was surprised that you’re not more popular given that you definitely have the gift.

  • Awesome read! Thanks Mark.

    I’ve never come across MeanPath until this post – what an excellent tool!

  • Great blog thanks for sharing the great information to all.

  • It’s really necessary to go through trends but we can do some research to increase conversion rate.