Guide to Creating Landing Pages

Purpose of a Landing Page

Landing pages are used to market to visitors an overview of a topic or theme and function as means for them to take an action. 

On nature.org, we use landing pages to promote actions such as How to Help, provide overviews about Who We Are, drive awareness around Our Priorities, and share information from chapter programs and regions of Where We Work.

In this guide, you will learn best practices around how to construct your landing page that takes into account content strategy, optimal user experience, page layout design, and components that can be used on the AEM landing page template.

Below are listed five key sections that can help you plan and strategize an approach to creating and building landing pages:

1 - Framing a clear content strategy

2 - Structuring the landing page

3 - Building a good landing page layout

4 - Avoiding bad landing page layouts

5 - Using components in Landing & Campaigns pages

Every build of a landing page should start with a goal. To help define the goal, consider what exactly you’re trying to have your landing page solve for.
 

Start evey page build with a content brief the outlines the following details:

• What is the goal of the page?

• What are the call to actions?

• Who is your target audience?

• What would you like users to do?

• What do you expect success to look like?

Like a narrative, the structure of a landing page should open with a beginning (header) and close with an end (footer). In between is the body that represents the main content of the page.

To understand how to best construct a page, follow the inverted pyramid format: provide most important information at the top and increase in detail the further the story progresses.

1. The head - Most prominent information

The purpose of the head is to offer a framing to the user of where they are and what they should expect to see on the page. This area should include the navigation header, hero with a clear header text, and introductory messaging. This area could also function as a call to action given this is the most highly viewed area.
 

2. The body - Main content

The body if where you position the key content you want users to explore or learn more about relating to the topic of the page. The content in the body should add context and expand on the goals of the page. The body is where you would add call out feature blocks, videos and call to action links, and supporting details.
 

3. The details - Related information

The details should be positioned towards the end of the page where users who make it far enough down would be presented with further information. This is where related articles or content would be best situated.
 

4. The tail - Footer

End the page with takeaways for the user, whether it’s providing additional resources, download links, email sign up, or a call to action to navigate them elsewhere like a related page or its parent page. The page footer would be the very last item users encounter on the page. 

Here are the fundamental design strategies to building an effective landing page layout:

1. Show a variety of components

Break up your content by using a variety of different components to vary the layout of the page. This will help guide the user through content that appears digestible and visually engaging. See more about how chunking your page content could better optimize the user experience.

2. Include clear call to actions across the page

Clear and meaningful CTAs could deepen the user’s journey as well as help you achieve your desired goals for users to accomplish. Call to action goals for users could include: building their awareness, engaging with content, signing up for newsletters, downloading resources, or getting involved with your mission.

Introduce call to actions throughout the page with clear messaging as to what the linked page entails. Always frame every call to action with “What value is this call to action serving the user and the goal of the page?”

3. Keeping the page organized and succinct

It’s natural to feel compelled to try to fit as much as possible on a page because you want your user to get as much information as possible before they bounce off. Overloading the page, however, can also mean leading to overloading your visitors with information that they’re unlikely to retain.

Organize your page with key sections and goals for each section (see Inverted Pyramid above), and keep your content succinct. If your landing is serving to present distinguished sections, consider using Tabs Container (C19) to section off different sub pages. Or, use Anchor Links (C56) to allow users to jump across the page.

Keep in mind that most users are likely scanning your page. How can you get information across as clearly as possible? 

To ensure your layout is dynamic and engaging, we advise to avoid constructing your layout with these examples:
 

1. Avoid making your page too text heavy.

Text heavy pages will deter users from staying on your page. Too much written content can overwhelm users, making it difficult for users to remain fully engaged and interested. Remember that landing pages are not article pages. If there is a lot of information to be formatted on the page, consider using components that can hide and expose content at the users’ will, such as the Image and Text Expansion component (C89), Interactive Tiles (C133), or Accordion (C54).

2. Avoid making the top of the page too vague or too detailed.

Make the intro of the landing page clear with a non-ambiguous header. Having a short descriptive overview could help make clear the purpose of the page. However, including too much detail at the top could detract users from furthering their journey on your page.
 

3. Avoid stacking the same components on top of one another.

Use varied components to display your content to ensure the page layout feels diverse and dynamic. Unless you’re using components that are meant to be grouped as a collection, such as Feature Content Blocks (C13), finding other component variations can help make the call to actions stand out more prominently.
 

4. Avoid stacking full bleed image based components on top of one another.

White space can help give the page a sense of visual break. When the page is filled with edge-to-edge full bleed visual components could make the page feel heavy and clustered. For instance, avoid stacking a Full Width Image (C10) immediately above or below a Full Bleed Featured Content (C13).

The Landings and Campaigns page template has a large number of available components and six template regions.

The header and footer regions have inherited components in place already. The remaining sections — Hero, Intro, Body, Ending — are where you can configure components accordingly. Each section has certain allowed components. Click into the template section tabs to find which components are available under each section.
 

*Important Note:

Open container component can only be used with approval. Submit a digital request for usage of the component.

Filling out the Landing & Campaigns page properties:
 

• Audience tag:  Use ONLY if you are creating a campaign page with a specific and exclusive audience in mind that you are targeting.
• Content Type:  Required, single select. Choose the content type that most accurately describes your page.
• Company Tag:  Generally do not use. These will be largely set up at launch. Specific pages (such as Careers) and teams (such as the Magazine) will have company tags to identify their content.
• Geographic Location Tag:  Multi-select. Required. Select only 1.
• Places we Protect Tag:  Unlikely that this will apply. Use only if the campaign is about a specific place we protect (e.g. a land deal). Do NOT tag all the places benefitting from a campaign
• People Tag:  Do not use.
• Topic Tag:  Tag the main topics of the page only. Include the top 1 or 2 tags.