ellipsis flag icon-blogicon-check icon-comments icon-email icon-error icon-facebook icon-follow-comment icon-googleicon-hamburger icon-imedia-blog icon-imediaicon-instagramicon-left-arrow icon-linked-in icon-linked icon-linkedin icon-multi-page-view icon-person icon-print icon-right-arrow icon-save icon-searchicon-share-arrow icon-single-page-view icon-tag icon-twitter icon-unfollow icon-upload icon-valid icon-video-play icon-views icon-website icon-youtubelogo-imedia-white logo-imedia logo-mediaWhite review-star thumbs_down thumbs_up

4 website landing page best practices

4 website landing page best practices Rich McIver

You've spent the time and money to bring traffic to your website for what? So they can poke aimlessly around? So they can research your product and then go to Amazon to buy? Or worse yet, so they can be confused as to what you're even selling?

No. Obviously, you want your traffic to convert, whether that means leads, signups, or sales. And the best way to achieve that is to follow best practices when designing your landing pages. Let's take a look at examples of four landing page best practices that you should consider incorporating into your website.

Include partner co-branding or awards

Customers want to feel like they are making a smart decision when making a purchase online, and so they seek validation that other trusted organizations regard this as a good deal, bargain, or otherwise good business partner. Good landing page and print ad designers know this. That's why you'll see "As Seen In" with a bunch of highly recognized media outlets on many advertisements and landing pages, or lists of awards won. They both serve the same purpose, which is to make the customer feel comfortable that other people or organizations they trust has vetted this company and decided that it was worth recommending them.

In the case study below you'll note that a very minor change was made to the header of the BagServant product page. The Twitter follower count was replaced with an award badge from a well-recognized individual in that industry, which served as trust symbol for buyers.



The result was a whopping 72 percent improvement to the page's conversion rate, which is attributable to the increased confidence that buyers had that the site was reputable, excellent and trustworthy -- gleaned all from a small trust symbol.

Use directional cues to draw attention

No matter how rebellious you consider yourself, all humans follow basic directional cues sub-consciously. That is never more true than with a website landing page. Directional cues guide the reader's eyes to where you want them to look, which, for landing pages means your call to action.

There are three ways of doing this: obviously with actual arrows, subtly with abstracted arrow-like design elements, and more subtly still by using unrelated elements of the landing page. Depending on your clientele, the product that your marketing, and how overt you want those marketing efforts to seem, will determine which option is best for your landing page.

We'll examine examples of each in turn:

Most obvious, using an actual arrow

In this example, of an obvious directional element, Working Moms Only uses a large arrow to focus the reader's attention and drive it to the sign up button. It's effective, but for some industries might seem a little heavy handed. So consider a more subtle approach.

Subtle, using an abstracted arrow

In this less heavy-handed example, SalesForce uses a white triangle cut in on the side of their contact form giving the impression of an arrow pointing to the contact form. While more subtle than a full arrow, it serves the same purpose of guiding the reader from the text to the form. But in those industries where any overt selling can be regarded as unseemly there is yet a more subtle approach.

Most subtle, using landing page objects

In the most subtle example, Kingwood Orthodontics uses the orientation of its building with its pointed roofline which is reminiscent of an arrow to draw your eye to its contact form. Supplementing this is the physical orientation of the orthodontist, whose body language is pointing to the contact form.

Mention "free" on your landing page

"Free" is the most powerful word in marketing, and that is no less true in landing page design. Simply adding the word free to a landing page has been shown to dramatically increase conversions even when the underlying offer is exactly the same.

In this example, Betting Expert , an online sports betting site was seeking to increase the rate of signups via its landing page. By simply changing the messaging to emphasize "free," marketing consultants Wishpond were able to increase the landing page conversion rate by 31 percent.




Use a color's built in meaning

If you aren't constrained by legacy colors in the design of your website, consider using a color scheme on your landing page that assists rather than competes with your messaging. For landing pages, orange, green, and blue have pre-existing meanings in the subconscious of most web visitors that can be used to your advantage. For example, orange generates positive feelings so it is good choice for CTA color, green is associated with "go" so it's a good color for submission buttons, and blue is a classic "click me" color so it serves as a good alternative submission button color. For an in depth read on the psychology of color, read here.

Below we'll look at how two landing pages use color to convey intended actions:

Colors that successfully assist the intended action

In this example, from company's review page on my company's site, Merchant Negotiators, the call to action form is headlined by an orange banner, while the two submission buttons are green and blue. Moreover, the colors of the buttons sharply contrast with the white background and include a drop shadow, making it easy and intuitive to recognize these as buttons that are clickable.

This color scheme generates positive feelings around the contact form, and an obvious call to action with green and blue buttons.

Colors that impede the intended action

While this long-form landing page by The Annuity Store does a great deal of things well, its use of color is not one of them. By using multiple versions of blue for text, the casual visitor is given the impression that the landing page should be clickable links, which it is not. And the call to action, in the form of a "Sign up today!" button, has very little contrast in color to the background blue, and no drop shadow, meaning that it does not stand out significantly. Given that the goal of this page is to drive clicks to that button, the color scheme is not serving its purpose.


A website whose landing pages follow basic best practices when it comes to conversions will be at a significant advantage over a competitor whose landing pages do not. That is because a company whose landing pages convert can generate significantly more revenue from the same traffic relative to their competitor, allowing them to pay more for that traffic, and ultimately grow market share.

By incorporating the four basic lessons introduced in this article into your company's landing page design, you'll have a good initial foundation. It's important to remember, however, that continuous testing and tweaking via ongoing A/B testing campaign is the only long-term solution to staying ahead of your competition.

Rich McIver is the founder of Merchant Negotiators.

On Twitter? Follow iMedia at @iMediaTweet.

"Closeup of computer screen" image via Shutterstock.

Rich McIver is the founder of Merchant Negotiators, a comparison website where business owners can compare merchant services offers and obtain cheaper credit card processing. You can learn more at: www.MerchantNegotiators.com...

View full biography


to leave comments.

Commenter: Jo Oskoui

2015, September 01

Great article. Would have liked to see responsive web design as the first item on the list for best practices. With over 50% of traffic coming from mobile by now, we need to optimize for the mobile experience for maximum conversion.