You are on page 1of 38

Ultimate Guide to

Landing
Page Trends
in 2020
YOUR CHAPTER GUIDE
Chapter 1 Chapter 8

Page Speed Clear Pricing


Contents Chapter 2 Chapter 9

Adaptable Design Minimal Design

Chapter 3 Chapter 10

Call to Action Oversize Typography

Chapter 4 Chapter 11

Hero Your Product Illustrations

Chapter 5 Chapter 12

Now/Show Demand Clear Menus

Chapter 6 Chapter 13

Build Trust Compliance

Chapter 7 Chapter 14

Show Comparisons Trends to Ignore in 2020


1

ULTIMATE GUIDE TO LANDING PAGE TRENDS IN 2020 All businesses need leads and a way to promote new offers. This usually starts
with a landing page no matter if you have a lovely design shopping cart or
Introduction beautiful home page for your yoga studio.

A landing page reduces clutter and allows you to focus your visitor on the one
desired action you want them to take.

But before you jump off and start building a new page, we've pulled out the
For all small business owners, coaches and e- OptimizePress Crystal Ball (TM), and analysed what we think will be the biggest
commerce stores it’s time to start preparing for landing page trends of 2020.
the 2020 landing page trends that will evidently
boost your list building power and create a Trends come and go, so you obviously don't need to use all of these in your
strong marketing machine for the years ahead. business.  Just be aware of these as you design and develop your pages to
ensure you stay relevant in 2020 and beyond.

Remember this, many of these trends can be applied to most niches and almost
any type of business whether you are collecting leads on a capture page or
selling a product on a sales page.

Your landing pages and sales pages should have one objective. Bear that in mind
and try out a few of these strategies to see how they work for your business. 
Read on to learn more.
CHAPTER 1

Page Speed

The loading speed of a website has been at the forefront of Google’s algorithm
updates for years.

It’s a primary factor for SEO, and is why Google produce content and provide
tools to help you make your page fast!

However, things can get a little sticky here.

While you might think you have a fast page, until you run it through a page
speed tool you’ll never know what Google sees.

Your browser might cache a version of your own page so it’s loading fast for you
at home but for a visitor on a mobile device, they might experience the feeling
of watching paint dry as it loads.
CHAPTER 1

Page Speed

Also don’t be fooled by using WordPress page builders that bloat your landing
page with extra code. One way to check is actually viewing the page source
and seeing what scripts are running on your pages.

Our own landing page builder includes our special "blank template" format (we
build all our templates on top of this). This special template strips out any
codes and third party scripts to make your page super fast

Don't worry - you can still enable any scripts you DO want to use in the
OptimizePress settings

This ensures minimum bloat from WordPress plugins that usually slow your site
down.

Here's a speed test featuring one of our included landing page templates:
CHAPTER 1

Page Speed

To speed up your own page first run it through a tool like GTMetrix , Another primary culprit of page speed is a poor host. Good quality
Web Page Test. You can also try Page Speed Insights - bear in mind hosting usually costs around $30-$50/month. This is when your
that this Google based tool doesn't actually test server speed it only website resides on a server with only a small number of other sites.
analyses your page code to give you a speed rating.
Want to see what websites are hosted on the same server as you?
Once you have the result, these tools actually tell you what’s slowing Easy, do a reverse DNS lookup at: https://viewdns.info/reverseip
down page and what to do to improve the result.
We recommend Kinsta (WordPress dedicated hosting) or Siteground
In most cases, there are usually images dragging a page score down. (if budget allows - go for their Cloud hosting options). We use both of
these providers for OptimizePress websites.
Remember to resize images to correct viewing size on your site. Don’t
use an image that’s 2000px wide but have it display 500px wide on
your page. Resize it first!
We optimize for speed in WordPress
We also recommend using an image compressor software or a plugin Get started with the brand new speed optimized
OptimizePress platform today from only $99/year
that compresses images after upload such as Imagify. This reduces
the size of your images further, without affecting how they look to
Get Started Now
your visitor.
CHAPTER 2

Adaptive Design

For a number of years now, Google has placed increasing


importance on your websites being compatible with mobile
devices, especially with the trend of mobile web traffic continuing
to increase over traditional desktop traffic.
Having a mobile responsive site is almost a standard requirement now (a site
which scales down to different device screen sizes), but we're now seeing an
increase in adaptive web design across landing pages.

