What makes one landing page better than another? Learn to apply a critical eye to landing page design with this Best Practice Methods presentation. From page formatting, to copy writing, CTA and imagery design, I share some of Unbounce Co-Founder Oli Gardners' top tips for creating engaging, high-converting landing pages. I also demonstrate how Aamplify (www.aamplify.partners) are applying these methods with examples from three recent client campaigns. Take a look and start applying some of these to your next digital marketing campaign. Thanks to PlanPro, Certus Solutions and Frog Recruitment for allowing us to reference their content in this presentation. PlanPro: http://planpro.co/ Certus Solutions: http://certussolutions.com/ Frog Recruitment: https://www.frogrecruitment.co.nz/

1. Demand GENERATION
Best Practice Methods

2. www.aamplify.partners 3
Today’s Story
- Introduction
- Why we’ve compiled this information
- Landing Page Design Best Practice
- Lessons from Oli Gardner
- Examples
- Social Media Imagery Best Practice
- Learnings from the Demand Gen team
- Examples
- Summary and Plan Going Forward
- Sharing
- Collaboration

3. www.aamplify.partners 4
Lunch & Learn – Landing Page Sessions
https://unbounce.com/lp-sessions/

4. www.aamplify.partners 5
Lessons from Oli Gardner: Landing Page Design (Desktop & Mobile)
• 5 essential elements of a landing page:
• 1) Value proposition
• 2) Hero shot,
• 3) Call to action (form),
• 4) Benefits
• 5) Social proof.

5. www.aamplify.partners 6
1.
3.
2.
4.
5.

6. www.aamplify.partners 7
Lessons from Oli Gardner: Landing Page Design (Desktop & Mobile)
• Make all numbers in mobile landing pages click-to-call
• Every mobile segment/frame needs to say something useful and the user needs to
understand what’s required of them within that frame.
• You can hide content blocks in mobile version without affecting desktop version - not
everything that looks good on desktop looks good on mobile.

7. www.aamplify.partners 8
Mobile scrolling

8. www.aamplify.partners 9
Lessons from Oli Gardner: Landing Page Design (Desktop & Mobile)
• Use subdomains to make the URL of a landing page read like a call to action.
E.G. join.unbounce.com
• Make sure there are no links out of the landing page - no footer links etc.
INCLUDING social share buttons!
• But adding to the form confirmation box could be a good way to encourage
sharing, after you’ve got the person to do the task you want them to do.

9. www.aamplify.partners 10
Lessons from Oli Gardner: Landing Page Imagery
• The hero shot on an eBook landing page
should be the eBook
• Any other images should not be used
without an annotation or caption.
• Help the reader understand what
they’re looking at and how it relates to
your value proposition - otherwise it
adds no value.
Could add a caption

10. www.aamplify.partners 11
Lessons from Oli Gardner: Landing Page Imagery
• Design match: matching
the visual component of
an ad to the landing
page - making sure the
imagery is carried
through from the ad to
the page.

11. www.aamplify.partners 12
Lessons from Oli Gardner: Landing Page Video
• Video testimonials win by 22% over text quotes (Unbounce tested)
• Designing an effective video - 5 things you can do to increase engagement rate:
1. 540 x 380px is the ideal size when embedding in a landing page
2. Keep video above the fold
3. Caption full of intrigue in close proximity to the video to encourage people to play the video
4. Play button needs to be in a high contrasting colour so it stands out and the user can see it’s a video
and they’re supposed to play it
5. Design the preview card so that it has a captivating image
• Videos need captions telling people why they should watch/why they should care.

12. www.aamplify.partners 13
Lessons from Oli Gardner: Landing Page CTAs & Forms
• Attention Ratio: The more links you have in an email or on a landing page, the less likely people will click on the link you
want them to click.
• Watch the use of inline form fields – content disappears when you start entering in your details. Check out this awesome
work around.
• Make CTAs really clear as to what the person is going to do/what’s going to happen next - be specific and highlight the
benefit e.g. “get my fast and free roof quote” vs. “get a quote”.
• If you’re going to get in touch after form submission, specify how long this will take
• 3 things you can do after a form is filled in:
1. Show an alert message
2. Go to a URL
3. Modal “lightbox” confirmation dialogue (Oli’s preferred method)

13. www.aamplify.partners 14
Show an alert message
Form reload

14. www.aamplify.partners 15
Go to a URL
Page reload

15. www.aamplify.partners 16
Modal lightbox confirmation box

16. www.aamplify.partners 17
Lessons from Oli Gardner: Landing Page CTAs & Forms
• Lightbox should have a clear anatomy:
1. Confirm success of form being completed
2. Provide instructions or a link for accessing asset
3. Provide a next step CTA that’s closely related to the asset they’ve just downloaded and adding extra value
• Make sure all forms are encapsulated and CTA stands out amongst the rest of the copy on the landing page (colour and
contrast are good ways to achieve this). Match headline and CTA colour so people look at these two things first.
1.
2.
3.

