Landing pages

Landing Page
Handbook:
Landing Page
Best Practices
Compliments of :

This is an authorized excerpt from the full 190-page Landing Page
Handbook published by Marketing Sherpa. All new PluraPage
Subscribers will receive a complete copy of the Landing Page
Handbook, a $247 value, free of charge*! For more information
visit www.plurapage.com/sherpa
* While supplies last

MarketingSherpa’s Landing Page Handbook: How to Raise Conversions — Data & Design Guidelines

Table of Contents

Chapter 2: Design, Layout, & Copy
Fundamentals
Screen Resolution Stats & Examples .....................................................1
The Fold, Scrolling, and Paging..............................................................2
Sample 2.1 MarketingSherpa Long Form Landing Page ..............................3
Columns & Navigation Bars ...................................................................6
Sample 2.2 PhoneHog Current Winning Control Landing Page....................8
Design Tips for Landing Pages with Links to Other Pages ...................9
Sample 2.3 Impact Engine Old 5% Conversion Landing Page ......................... 11
Sample 2.4 Impact Engine Revised 15% Conversion Landing Page ................12
How Many Elements Should Be on a Page? .......................................13
Sample 2.5 Palo Alto Software Old & New Landing Pages ..............................15
Guidelines for Graphics ........................................................................16
Sample 2.6 Testimonial Photo from Palo Alto’s Site ......................................... 17
Typeface Fonts, Point Size and Text Layout ........................................18
Table 2.3 Kids’ Font Reading Comprehension Online ......................................19
About PluraPage ....................................................................................21

Full-size, color creative samples available at http://www.MarketingSherpa.com/lp/study.html
© Copyright 2005 MarketingSherpa, Inc. It is forbidden to copy this Handbook in any manner.
For permissions contact service@sherpastore.com. For more copies, go to http://www.SherpaStore.com

MarketingSherpa's Landing Page Handbook: How to Raise Conversions — Data & Design Guidelines 1

Chapter 2: Design, Layout, & Copy Fundamentals
Rule of Thumb: Great landing page design is about leading the eye on a journey that
ends in conversion.
This chapter is your nuts-and-bolts guide to creating a landing page using proven
best practices. We've included lots of screenshots of real-life samples so you can see
what other marketers are doing.
The Internet is a visual medium, and design is often all readers have to go on. In the
case of landing pages, the importance of design is paramount. Since visitors may
have come via routes that bypass the home page, the landing page is the only touch
they’ve had with your company. More than any other factor, design can influence
their immediate, visceral impression.
You can fit an almost infinite amount and type of content into your landing page
through links, long copy, streamed video, etc. However, for best results, you must
obey two rules:
Rule #1. Relevance
All of the content should be absolutely relevant and focused to the task at hand
(converting that visitor)
Rule #2. Clarity
Content must be organized so it's very easy for the visitor to figure out what to look
at, in what order, and how to take the conversion step when they are ready.

Often it seems almost impossible to merge these two rules together — how can you
include all the info needed when you have a small screen to work with? The best
practices rules in this chapter should help you a bit.

Screen Resolution Stats & Examples
Before you can design your landing page, you need to understand the basic space
restrictions — and they are considerable.

Rule of thumb: Make sure the critical elements in your creative are visible to almost all
visitors without scrolling by keeping them inside the upper 300 pixels of the page.

Why? It's the only way you'll be sure that 98% of visitors can see (and act on) critical
elements, even if they are using browser bars and navigation aids that block part of
the screen at lower resolutions. Remember that the first screenful of visible content a
visitor sees is what they make their first bail-or-not conversion decision based on in
the first few seconds. Your screen must convince them not to bail.



The Fold, Scrolling, and Paging
Rule of thumb: Put enough content above the fold (20-300 words, critical images,
conversion click link) so visitors can make a bail/no-bail decision without scrolling
or visiting more pages.

Warning: Don't make text-copy columns too wide or typeface too small in order to
keep content above the fold. The human eye is happiest reading text in 10+ point
typeface that's no more than 52-60 characters across. With few exceptions, if your
copy is smaller and/or wider, it won't be read no matter where the fold is.