Adaptive web design means that your site doesn't just scale to a smaller screen,
but elements of the page are customized for specific devices or screen sizes.

This means a more optimized experience (and usually better conversions) on


those mobile and tablet devices due to this customized experience for those
visitors.
CHAPTER 2

Adaptive Design
You might be thinking "this sounds way too complicated for me to use" but rest
How to use adaptive web assured, with the right landing page builder, it's easy to start using adaptive
design on your landing web design.

pages The OptimizePress page builder allows you to easily customize elements of your
page specifically on tablet and mobile views (more on that later).

A few things to consider starting with on your pages:

Background images and colours - Consider how your background images look on
tablet and mobile views. If you have a full width stretched image covering the
background, this may lose it's effectiveness on mobile devices. Consider
removing this and choosing a solid colour instead to enhance readability.

Button sizes and text - Most of your page call to actions will involve buttons or
links - so consider how these look on mobile. Consider making your buttons
larger or increase the height of them for mobile devices so they are easier to
click.
CHAPTER 2

Adaptive Design

How to use adaptive web


design on your landing
pages

Input Fields - If you are using a form on your page (such as an opt-in
form) you need this to be super clear and easy for your visitor to fill in.
Consider making your text input fields larger (increase the height) to
make completing these on a mobile device seamless.

Images & Element Placement - As your page scales from desktop to


mobile, your columns will naturally stack to make your content easier
to read (this happens with most mobile design frameworks).

You should consider the order in which these items stack. Often your
content will be stacked with blocks in the wrong order - making your
content harder to read.
CHAPTER 3

Specific Call to Action

A trend that will grow in 2020 will be using clear and specific Call To Action
(CTA) for each individual page on your website.

Someone who lands on a fitness article about Abs workouts will convert better
with a CTA focused around the fitness goals of the visitor.

Your CTA offer must be unique to the content they are viewing and not generic.
This will seem more work but to get targeted leads you’ll need related lead
magnets in multiple places throughout your site. 

And a secondary CTA should be styled different from the first. This way you can
grab people’s attention using different text and colours after they miss your first
primary CTA.
CHAPTER 3

Specific Call to Action

See this example from alomoves - their primary button up top


offers a free trial “Start My Free Trial”.

Source: Alomoves

Then at the bottom of all their pages they reverse the colour and
use a large black CTA.

Reverse colour example from Alomoves


CHAPTER 3

Specific Call to Action


The CTA should provide helpful information that lets you later communicate with the prospect and make further offers. Think of it as a tool to help someone
research you and your products.

Heard of the Ghost CTA? We’ve been using this style of CTA for a while.

You would have this on your landing pages design


where one of the button is transparent and the other
primary button is a solid colour. The idea here is that
the people who are ready to take action follow the main
button and those who want to learn more click the
secondary “ghost” button.

An example of the ghost cta on our OptimizePress homepage


CHAPTER 4

Hero Your Product

This ties in with page load speed. As soon as your page loads it
needs to hook the visitors attention. Make it very clear what your
product does and how it will solve the key issues for your visitor as
soon as they arrive on your page.

Do not make them have to search around the page. You literally
have just a few seconds to convince the visitors they are in the
right place, right now. Show don’t tell.

In the hero section before they scroll any further you have to hero
your product. Clearly show the solution it provides and the benefit
that brings.
CHAPTER 5

Now/Show Demand

This is very relevant today and will still be an ongoing trend in 2020, it’s the
use of timers and expiring offers but expect them to get more personalised
throughout the marketing process. One feature we added to OptimizePress was
an industry first feature that allows you to link timers across multiple marketing
pages. 

This means you can push more urgency to each individual user making it a
personal experience on the journey of becoming a customer.

During the next year the goal will be getting people to take action much, much
sooner by using expiring offers, linked timers, more linked fomo tools and
finally heavier discounts to get a user to take action immediately when they see
an offer.
We optimize for speed in WordPress
We also want to show people the demand that there is for a product using Get started with the brand new speed optimized
OptimizePress platform today from only $99/year
proof of purchasing and other live data showing stats of people buying your
products, volumes going down and other interactive sales performances. Get Started Now

The journey a user takes to becoming a customer will be a personal one that
only they will see based on different triggers and times they see on your offers.
CHAPTER 6