17. www.aamplify.partners 18
Lessons from Oli Gardner: Landing Page Copy
• Forms need to introduce themselves – keep this in mind when writing form headings
• Email subject line has one job > open the email. The email has one job > get you to click the
CTA to landing page. You can put all your details on the landing page but keep the email
content short and focused!
• Message match: how closely related your landing page is to the ad you clicked to get there.
Headline match across ads and landing pages reduces the bounce rate.

18. www.aamplify.partners 19
Message Match Example

19. www.aamplify.partners 20
Lessons from Oli Gardner: Landing Page Copy
• If you’re hyperlinking text to a landing page, make sure the text is a CTA in isolation - e.g. “Get
the…” or “Download the…’, don’t just hyperlink the title of the asset
• Information hierarchy (the order in which you tell your story) needs to link in with attention
driven design to ensure people read information in the order they’re supposed to.
• The optimal width of a paragraph is between 65 and 70 characters – about 15 words. Keep
paragraphs narrow so people can have an easy reading experience.

20. www.aamplify.partners 21

21. www.aamplify.partners 22
Landing Pages: Other things to keep in mind
• Buyer Personas
• Who are you targeting?
• Where are they in the
sales funnel?
• What do you want them to
do? I.e. what is the goal of
the landing page?
Awareness Stage Interactive Content Types:
The buyer acknowledges and communicates
signs of a problem or opportunity. They are in
“research mode” and are looking for vendor
neutral information.
• Polls/Surveys
• Self-Assessments
• Knowledge Tests
• FAQ interactive questions
• Interactive Infographics
Evaluation Stage Interactive Content Types:
The buyer has specifically outlined and named
their problem or opportunity. They are working
to understand all of the available approaches
and methods to solving their problem or
opportunity.
• Persona Assessments
• Interactive Case Studies
• Videos
• Mini interactive demos
• Interactive / journey eBook
Decision Stage Interactive Content Types:
The buyer has defined their strategy or
approach. They are researching solution and
product to make their final decision.
• ROI Calculators
• Galleries
• Product Pickers
• Surveys

22. www.aamplify.partners 23
Landing Pages: Other things to keep in mind
• Pages need to be fast. Every
second it takes to load is a 7%
drop off. Ideal load time 3
seconds or less.
• Base the amount of information
you request with the value you
provide.
https://cdn2.hubspot.net/hub/53/file-2217032450-jpg/00-Blog-Related_Images/Should-I-Gate-Content-Flowchart-HubSpot.jpg?t=1505854298146

23. www.aamplify.partners 24
How can some of Oli Gardeners landing page tips apply to social media image design?
• Design match: matching the visual component of an ad to the landing page - making sure
the imagery is carried through from the ad to the page.
• This means you need to carefully pick the hero image of the landing page (which
should be the asset), as this will need to be the focus of social imagery as well.
• An image should not exist without a caption, otherwise it provides no value.
• BUT there are exceptions – depends on the social platform.
Social Media Image Design

24. www.aamplify.partners 25
• Shared image size: 1200 x 900
• Shared link preview size: 1200 x 628
• Image text cannot exceed more than 20%
(use this tool to test your images). This makes
it tricky to add captions to imagery.
• Good way to get around this is making use
of the ad headlines to incorporate
CTA/value proposition
Social Media Image Design - Facebook

25. www.aamplify.partners 26
• Sponsored image size: 1200 x 627
• Company updates image size: 1200 x 627*
• Shared link preview size: 180 x 110**
• Don’t tend to use this – large image more engaging than
small image surrounded by a whole bunch of text.
• No restriction on text in imagery
• Imagery of people tend to perform better but generic stock doesn’t
work
• Recently we’ve found adding a CTA in the image to be quite
successful, especially when it’s in a contrasting colour.
Social Media Image Design - LinkedIn
*https://www.linkedin.com/help/linkedin/answer/70781/image-specifications-for-your-company-pages-and-career-pages?lang=en
**https://blog.hubspot.com/marketing/ultimate-guide-social-media-image-dimensions-infographic

26. www.aamplify.partners 27
• Lead generation card image size: 800 x 200*
• Timeline image size: 506 x 253*
• 2:1 ratio, minimum size is 440 x 220**
• Can tweet up to 4 images at one time
• No restriction on text in imagery
• Good opportunity to use text as a way to
capture attention/add in CTA/add in value
proposition
Social Media Image Design - Twitter
*https://blog.hubspot.com/marketing/ultimate-guide-social-media-image-dimensions-infographic
**https://sproutsocial.com/insights/social-media-image-sizes-guide/#twitter

27. www.aamplify.partners 28
Thanks!
Have any questions? Give us a bell
Email Us : mlees@aamplify.co.nz
Visit us : Imperial Building, Level 4, 44 Queen Street
Call : +64 21 139 3368