skip navigation

Give landing pages the attention they deserve

By Loren Nelson, 08/10/16, 4:30PM CDT

Share

Help readers find the content they want by organizing your site's main sections

To hear Kathy Belles tell it, the old San Tan Soccer Club website was like a restaurant menu with more pages than an encyclopedia.

“The biggest complaint we heard was there was too much information and that nobody could find anything,” said Belles, a SportsEngine Webmaster of the Week in July.   

Belles was handed the keys to her shiny new SportsEngine site for the rebranded Phoenix-based club (now called Legacy) in May. That mountain of information was transferred to the new site -- much of it stacked on top of each other in an endless scroll -- just as it was on the old site.

“Nobody is going to read through all of that,” Belles told herself.

So she went about organizing it. The result is a series of main sections that are easy to navigate thanks to Belles’ use of multiple SportsEngine page elements.

Landing pages can often be overlooked, ignored or forgotten all together when building out a new site. Sometimes, at most, they include a site map for that section.

Belles’ work illustrates how properly built out landing pages can serve as something of a road map for readers navigating through the site. 

As for those complaints about not being able to find anything, Belles hasn't heard one since the new Legacy site launched. 

"But maybe people just don't know how to get in touch with me," she said with a laugh.


HOW IT WORKS

Below are what we consider some of the best practices for setting up landing pages that help viewers more easily navigate through main sections of a site:

  1. Using the tab element
  2. Using the table builder
  3. Using photos and text

Using the tab element

In this example, Belles used the tab element to organize all the blocks of information in the About Us section. The tab element is merely a horizontal navigation system that keeps viewers on the the same page as they scroll through the information. Note: In the bottom screenshot, Belles used a combination of color and all caps text to help set off the different programs Legacy offers. It's important to employ some restraint, as Belles did, when manipulating text. If too much of it is highlighted or italicized or set off in some other way, none of it ends up having the desired impact.

Using the table builder

We've seen landing page for the Teams section built out in all manner of ways, including Belles' innovative use of the table builder. By using the table builder Belles showed both the team name (hyperlinked to the team page) and that team's coach. She built a separate table for both the boys and girls teams.

Using photos and text

Too many bland, lifeless pages are a sure turnoff for viewers. Small blocks of text combined with photos are a great way to create interest in landing pages. Belles used that playbook to build out the top of her Coaches page. Below the main photo, she used a Site Map to drive viewers to the various coaches links. Another option there would have been to add a three-column layout container and then use three Call to Action buttons to present those links. 

Loren Nelson Headshot

About Loren Nelson

Loren Nelson is Community Manager at SportsEngine. He is also the National Media Editor and has served in a variety of other customer facing and media roles since 2009.

Loren's Social Media Contacts