Build Trust & Confidence

As you know showing trust is usually important on your pages sometimes you
have seconds to show people you trustworthy business. However just showing
testimonials is not going to be enough in 2020 we need to look further and
deeper into showcasing people’s results, case studies from people who have
used your product.

Start using other review sites like Capterra and Trustpilot embedding comments
from Instagram and Facebook of people using your products and also showing
the recency of people purchasing.

Close.io show review stars from customers


CHAPTER 6

Build Trust & Confidence


Try and showcase the transformation people have after buying a product, “Our company was struggling with X but now we don't have to think about it
this will build far more trust just having a written testimonial. because of X”

If can show people the situation that you were once in and to where they can Your visitors will relate to seeing other people who are or have been, in the
get. same situations as them.

Example:  Making featured seen in sections on your pages is a priority along with
ratings and reviews from sites will create more data points to help build trust
“I was like you but now I am this” and confidence for the person is researching your service or products.

Zoom trusted logo examples


CHAPTER 7

Show Comparisons

We feel here a big trend in 2020 will be showing customers comparisons


of your business against other businesses. This is your chance to
highlight key features and benefits of your products that your
competitors don't have.

If you're concerned about highlighting your potential competition then


you can create a comparison table that is laid out with all the solutions
that you offer versus all the things that your competitor doesn't.

For example, let's say you charge $97 per year for your software but
your competitor is charging 99 a month. You could create a comparison
chart showing the pricing structure of your products and alongside it,
you could show competitor pricing without giving away who your
competitor is.

If you really want to win customers then showing the complete difference
between your service and other platforms is a given. Look how Notion
does it.
Notion side by side pricing comparison
CHAPTER 7

Show Comparisons
When people see your comparisons they naturally look for features and
pricing that will benefit them. This is your chance to showcase your
And if you only have one big competitor than heck, you need to make it product as a winning product compared to a competitor. 
clear.
If you wanted to target companies with the smalls sales team you could list
that as something your product is more suited for. See how Close.io do it.

Notion's switch from Evernote example Close.io Vs Other CRMs


CHAPTER 7

Show Comparisons
It's not all about the price you could show your support hours compare to
a competitor you could show if you have live chat support and they might
By showing the comparison table it allows you to educate your only have email support.
customer about all the features they may not be aware of and also
features that they thought were available in competitor that aren't. Also a comparison is your chance to show your weak points. There are
going to be times when your business is not suited to a particular company
and you can highlight that in a comparison chart to indicate the clients you
don't want.

This comparison chart below is again from close.com and you’ll notice
they highlight where they're a little weak. They're clearly showing the
companies that they are not suited for.

Close.io Vs Other CRMs

How Close.io compare themselves to other CRMs


CHAPTER 8

Clear, Transparent Pricing

In 2020 expect to see a lot more subscription payments. YouTube are now pushing it with their
music and premium subscription.

YouTube premium pricing example


CHAPTER 8

Clear, Transparent Pricing

Apple TV and Apple News+ are now asking for Whatever you do on your sales pages or website don't make it hard for the visitor to find
subscriptions. It's not this recurring payment is a new your pricing. On our homepage we use anchor links to people who can jump straight to
thing is just a more people are switching the pricing pricing when they click a “get started” button.
model of recurring revenue.

Apple TV+ premium pricing example


How we make it easy to buy OptimizePress
CHAPTER 8

Clear, Transparent Pricing

To encourage that process you can highlight your most popular packages,
you can offer free trials, highlight if you don't require a credit card for a
Don't be afraid to show the pricing. Your sales page should do the
free trial and show moneyback guarantees badges.
work of presenting the value of your product. 
If you do this well the buying decision for the user should be fairly
easy.

Our own pricing table with highlighted package


Our own example of showing a guarantee
CHAPTER 9

Minimal Design

This is a trend we began seeing towards the end of 2019 and most certainly
into 2020, it’s these minimal black and white designs with very few colours.
We'll see more pages with lots of whitespace around the key areas and those
sites that want to use colour it'll be one or two very bold and bright colours
stand out.

Just take a look over the Intercom home page you can see there already
position themselves with the minimal black-and-white style, and bright colours
that pop out in areas they want you to focus on or read.
CHAPTER 9

Minimal Design

Another example from Curve banking start-up in the


UK they use a very minimal black and white design
with pops of red colour throughout.