Yes, it's possible to measure the percent of your landing page visitors who scroll
down to view content below the fold. We've heard anecdotal data on such tests from
several marketers including Kelley Blue Book and 11thHourVacations.com. In all
cases, the percent of scrollers was lower than you might hope — usually fewer than
50% — even for pages with content that you'd think was fascinating.

However, we're not advocating that you always keep all content above the fold.

Many of your best prospects (especially if they are women aged 34-45) will scroll
their hearts out, carefully reviewing every bit of information on your landing page
before they make a conversion decision. They're also most likely to click to additional
pages (or on interactive tools) for more information and then to convert.

But, your landing page still has to have enough compelling content above the fold to
convince them to begin scrolling and/or clicking around. They are making a "bail or
read on" decision based on what's above the fold — so it better be good.

Plus, your above the fold content must also contain enough convincing content to
win over short-attention span visitors who want to make an immediate snap
conversion decision. Often men and heavy Google users, these folks may never scroll
or click to read more. They'll make their yes/no decision entirely based on what they
can see right away, and then convert or move on.

For these fast-moving folks, you must make sure your conversion activities (add to
cart button, registration forms, etc.) are above the fold.

You can put conversion activities at the bottom of the page to catch scrollers as well.
In fact, often the more conversion opportunity places, the better. Here's a sample of a
long-copy landing page with a conversion offer placed roughly every fold-or-so so as
readers move through the copy, there's always an offer near-by to catch them when
they are ready to convert. Note: this page has consistently converted 60-67% of
visitors to email opt-ins for more than two years now, proving long copy can work
well with ample fold consideration.



Sample 2.1 MarketingSherpa Long Form Landing Page



Navigation Bars = Mostly Verboten!

Note: of all the rules of thumb and best practices presented in this Handbook, we
suspect the hardest one for marketers to follow will be removing standard site
navigation from your landing pages.

Why is this so hard? Two reasons:

#1. Your Web design department automatically sticks navigation on all pages. Your
navigation is probably a standard part of their templates or built into the content
management system that powers your site. It's more work to take it off than to leave
it.

However, you'll be needing more landing pages over time. Successful campaigns
breed more campaigns. So now's the time to ask them to create a new template for
landing page design projects that doesn't include navigation bars. You might also
ask for it to be super-easy to replicate with alternate vanity URLs and varying
headline wording, because this will make your life much easier over the long run as
well.

If the Web design department simply can't handle this in-house, then you should
consider having landing pages outsourced. Cheap Web developers are plentiful. For
roughly $50 an hour, you should be able to get a freelancer to whip up basic landing
pages for you on the fly.

#2. You are hesitant to remove navigation because you secretly hope visitors will
want to comb the rest of your site for information and fall in love with your
company, perhaps buying more in the long run.

Yank this dream out by the roots. People who do click on other links often don't end
up converting at all, because they lose interest or time. By diffusing your message
and your conversion path, you lose them altogether.

Remember — you'll have lots of other chances to tell your new customers all about
the glories of your organization and other offerings. For example, you can add more
info links onto the "thank you" they see once they convert from the landing page.
And you can email conversions who opt-in more info.

Consider, would you stick your annual report into a direct mail package for the offer
you're making on your landing page? Almost certainly not. Adding navigation to the
rest of your site is very similar.



Consider, would you tell an attractive stranger your entire life history when you're
trying to get them to agree to a first date? Of course not. So get rid of that navigation
bar.

Example: Atomz's Director of Marketing, Seth Brenzel, tested three types of landing
pages. One with standard site navigation, one with the navigation there but
rendered as a non-clickable image and one without navigation. He revealed to
MarketingSherpa's reporters that the registration pages with the regular Atomz
navigation bar stripped out perform significantly better than those that have links to
other places on the site, or even those that mention other places on the site without a
hotlink.

Obvious exceptions to the rule — If you are using a microsite as a landing page, you
may want to include some microsite navigation as part of the design because
supposedly visitors will need to poke around the site as a part of the conversion
process.

Also, if you are an eretailer emailing a promotion to active customers with a side-
wide discount offering, then you'll need navigation. Or if you are conducting paid
search marketing campaigns using your main name or URL as the keyword, then
folks will expect to go to a home page featuring standard navigation.

