Landing page examples and best practice advice
Discussion of web design in companies who don't know the power of landing pages still often focuses on the home page. But savvy companies know that custom landing pages are essential to maximise conversion of leads when using inbound marketing techniques like SEO, AdWords and social media to drive visitors to a site.
So this prompts the question, which factors make for the most effective landing page? Is a 'Perfect Landing Page' possible? This post gives a summary of my top 12 tips and places to look to find more examples.
Salesforce.com - an example of the evolution of the Perfect Landing Page?
To illustrate these tips, I'm going to use an example I've used in training many years - it's the B2B Salesforce.com lead generation page for its CRM service targeting searchers who are looking for CRM systems.
The Salesforce.com landing pages illustrate many good practices. I've marked up what I see as good about this format. It's maybe not perfect, but much better than most! Let me know what you don't like about it! Or how things differ for consumer sites! This is the original 'classic' landing page example that I used to use in training. It shows many good practices, but has one big problem.
However, there is a problem with this type of landing page, and you can probably spot it! It's not mobile responsive, so isn't effective on Smartphone. So today we see a much longer-form landing page...
The initial type of three column tabbed design doesn't work well at all well on a smartphone, so the second design is a mobile responsive page which naturally tends to be longer and can typically only support two columns. Second, consumer behaviour has changed such that with so many landing pages it can be more difficult to get people to disclose their details, so there is often a two phase data capture where data is captured at the next stage. Thirdly, testing has shown that longer form pages with more content, building an argument can persuade better for a major investment in time such as starting a trial.
Since data collection isn't practical in this case until someone has read the copy, there is now an additional mobile responsive page to encourage the trial.
Defining landing pages
Before we look at the best practices in detail, we should look at landing page definitions. Not everyone knows this jargon and actually, there's no simple answer.
My definition is that landing pages is:
"Specific page(s) on a web site created for visitors referred from marketing campaigns which are designed to achieve a marketing outcome."
Anything referred to as a landing page is intended to maximise conversion of visitors to a page or series of pages towards lead or sale.
Most typically, the outcome is conversion to action, typically data capture where a site visitor fills in an online form to generate a marketing lead.
Landing page goals
Effective landing pages are those that meet their objectives, so let's start with typical objectives. Often it is thought that response is everything - so objectives are not though through, but that this can lead to data capture pages that are too simple.
Typical communications objectives in order of importance are:
- Achieve registration typically to generate a lead (such as a quote for insurance in our example) which leads ultimately to sale
- Profile and qualify the site visitor in order to deliver more relevant follow-up marketing communications
- Explain the value proposition offered by the company to differentiate from other sites the visitor may visit during the buying process i.e. Answer the visitors questions.
- Communicate the brand values of the organisation running the campaign
- If the visitor doesn't want to disclose their details right now, provide contact details for traditional sales channels such as a phone number, or give the visitor reasons to return to the site or engage them through other relevant content or offers
It is important to run through these objectives since sometimes it is just the two primary objectives related to data capture that mainly determine landing page design and not the secondary objectives which are equally important. The majority of the visitors to the landing page won't actually convert, so it is important to give them a favourable experience also.
Different types of landing page
We have to bear in mind that there are different types of landing pages that work best depending on the campaign objectives and whether it is a short-term or long-term campaign. There are three main choice. The first is a landing page integrated into the sites stucture and consistent with standard page templates and navigation for the site. The second is a single landing page specifically created for a campaign with a different look and feel, typically with the top navigation removed. The third is a tabbed landing page or microsite that provides more information
Here are some of the pros and cons.
Landing page option 1. Landing page(s) integrated into site architecture and style
It is most efficient in terms of effort in content creation to make landing pages part of the main site information architecture. The downside is that they may not work so well in terms of converting both direct referrers and browsers navigating from elsewhere on the site. They also need to be search optimised, which may add to costs of the campaign.
Such landing pages in particular category or product pages use what is known as deep linking.
Landing page option 2. Bespoke landing pages that are not part of the main site structure or style
These are used where a more "stripped down" page than standard content is required which focuses on converting visitors from an online ad campaign. Alternatively, if it is a short-term branding campaign then it may be more straightforward to create a microsite separate from the main site with a different look and feel. This often happens where resource cannot be found to create a microsite within the main site, or it is felt that the existing site look and feel cannot deliver the brand impact required.
So this approach is used since it can potentially produce higher conversion rates or produce a microsite more consistent with the campaign goals and style. The disadvantages are that this approach requires more effort and maintenance and often result in a poorer user experience since the page will look and work differently to elsewhere in the site. If it is a completely separate site with a separate domain, a big disadvantage of this approach is that due to the Google sandbox effect, it is not likely to be included in the search results for several months. Given this it is really essential that the site is incorporated within the same domain - for example www.quotemehappy.com redirects to the main Norwich Union site.
Landing page option 3. Microsites with several pages or tabbed landing pages
There is an obvious problem with option 2, many visitors to the page will not be at the right point in the buying cycle to convert. Yes, such a landing page will often increase single visit conversion rates because of its simplicity - limited choice and simplified messages, but it doesn't offer sufficient information for site visitors not in "buying mode".
Scott Brinkler, a specialist on Landing Page Optimisation puts it this way in this post where he argues for death to the "cliche" landing page.
"The analogy of these types of landing pages is that they’re like pick-up lines. They’re shallow, optimized simply to “close the deal.” And, frankly, most people don’t respond kindly that to that approach. Which is why, more or less, the bounce rate on landing pages is typically around 95%."
In his post he gives this example of a tabbed landing page/microsite. You can see that it's very similar to the approach I've recommended from Salesforce at the start of this article.
Companies need to work out whether the cost of producing landing pages is offset by the potentially higher conversion rates and better campaign results. Although this approach is surpisingly quite common, I think the approach is often taken for convenience eventhough it is more expensive in the longer term. I know of one E-commerce manager for a multi-national technology vendor who tries to educate their hundreds of web and traditional marketing specialists to not use the bespoke landing page approach, but to always try to integrate into existing site structure.
Often though there is not one right or wrong approach and a hybrid can be used, i.e. you create tailored landing pages only for high volume/high expenditure generic Adwords pages or for major offline ad campaigns.
The home page can be a landing page
Note that a landing page can potentially be the home page although this is not traditional best practice. But, if a company has a limited range of products or the main campaign objective is to generate awareness rather than response. We're seeing more of this type of home page as landing page - see these four examples.
Different referrer types
To make the landing page effective, we also need to think through the full range of places the visitor may originate. There are 3 main origins we need to design the landing page to accomodate:
- Online media placement. Visitors can be referred by clickthrough from any online referrer such as a search engine, online ad, affiliate site or e-mail campaign. There are two main types of landing page for these placements:
- Offline media placement. Offline ads or direct mail may have a specific campaign URL (CURL) such as 'www.quotemehappy.com'.
- Visitors that navigate from elsewhere on the site. Such visitors are not using the page(s) as a "landing page", but still need to be accommodated if you are using a deep linking strategy.
Landing page success factors
To be effective, landing pages need to combine the following:
- Develop trust in the brand
My Twelve landing page success factors
Before I run through the success factors, remember that guidelines are only guidelines, they of course, have exceptions. The only way to be sure of what works for your audience and your market is to conduct tests such as usability studies, A/B testing or multivariate testing. Having the right web analytics tool is vital to this.
As a minimum, you should readily be able to view data on bounce rates (the proportion of visitors who leave the page without visiting more pages) and conversion rates (the proportion of visitors who complete the intended outcome) for different referral sources (e.g. paid vs natural search vs online ads). Ideally, it should also enable you to complete A/B testing where different visitors are served different pages so differences in bounce and conversion rates can be assessed.
Second, remember that the guidelines are dependent on the users typical viewable area of screen. While many still design for a minimum of 1064X768 or even 800 by 600, the latest data on screen resolutions shows that over three quarters are now higher than 1024 by 768 although this is skewed by the designer audience of that source! So check your own analytics!
However, if browsers open a new window, for example from search results page, the new window may be smaller than full-screen.
So finally! these are my top 12 guidelines for landing page effectiveness:
ONE. Deliver RELEVANCE.
Unlike casual visits by browsers, visitors arrive on landing page with a directed goal or intention in mind. So the first thing you have to do is instantly show relevance to help visitors achieve that goal.
A clear headline should show relevance and also engage the visitor to scan down the page. You need to show the visitor they have selected the right place to find the brand, product, deal, information or experience they are looking for, so the headline must clearly indicate this.
Other key "relevance messages" should be readily scannable through chosing the right headlines and with panels drawing the eye to the different areas as in the Huggies example. Tests tend to show that larger fonts give better response.
Since hitting the landing page is often the first experience of a company, we have to answer basic questions that the customer has about the company such as "Who are you?", "What do you do?", "Where are you?" "Do I trust you?" You may have these message on the home page, but does the navigation on the landing page allow these questions to be answered. Standard menu options such as "About Us" or "Contact Us" can achieve these.
Here's another recent example landing page showing the importance of relevant copy and testing it to get the best result. I recommend taking a look at this post from Kissmetrics for the other copy examples too.
TWO. INTEGRATE with referral source(s).
The customer journey to your web site started elsewhere. To deliver relevance also requires consistency with what they have already read and seen to meet their expectation.
So in terms of message, branding and creative the landing page needs to deliver an integrated communication. This applies particularly to offline ads, interactive ads and e-mails.
The key message on the landing page needs to be consistent with the key message of the referral source. So again, you need to show the visitor they have selected the right place to find the brand, product, deal, information or experience they are looking for, so the headline must clearly indicate this.
THREE. Provide sufficient DETAIL to support the response decision.
The whole experience and content needs to be right to generate response. For me, one of the most important aspect of landing pages, and one that is often not right, is that there isn't enough detailed information on which the visitor can decide to signup.This is why I recommend the Option 3 above.
To help determine the right-level of information, best practice is to use web design personas to identify typical information required and the gap relative to what you deliver. Also think about the level of "domain knowledge" the user has - do your technical product descriptions make sense. Also think about "tool knowledge" - where your landing page requires using additional tool,s what knowledge is required to use them effectively and are you providing the right explanations.
FOUR. Start the user on their journey.
The design should make the next step clear and minimise the number of clicks required for response since every extra click required in response will generally reduce response by 10%. It is best practice to include the initial data capture on the first page as shown in the Salesforce.com example.
If the response mechanism is on another page use multiple calls-to action to gain response since some visitors will respond to images and some text hyperlinks. Make all images clearly clickable, for example by making them look like buttons.
Form-related approaches to improve the journey:
- Limiting the options on each page is an effective technique.
- Grabbing attention in first 30 seconds through a headline and lead that reflects ad copy and "isn't too clever", i.e. be direct.
- If it is a multi-page form, then draw users in with easier initial questions.
- Allow the form to be saved part way through the quotation
- Use dynamic headlines related to referrer including search keyphrase to help deliver relevance
- Use focus groups to decide what to test - marketers who are too close to the problem may disregard factors that are important to customers
This charity landing page example, provided by Liam in the comments ticks many of these boxes!
The words used to form calls-to-action are critical to create a scent trail that users of the site follow. An effective scent is delivered where the words match what the user wants to know or achieve.
FIVE. Use the right PAGE LENGTH.
This is a difficult one to give guidelines on. The right copy / page length is one that minimises the knowledge gap between what the user want to know and what you tell them.
Some designers would suggest that content must fit on one page that doesn't require scrolling at 800 by 600 resolution. But short copy is often inconsistent with Guideline 1. Also tests have shown that page can be scrollable - users will scroll if they appear scrollable. However, it is best if key information include response mechanism are above the fold.
To summarise, I would say, make it short (for impulsive readers) AND long (for readers who want to read more).
Of course, the only way to get the length right is to test. This Marketing Experiments test
suggested that long-copy outperformed when driving visitors to a product page from Google Adwords.
SIX. Use meaningful graphics.
Graphics must be consistent with the campaign and generate empathy for the audience. Don't underestimate the importance of quality graphics - stock graphics rarely work. It is difficult to assess how graphics influence conversion rate, so the implication is to test, test,test.
SEVEN. Remove menu options?
Another guideline that causes disagreement. Removing menu options will often increase conversion rate since less choice of where to click is offered, but for those who don't respond will give a poor experience and prevent them browsing other parts of the site. Often a compromise is best with a reduction in menu options to top-level options only.
EIGHT. Consider using a "flowable" or liquid layout design.
This maximises real estate at a given resolution on different devices. These days it's also called responsive design.
Although this can work well for a retailer to show more products above the fold in a category, this is achieved with a loss of control of design. For landing pages, a controlled, fixed design will often work best.
NINE. Remember search marketing.
There are three aspects to this. First an offline campaign will lead to people searching on your brand or the campaign strapline.
Make sure you are using paid search to direct visitors to the relevant pages particularly during the campaign.
Second, if the page is integrated into the web site and will be used in the long-term, optimise it for relevant search keyphrases using standard search engine optimisation techniques described .
Three, Google sends out a robot "Adbots Google" to test landing page for relevance and speed, so make sure your <title>, headings and body copy include the keywords you're using to trigger your ad and including in ad copy.
TEN. Remember the non-responders.
Provide a choice for those who don't respond despite your carefully crafted landing pages. Provide a reasonably prominent (trackable) phone number or perhaps a call-back/live chat option. Also provide some options for them to browse or search elsewhere on the site.
TIMITI is a term coined by Jim Sterne, author of Web Metrics
It stands for Try It! Measure It! Tweak It! i.e. online content effectiveness should be reviewed and improved continuously rather than as a periodic or ad-hoc process. Because the web is a new medium and the access platforms, user behaviours and competitor approach all change continuously, what works at the start of the year will certainly not work as well by the end of the year.
Today, using AB or Multivariate testing tools like Google Website Optimizer is an essential part of Landing Page Optimisation.
TWELVE. Consider landing page longevity
Landing pages are often used for short-term campaigns. If so, you need to carefully manage when they and links to them from within the nav are expired. Risks include out-of-date offers and visitors typing in URLS which are no longer valid. Use of a custom 404 Error page is essential to manage these problems gracefully.
If you're researching landing page examples, I also recommend this excellent post, deconstructing 10 landing page examples.
Finally, remember that there are always exceptions to guidelines and some have suggested that many of the commonly held usability guidelines are myths. See also Bryan Eisenberg's ten unwritten Internet design rules.
So that's my guidance, as always, tell me what you have found. Share the approaches you have found effective. TIA! Dave