Try and apply the same principle to your landing pages where you
keeping the page clutter free but use that drop of colour to make
buttons standout or a bullet list to be highlighted. 

Expect to see this minimal theme applied to your landing pages


where you may have one strong and powerful image with very
minimal text and call to action.

Your landing pages don't have to be only text, remember an image


can make a impact on the page and keep it minimal at the same time.

Minimal design from Curve banking startup


CHAPTER 10

Oversized & High Impact Typography

Expect to see large fonts not just in the headline but


also in the body typography. The use of large fonts
doesn't just make it easy to read it allows you to
make a clear message that's more prominent on the
page.

Innovators in the SaaS World, Basecamp, have


recently reworked their homepage landing page to
include bold, oversized type throughout the page. 
Even their navigation bar font is using an extra-bold
typeface for additional impact.

Using oversized and bold typography grabs visitor


attention fast and demonstrates the sales or
marketing message of the page clearly.

Bold oversized font example from Basecamp


CHAPTER 11

Illustrations

Illustrations have made a strong comeback in 2019 and this will follow
through in 2020 with more illustrations style graphics on landing pages
and sales pages.

We've seen an increase in the use of character graphics (sometimes


called vectors)  that are used to capture visitor attention in new and
unique ways

Using illustrations is a great way to convey your marketing message or


idea in a simple, easy to interpret way.
Notion uses illustration to show the overwhelm of using many tools
CHAPTER 11

Illustrations Although custom illustrations are a great way to add unique flare to your
pages, there are now more resources than ever before for you to source
high quality illustrations at little or even no-cost.
Custom illustrations help keep your page clean, give your content space
and enhance the readability of your content.  If you're considering the custom illustration route, design showcase
website Dribbble is the best place to start.  Here you'll find many
They don't always represent any kind of feature or benefit but they look amazing artists and graphic designers showcasing their designs - just
stylish, modern and help add colour to page.  look for the "hire me" button on their profile if you find someone you'd
like to work with.
While there is no real benefit of an illustration to highlight the product
feature at the same time they can help keep the focus on the page content
and lead the visitor through to your conversion goal.

This illustration from Intercom doesn't show a specific feature but adds character to the page Dorsia uses illustration to differentiate itself from the imagery of most travel sites
CHAPTER 11

Illustrations

Illustration Resources for your landing pages


There are also many designers and illustrators
available on the usual freelance marketplaces such Ouch! Icon Sets - Beautiful illustration sets free to use with attribution
as Upwork.  Be specific with your requirements and
Humaaans - Illustrations free for personal and commercial use
provide examples when posting projects to ensure
you get a design style that matches what you're
ManyPixels - Illustrations library with colour changing customization
looking for.
Vector Creator from Icons8 - create engaging custom illustrations
We've compiled a range of resources for free and
low-cost illustrations to help you get started with Glaze Free Illustrations - Illustrations free to use with attribution (paid options too)
using illustrations on your landing pages...
Mixkit Art - Free to use stock illustrations from Envato

Stubborn Generator - Generate characters for your landing pages

CreativeMarket - Paid graphic resources site with wide selection of illustrations


Get started with the brand new speed optimized
OptimizePress platform today from only $99/year

Get Started Now


CHAPTER 12

Clear Menus

We are not a fan of menus being used on


landing pages. Remember a landing page has
one goal, usually to collect the name and email.

By adding a menu this allows people to click


away and go to other pages within your site.

However, we do know that people still need to


add other links on those types of pages.

If you must use menus on your landing pages


keep them very simple, even reduce your menu
down or make a custom menu that includes
maybe two links so people could navigate back
to your homepage or even through to a content
page (e.g. your blog).
CHAPTER 12

Clear Menus

Use the hamburger menu on both desktop


and mobile. This menu simply adds the
three– marks as navigation on the landing
page to keep it minimal but the links are
still there if people were to look for them.

Look at this example of GoDaddy showing


the hamburger style menu on desktop size
layout.

A desktop hamburger menu on the GoDaddy site


CHAPTER 12

Clear Menus

We created a menu element in our page builder to allow custom menus and hamburger style layout in case you ever wanted to
add a menu to a landing page.

Our menu element create hamburger style completely mobile responsive


CHAPTER 13

Regulations Compliance

Cookie laws and privacy policies are not going anywhere. 

