The Art and Science of Sitemaps

10/18/23

While no two custom websites are the same, there’s one core component they all have in common: a sitemap.

At BrownBoots Interactive, we turn our attention to the sitemap early in a project during the Discovery & Planning Phase — before we push a single pixel into the layout. That’s because the sitemap will serve as a guide going forward, a reference to help us make strategic decisions throughout future phases of design, content curation and development.

To be clear, we’re not talking about an XML sitemap, which is a specially formatted file to help search engines index a finished/live website. Rather, we’re discussing an important document used by the agency and our clients throughout the construction of the website.

A sitemap doesn’t have to be complicated; in fact, a straightforward, streamlined approach is preferred whenever possible. But before we get into our recommendations for crafting a capable sitemap, let’s take a moment to define what a sitemap is — and what it isn’t.

What is a sitemap?

Simply put, a sitemap serves as a catalog of every page that is part of the website.

Whether using sophisticated software to weave a colorful web of intertwining entry points or a simple bulleted outline, most sitemaps not only list each page, but also explain the relationship among them. All pages fall beneath the homepage, and those parent pages might have children — and possibly grandchildren — pages of their own, and so forth.

Sometimes sitemaps contain other notes, such as which pages will not appear in the main navigation (for instance, marketing splash pages or a maintenance page) and/or external links that will appear in the header and footer.

We have found, over the past two decades, that the more weight a sitemap is expected to bear, the more likely this foundational document is to crumble and become out of sync with the progress of the project. For example, listing out the individual elements or information that will appear on each page does not belong on a sitemap. (However, after final approval of the planning document, the sitemap can be modified to assist with content-gathering efforts.)

Therefore, we recommend fashioning a sitemap that accomplishes these important tasks only:

• Inventory every page of the website.
• Establish the organization/hierarchy of the navigation.

Why is a sitemap important?

Every website has a sitemap, but a haphazard or incidental approach to adding pages is likely to result in a difficult-to-navigate website. By taking the time to plot out a visitor’s approach to and typical journey through your website, you are more likely to end up with an intuitive structure.

An optimally organized website empowers your visitors to easily find what they are looking for.

Furthermore, the sitemap could — and arguably should — be a page itself, an outline of hyperlinks for visitors to get a comprehensive glance at everything your website offers. (Here’s an example: https://brownboots.com/sitemap.html) The sitemap page provides an alternate means of navigating your website, accommodating a wider audience and their preferences.

In this way, the sitemap continues to be a useful tool far beyond the launch of the site.

Tips for making a strategic sitemap

Arranging the pages of a website sounds simple in theory, but the exercise resembles solving a logic puzzle wreathed in creative exceptions — an unlikely marriage of art and science.

We start by following a few straightforward rules:

Each page must have a unique name.

For a variety of reasons that include search engine optimization and elevated clarity for your human audience, we don’t let pages share the same name.

That means, for example, the sitemap can include a page called “Personal Checking Account” and one named “Business Checking Account” but not two disparate “Checking Account” pages in two different sections of the site.

Each page must exist in only one place in the navigation.

Here’s where things can get tricky. Because some topics span more than one category, it can be tempting to scatter multiple iterations of the same page throughout the sitemap. On the surface, this might sound strategic, but there are a variety of reasons why prolific redundancy can be a bad idea. (Read this case study to find out why!)

For example, instead of adding the “Reorder Checks” page under “Personal Banking” and “Business Banking,” it might be better to position it under “Resources” and then link to it from every checking product page.

Of course, if the content is distinctly different for reordering checks for different types of accounts, you might be able to justify two separate pages: “Reorder Personal Checks” and “Reorder Business Checks.” More likely though, the appropriate information can be included on each product page without funneling traffic elsewhere. Having said that, including a blanket “Reorder Checks” page, located under “Resources,” provides visitors with a helpful landing page if searching for that particular term.

This is where creativity comes into play. A website’s specific content and calls to action will determine how best to handle such situations.

External links should not be interspersed with internal links.

Surprises are nice when they involve friends and a birthday cake. But visitors to a website don’t want to end up in unexpected places when they click a link. Generally, the main structure of the sitemap should contain internal links only.

Mixing links to external sites or PDFs or other surprise destinations with the site’s primary navigation doesn’t do your visitors any favors. Those types of links should appear in utility navigation or in footers or on subpages — preferably with an arrow or some other visual element that tells the visitor they will be leaving the website, followed by the best-practice speedbump message.

When in doubt, investigate and revise.

If there doesn’t seem to be a natural place for a page to “live,” explore similar websites to see how they handle the situation. User testing — which can range from simply asking a small group, “Where would you expect to find X?” to more in-depth exercises — can also unearth valuable insights.

You might also discover, during the lifespan of the project, that additional pages are required or, conversely, some pages aren’t needed after all. Any time you make these decisions, update the shared sitemap document so that everyone is on the same page (so to speak) and the consequences of the changes can be evaluated immediately.

After the site launches, you might find that some rearranging of the website hierarchy is in order. Wonderful! Analyze the data and edit accordingly.

Flawed brilliance and beauty

While you could get mighty close, you’ll never create the universally perfect sitemap because every visitor comes to your site with different expectations, experiences and habits. Whereas one person might expect to find your blog in the “About Us” section, another might check under “Resources.”

Fortunately, human beings have flexible brains. If visitors don’t find the desired destination on their first try, they will look in the next-most-logical place. Similarly, if a topic is tucked under a lower-level page and therefore not visible in the drop-down navigation, the visitor will either find a reasonable starting point and drill down to the content or chart an alternate path, such as the sitemap page or, more likely, the site-search box.

As long as you can create a sitemap grounded in reason and garnished with concessions to suit messy, real-world situations, you will have a sitemap — and resulting website — that serves your core audience.

At BrownBoots, we’ve presented first-draft sitemaps that were immediately approved by clients. More often, there is additional back and forth, as the client provides keen insights and specific goals that require modifications to Plan A. After these tweaks, we end up with an agreed-upon blueprint for design, content and development.

All of this might seem like a lot of attention invested into what amounts to a few pieces of paper, but the result is well worth the work — an interactive masterpiece!

Let’s make a masterpiece together!