Tips for Landing Pages
A website can contain multiple landing pages. Typically, your primary landing pages are linked to in your site navigation. However, large sites may have more landing pages than just these. Landing pages serve as a table of contents for sections of your website and are often rich in imagery.
Why Landing Pages Are Important
The Function of Landing Pages
Think of a landing page as the table of contents for a section of your website. Landing pages are a very helpful way for some people to navigate through websites, leading them to the content they are interested in through a series of on-page choices.
Landing Pages Are the Default
Landing pages are typically the default page in a section of a website, sometimes called an “index page.” This means they are the default page a web browser will load when they get a partial URL.
For example, if you enter “tamu.edu/about” into your web browser, it will automatically assume you want to load the default page and will direct you to https://www.tamu.edu/about/index.html.
Because of the way web browsers work, it is critical that every folder on your website has an index page.
Content Strategy for Landing Pages
Write to orient readers within the website
Often, landing page visitors arrive directly on that page from a search engine or other means, not from your homepage. To help visitors understand where they are within your website, the page’s primary H1 heading should match (or nearly match) the navigation item that leads to that page.
Writing for wayfinding means writing straight-forward headings like “How to Apply” instead or more “marketing” headings like “Begin Your Journey.” Straightforward headings also help with search engine optimization, as they are more likely to match search queries.
Write teasers of all content in a section
The primary function of a landing page is to give readers an overview of the content that’s available in that section of a website (as opposed to having lots of unique content). Pages that are in the same section (or folder) as a landing page are referred to as that page’s child pages.
In order to preview content on child pages, we recommend using “teasers” — small pieces of content with at least a heading, description and links. These are often displayed using various types of card groups. A teaser should have enough information to make it clear to a reader whether or not the information they seek may be on that page.
It also may help to write teasers to related content that doesn’t live in the same section as the landing page. This is especially useful for linking to pages that could logically live in multiple places on a website.
Write to make your content easy to read
When writing for the web, it’s important to help website visitors know what they want to read — and what they don’t.
- Use helpful headings: Break up content with helpful headings that clearly indicate what type of content is beneath them.
- Write helpful page introductions: Give a clear overview of the type of content a reader will find on the page or what the page’s main topic is.
- Write descriptive link text: It should be clear where a reader will go if they click on the linked words without having to read anything else.
- Group like content together: Use components to visually and semantically group related content.
Choosing the Best Page Template
When choosing a page template for a landing page, it is important to consider the content available for that page and its relationship to other pages.
Page with No Sidebar
This template is ideal for top-level landing pages because it allows you to use more media-centric and visually interesting components, including the landing page header. This template allows you to use more media-centric and visually interesting components to convey your message than pages with sidebars.
See example page with no sidebarPage with Sidebar Menu
This template may work better for deeper landing pages that have a lot of sibling pages, or related pages that share a parent topic and are located in the same folder. The inclusion of the sidebar menu adds another layer of navigation to the page, making it easier for readers to find related content.
See example page with sidebar menuComponents to Consider
These Aggie UX components are some of the most used on landing pages. Use these components as a starting point for designing your page layout using the content you have written.
-
Landing Page Header
This header style is intended to only be used on top-level index pages that are linked to in the navigation. It features a large background image, and should only be used when you have high-quality imagery to use here.
-
Standard Page Header
This header style can be used on any page and is very flexible. This is often more appropriate for landing pages deeper in a website or for websites that don’t have a lot of high-quality imagery available.
-
Cards & Card Groups
A card group is a collection of modular cards with an optional section intro. Cards have a variety of media and CTA options and are a great way to give previews or teasers of content on different pages.
-
Callout
A callout highlights one piece of content with one or two links, displayed as a linked heading, button(s) or link(s).
-
Collection Feature
A collection feature has a heading and small description area next to a larger “collection” area where one of the following options is displayed: icon list, link list, description list or factoids (default or inline layout).
-
Media Feature
A media feature focuses on media — an image or video — as the focal point. It requires a heading and description, and can have a CTA, displayed as a link or a button.
-
Link List Collection
A link list collection is made up of 1–4 lists with linked list items. You can use a section heading and description to contextualize content. Links in a link list collection can have descriptions and nested links.
-
Split Feature
A split feature contains two or three cards over a background image. The cards can either be featured cards or linked cards.
Tips for Other Page Types
Most pages in a website can be considered standard pages. These are the pages that house detailed content on your site, and can either have no sidebar, a sidebar menu or on-page navigation.
The homepage of your website is the first thing people see when they visit your site by going to your URL or website address (i.e., marcomm.tamu.edu). Additionally, sometimes websites contain microsites that have their own homepages.