As much as they hinder our experience when browsing the web - cookie bars,
popups and boxes are pretty much a requirement no matter where you're
operating your website from in 2020.

Whilst remaining compliant is important, (consult your local laws for


requirements that apply to you), there are some creative and innovative options
out there for satisfying cookie requirements on your own websites.

We're likely to see even more innovation in this space throughout 2020.

There are many services that have different styled boxes that allow you to give
the same cookie message notice with about obscuring content.

With a quick look at our most regularly visited websites, we found four different
styles of cookie notice, so there are many different approaches to this...
CHAPTER 13

Regulations Compliance

On our own site, we’re using a


service from Metomic (free tier
available) which creates a unique
box design that we positioned to the
bottom left corner. We wanted
something that gave the user the
options they need, without being
intrusive. 

Different cookie bar examples


CHAPTER 13

Regulations Compliance

Cookie Control Solutions

Metomic - Simple cookie corner popup script with free plan

Civic Cookie Control - Nicely styled corner of screen cookie control script

With OptimizePress you can build any page you need to market your business online Get Started Now Now
CHAPTER 14

Landing Page Trends to Ignore in 2020

This guide wouldn't be complete


without our thoughts on the trends Non standard
you might want to consider ignoring
in 2020...
navigation
Our focus here at OptimizePress is We're all creatures of habit, and we
on conversion - that is - getting better like familiarity.  This is also a factor
results for your business through when considering our web browsing
bettter landing pages, sales pages habits.
and marketing websites.
Traditionally, we are used to the
With this focus in mind, there are navigation on a website to be at the
some trends that might look "cool" top of a page.  Moving this to other
but really won't help your site locations on the page (although it
convert more visitors into leads and might look cool) will often cause
leads into customers. confusion - which leads to higher
bounce rates on your landing pages.
Left hand side navigation example
CHAPTER 14

Landing Page Trends to Ignore in 2020

Autoplay Video
We've known for a while now that UX (User Experience) on your landing pages and websites can
affect how your pages rank in the search engines (particularly in big daddy Google).  The idea of this
is fairly simple - Google wants a better user experience for anyone landing on pages from their
In this example from Merino Wool
search results.
Sweater company SheepINC, the
navigation has been moved to a vertical
So we should always be considering how the elements and content we add to our landing pages
sidebar, and they've also hijacked the
affect UX.
usual mouse controls so using the scroll
wheel navigates horizontally.
Autoplay videos have long been the scurge of regular web browsers, and in recent years Google and
other web browser developers have started to disable autoplay code from working on web video
It's understandable to want to make your
players.
website unique and different (the website
looks great) but always consider the user
So when developing your landing pages, I'd like to consider a couple of alternatives to autoplay video
experience and focus on how easy it is
(particularly because if you do use autoplay on the page it's likely to be stopped anyway)...
for your visitor to flow through to your
intended conversion goal.
Video in a manually triggered popup - In the example below from one of our OptimizePress landing
pages, we use our Popup Overlay feature to create a video popup, and allow this to be triggered by a
button on the page.
CHAPTER 14

Landing Page Trends to Ignore in 2020


By doing this we not only give the user a better experience (as we are
not forcing the video upon them) - we can show a larger video in the
popup, giving more clarity to the feature we're showcasing. 

We can also then use the autoplay inside the popup to start the video
when the popup is triggered, giving the user a seamless video
experience.

Muted Looping Video with Autoplay - A common trend you can


consider instead of a traditional autoplay video, is a deliberately
muted video with autoplay embedded into your page.

In the example above we actually combine both of these strategies, as


we show a short looping video showing the flexibility of our editor,
and allow the visitor to see more information (in the video popup) if
they are interested.
Video popup element in OptimizePress page building
Muted looping videos are not blocked by web browsers and are a
great way to display features of your product or service without being
intrusive.
1

ULTIMATE GUIDE TO LANDING PAGE TRENDS IN 2020

Time to take action


Now it's time to take what you've learned in this guide and put it into action.

We recommend taking just one or two of these strategies to start, and consider implementing them or
testing them on a few of your own landing pages.

We look forward to hearing your stories of how these affected your business and look forward to helping
you succeed with landing pages in 2020 and beyond.

Take action with these landing page trends using OptimizePress to create
your own landing pages in WordPress
Get Started Now

You might also like