However, if you are promoting a particular site department or group of offerings
(get 50% all our hosiery today!) , you certainly should strip non-related navigational
links from the landing page. This is particularly important for clicks from shopping
search engines where prospects are fairly far down the sales path by the time they
get to your site and they have links to competitor's sites right there on hand.

Don't distract them with extraneous "and we also sell this" links. Make the sale and
then you can tell them about the rest of your offerings in your follow-up.



Columns & Navigation Bars
Rule of thumb: Fewer columns generally outperform more, with one single main
column often being the best design. Eliminate your navigation bar entirely unless it's
a microsite and navigation is critical to the conversion path and contains no
extraneous links.

We've noticed that many marketers are testing two or even three-column formats for
landing pages these days to work around the fold. That way you can have copy and
key images (generally on the left) and conversion activities (generally on the right)
both above the fold.

The problem is that more columns equal more confusion. The eye may not be sure
where to look. One column is much clearer.

Example: Marketers for Finishing Touch hair removers tested microsite page layouts
with and without multiple vertical columns. They drove millions of consumers to the
landing page via TV commercials and email promotions. The single column layout
was the proven winner, with an outstanding 30% average conversion rate to $30
average sale.

This is where landing pages depart from classic Web site design. Your Web site will
almost certainly have at least two columns — one for the left vertical navigation bar
and one for the central content. Site home page and major section pages often will
have even more columns and entry-areas so visitors can chose between a wide range
of navigation options.

However, with landing pages the point is to *not* give visitors much room to wander
about on paths of their own devising. Instead you are trying to convince them to take
a specific conversion action. The more columns, the more choices for the eye and
mouse to wander, the less likely a conversion may be.

Single-page landing pages (often requiring scrolling) versus landing pages with
links to multiple pages

It's almost impossible for most marketers to get all the content they need for top
conversions into the small amount of screen space above the fold without making
copy and graphics impossibly tiny.

So, you're left with the scroll-down-versus-link-to-more-pages decision. Should you
put more content below the fold and hope visitors scroll, or should you put some
compellingly worded click links above the fold and hope they click?

A 2001 Wichita University usability study showed that people have an easier time
scrolling than going to another page. Participants took longer to read passages that



were split among multiple pages. It’s also worth noting that since the study use of
scrolling wheel on PC mice has increased and made it likely that scrolling is even
easier for consumers.

However, we've seen evidence that different demographics react to scrolling
differently. For example, many men may shy away from a long-landing page because
it "looks like work to read." A cleaner page with a few links to more info may be
preferable. At first glance your landing page feels like a time-suck, so they'll bail
quickly.

On the other hand women shoppers are infamous for believing the more information
the better. So a long-scrolling page may impress them at first glance, proving the
page is worth their while because there's ample information for a buying decision.

This is why you may want to test the scrolling versus linked-pages design issue by
putting up one of each page and watching not only the final conversion rate of each
— but also the initial "quick bail" rate. (The percent of visitors who leave after only a
few seconds because the page looks either too uninformative or too intimidating.)

3 design tips for one-page landing pages

1. Repeat the action step you want people to take — the link, form fields, etc. —
above and below the fold. If someone is scanning and doesn’t go below the
fold they should see the action step. They should also see it again if they scroll
down to read further.

2. Avoid any graphical or navigation elements that may imply that the reader
has reached the bottom of the page before they really have. Horizontal lines,
large swathes of white space and rows of hyperlinks tell the eye "you've
reached the bottom of the page" even if it hasn't.

3. Make your graphic elements and copy typeface a bit larger than you might
normally do. You're telling the eye that "this is easy despite the length" thus
dispelling the impression of hard work a long page has inevitably.

Example of non-linking page: Among other variations, PhoneHog tested landing pages
requiring links for more information, versus a page that contained everything in one
place. The all-in-one was by far the winner for conversions with a 55% higher
conversion rate than some of the non-winning pages.



Sample 2.2 PhoneHog Current Winning Control Landing Page



Design Tips for Landing Pages with Links to Other Pages
1. Ruthlessly eliminate any click links that are irrelevant pages and minimize the
typeface of those to privacy and legal information.

2. Make sure links change color once they are clicked by each visitor.

3. Make the area around each link clickable (even if the link itself only has a
word or two underlined, or a small click button) so the visitor doesn't have to
hit the spot perfectly on with their mouse for the click to work.

4. Carefully write your links so someone reading the first 3 words or so will
understand what they'll get from the click. People skimming a list of links
rarely read more than a few words per line. Unclear, boring, or duplicative-
sounding links won't get clicks.

5. Make your hero shot clickable, with a separate window of information
opening so the visitor is not taken away from the main landing page. A
surprising number of folks will click on your hero shot. (More on hero shots
below.)

6. Don't make visitors click to a conversion form if possible. Clicks should be for
more information, not for additional conversion steps. So include your form or
the first step of the form on this page. Make this conversion step obviously
bigger and graphically different from all other click links on the page.

7. If your page has to appeal to multiple audiences and there's no way you can
do a separate landing page for each, then the page should focus on the
primary audience with a big fat link for the secondary audience to click on to
go to a page that's specifically designed for them. Example — a page with info
for kids with a fat link saying "Parents, click here."

8. If linked information is critical to conversion, then consider including several
different links to it on the same page in different formats. Some people will
click on underlined text, others on graphics, and others prefer to use search
boxes. You need to be sure all three surfing types are able to arrive at the same
place for the next step in the conversion process. Don't worry about
duplicative linking. It's reassuring rather than annoying.

Example: Neil Greer, at ASP Impact Engine, was frustrated because his pretty-good
landing page was only getting 5% conversions from search engine traffic. Copy was
fairly short and covered his main product benefits with links leading to more details.



He surveyed non-buyers (people who signed up for a trial but didn't convert) to ask
them why didn't they buy.

Turns out the landing page itself was partly to blame. They were not interested in all
his wonderful benefits and all the glories of his product.

The only thing they wanted to know was, “Does this product match the precise need
I've got to fill right now?”

Any other information in his search ad or in his landing page was extraneous and
almost annoying to them. He learned it's not about impressing people with
marketing hype; it's about clearly and simply stating how you serve their specific
need.

After Greer refined the landing page — creating in the end nearly 100 targeted
versions for each search term he advertised under — conversions tripled to 15%. Key
differences:

Visitors got to see the entire page with almost no scrolling, there are fewer graphic
elements to distract from the message, and copy is highly targeted to visitors’ needs
based on which search term they arrived from. Greer kept the click links to more
detailed copy, though, for those visitors who wanted more information before
making their decision.

"Instead of talking to them in terms of features and benefits, we talk in terms of what
you can use our products for. That's the biggest difference," notes Greer. "Simple is
better. The less you show people, the more you get. If you try to over-
informationalize people on the landing page, then you're done. We take the opposite
approach; we don't put a lot of content there."



Sample 2.3 Impact Engine Old 5% Conversion Landing Page



Sample 2.4 Impact Engine Revised 15% Conversion Landing Page



How Many Elements Should Be on a Page?
A frequently asked question in design is ‘How many elements should I use on the
page?’ The many design and usability experts we spoke with all say the same thing,
that you should use as many as are absolutely necessary, and no more. The
difference between confusing a reader and enticing them is a combination of design
and, above all, relevance.

A well designed page can incorporate many different elements, both text and
graphical. However, the landing page exists for a very specific task, and every
element should focus the user on that task. Extraneous links, text or images only
serve to distract the reader.

The key lesson of MarketingSherpa's Landing Page Eyetracking Study is that the
placement of page elements can have a dramatic impact on how intensely people
read a page, and the pattern with which it’s viewed. One misplaced photo can drag
readers to a part of the page that isn’t pertinent, and in some cases, they’ll never get
back to the action you want them to take. Testing and practice are the only foolproof
ways to designing the best page possible.

Our advice — before copywriting or designing a page, first make a list of elements
you need to get the conversion. Elements might include:

- Logo
- Hero shot, which might be clickable
- Conversion action link or button
- Headline
- Quick offer explanation
- Longer product/service explanation
- Links to more information
- Deadlines
- Forms and descriptive tags next to each field
- Tagline describing what your brand does or stands for
- Security and reassuring elements such as the Better Business Bureau icon
- Testimonials, which might be textual or include photos or audio/video
- Technical specifications
- Guarantees
- Rich media elements (streamed video/audio, Flash)



- Fine print at bottom (copyright, legal)

Next move each element about your page, seeing how each it affects the others and
how the eye might travel between them. In practice it's a bit like deciding how to
arrange lots of furniture in a new room that lots of half-blind people will be racing in
and out of.

Small, often unpredictable changes in the way you arrange things can make a huge
difference in results.

Example: Palo Alto Software raised online sales by 41.3% by testing a series of design
tweaks, many of which seemed fairly inconsequential on the surface, on a conversion
page with complex information.



Sample 2.5 Palo Alto Software Old & New Landing Pages



Guidelines for Graphics
There are seven types of graphical images that play a role in landing pages.

1. Hero shot of offered product or a
representation of the service
Graphics will attract the
2. Page/site logo and associated graphics eye and place emphasis
(tagline)
on text within the graphic.
3. Clickable buttons/links
Make sure that the
4. Form fields emphasis is necessary,
and reserved for your
5. Color blocks, arrows, and background
"screens" to guide the eye around the text main points and the
action you want viewers
6. Informative content such as charts, tables, to take.
cartoons, testimonial photos, etc.

7. Icons indicating trustworthiness and safety

Rule of thumb: Make sure your graphics, including color choices and hero shot, match
any creative leading to them as much as possible. A banner ad should click to a
landing page with the same colors and images. Any visual disconnect at this stage
can cause a surge in fast bail-out visitors.

Graphics are extremely powerful in leading the eye through your landing page. They
are not there to pretty-up text, but rather to push actions and indicate pathways.

Tip: Make your dominant images, especially your hero shot, clickable because people
tend to click on them. You might ant to show a larger and/or alternate version of the
image, or more information about the offer in question.

Tip: Graphics used for emphasis, such as color wash (aka screen) behind text and an
arrow pointing to a hot topic usually work as intended, so make sure that the
emphasis is not misplaced. Save them for the really important points, and not a
sidebar of tangential information.

Tip: Bad photos of real people work better than clip art every time, especially for
testimonials. A slightly imperfect photo feels much more real and believable than a
glossy studio shot. Palo Alto Software, among many other marketers we've talked
with, tested this idea out, and found slightly imperfect photos of customers giving
testimonials worked far better than perfect shots taken by pros.



Here's a happy customer photo from Palo Alto's site promoting BusinessPlanPro. It
may not be professional photography, but you sure feel like he's a real guy you can
trust:

Sample 2.6 Testimonial Photo from Palo Alto's Site

Tip: Avoid photos showing someone's entire body unless you've got a darn good
reason — such as promoting apparel. Visitors' eyes will skim downwards,
automatically following the line of the body to the feet and whatever's below, rather
than reading your important marketing copy elsewhere on the page.

Tip: Test turning prose-content into charts. This was another big hit in tests for Palo
Alto Software.

Tip: Unless your brand is a household name, chances are fairly strong that some of
your visitors won't have heard of you. Consider using the space to the right of your
logo to feature a tagline and accompanying image that explains who you are in the
blink of an eye, thus building a foundation for the visitor to be interested in and trust
the rest of your message. This is especially critical for sites with acronyms in their
brand name. (We've noticed a lot of trade association sites, for example, neglect to
spell out the meaning of their acronym anywhere on landing pages.)



Typeface Fonts, Point Size and Text Layout
Rules of thumb: Make your textual copy as easy to read as possible. Many visitors will
bail on a landing page in a heartbeat, without reading a single word, just because it
looks "like work" to read.

Top 5 rules to follow for easy-to-read type

1. Use 10 point or larger font. If you are targeting children under 12 or adults
over 45 or you have very long copy, consider a larger size type.

Captions, names of form fields, "fine print" copyright and legal, and possibly
some chart content and tech specs can be smaller.

However, in general 75% of the landing pages we see out there use font sizes
that are too small for comfortable reading. And if reading is hard, visitors
show slower performance and a drop off in comprehension.

2. No matter what type-size, text should never run more than 52-60 characters
across the screen. If you make your typeface smaller, your columns must also
be thinner. People's eyes simply can't read wide columns easily. (That's why
major newspapers have such thin columns.)

This means you'll need to tell your Web designer to keep the columns fixed
width, so they don't expand when someone views the page with a wider
browser window.

3. Pick a font that you see used widely online by high traffic sites. Just like colors
online, not all typefaces appear the same (or even are available for display) on
all computers. So you'll need to use Web-safe fonts. Our favorite practical
resource for typeface choices in Web design is an article by Daniel Will-Harris
at eFuse.com. Go to
http://www.efuse.com/Design/web_fonts_basics.html#WebSafeFonts

4. With the possible exception of a one-line headline, all your text should be
flush left and *not* centered. Very little is harder to read than a series of lines
that are centered, no matter how large a typeface they are in.

5. Your headline should be significantly larger in type size and possibly bolder
than the rest of the copy on the page. However, your subheads (if any) should
be as close as possible in size to the regular body copy; otherwise readers are
likely to read just the subheads and not the text under them. So, use bold for
subheads but not larger font sizes.



5 Guidelines on Text for Children and Older Readers

1. For both groups, go with larger point sizes. 14 point seems to be the best
compromise between readability and real estate.

2. Both groups also respond somewhat better to serif fonts, in terms of
comprehension. However, older readers report liking sans serif fonts better.
Worth testing if they’re a key demographic.

3. Kids respond well to ‘fun’ fonts. Note the rise in comprehension and
preference for Comic. The higher the number, the better the font’s
performance with kids.

Table 2.3 Kids' Font Reading Comprehension Online
Times Courier Arial Comic
Easy to read 4.6 4.8 5.1 5.5
Attractiveness 4.5 4.5 4.9 5.1

Source: Wichita University Usability Study, 2000

4. For pages that are oriented towards seniors, avoid using frilly or complex
fonts, stick to 14 point size, and keep design distractions to a minimum. A
Nielsen/Norman Group study found that the Web was twice as difficult for
senior citizens to use.

5. Studies suggest that margins contribute to reading comprehension, while their
absence increases reading speed. For these audiences, use of margins and
white space in recommended.

Guidelines on Emphasizing Text for Impact

1. Don’t underline text for emphasis. Underlining has come to communicate that
the underlined text is a hyperlink. It’s confusing or off-putting for readers to
click on static text. For the same reason, stay away from blue text.

2. Don't use italics if you can help it — these are very hard to read on a computer
screen.

3. Use colored, bolded, or "highlighted" text for selective informational
highlights, not for verbal emphasis. Many copywriters make the mistake of
bolding or coloring words they would put verbal emphasis on if they were
reading the copy out loud.

However, visitors are never reading every word on your screen, and certainly
not reading every word in the order you wrote it. Their eyes are skipping



about. Your bolded or colored words will catch their eyes so much that these
words may be the first read on the page — or the only read words on the
page.

Review the copy you've bolded or highlighted. If those are the only words on
the page that someone reads, do they summarize the points you need to get
across? Are they enough to cause a conversion, or to at least sell the reader on
going back and reading more of the regular-font copy?

4. Make sure your pages show when links have already been clicked.

5. Be very careful of using colored or white text on a colored background for
anything other than navigation bars or break-out boxes. We spoke to several
designers who said that while it should work with contrasting colors, they’ve
rarely seen good implementations. Yellow text on a blue background is
particularly hard to read, and communicates a low quality offer.


MarketingSherpa’s Landing Page Handbook: How to Raise Conversions — Data & Design Guidelines 21

About PluraPage
PluraPage is a flexible, complete and proven on-demand suite for the post-
click marketing environment. PluraPage Landing Pages gives users the ability
to instantly create and launch custom and personalized landing pages that
can increase click-through performance up to 40 percent. PluraPage does not
require any IT support, putting control in the hands of any user familiar with
basic word processing software. Users can quickly and easily post, update or
remove pages and forms supporting a limitless array of marketing programs
and activities.

Take PluraPage Landing Pages FREE for 30-days by calling 703.453.9120, or
go to www.plurapage.com

PluraPage
12801 Worldgate Drive, Suite 525
Herndon, VA 20170
Phone: 703.453.9120
Email: info@plurapage.com


Landing pages

More Related Content

What's hot (20)

Similar to Landing pages (20)

More from WSI Egypt (15)

Recently uploaded (20)

Landing pages