The Comprehensive Guide to Sitemaps

By Liza Mock on Nov 22, 2017 in wireframing, sitemap, website build

A sitemap is as crucial to planning a new website, as a roadmap is to planning a cross-country trip. Without it, both your trip and your user's journey through your website would be full of unplanned for and potenitally unpleasant stops.

Screen Shot 2017-10-17 at 12.25.29 PM

(Source)

A sitemap is a visual representation of your website to-be. It helps you figure out how users look for information. It's a vital step in building a functional, usable site that will take your users where you want them to go instead of X-ing out of your site in frustration.

So, whether you're building a website from scratch or planning an overhaul, you need a sitemap. Building one isn't difficult, but you have to be methodical to get it done right. From coast to coast, here's your roadmap for building a sitemap.

What is a sitemap?

A sitemap is a list or diagram that helps you plan out your website. It should contain all the pages of a website in a way that shows how the user will access them, starting with the homepage and branching out to include all the subpages. 

To get started, first create a list of all the pages you think you'll need and then turn your list into a diagram. Even the simplest visual representation, will quickly allow you to spot gaps and awkward transitions. Take this simple website as an example:

Screen Shot 2017-10-17 at 5.56.09 PM

A sitemap of animalz.co in diagram form would look like this: (The landing page is “Home” and the only category is “About”.)

Screen Shot 2017-10-17 at 5.56.58 PM

A list would look like this:

Screen Shot 2017-10-17 at 5.57.03 PM

Both are effective, but visuals tends to be more easily digestible than words, especially if you have to share your concept with somebody else.

How sitemaps help you make website magic

People use sitemaps for three primary reasons: one—to plan content. Laying out all  your website pages in advance ensures that you're giving every bit of content consideration before actually putting in the work. This step includes research, writing, getting images, overall design, and all of the other elements that go into creating a great website.

Screen Shot 2017-10-17 at 6.10.14 PM

Two—to help improve UX. With sitemaps, you can easily visualize the user journey so you can see where people end up doubling back or getting stuck.

Screen Shot 2017-10-17 at 6.13.34 PM

Three—to achieve business goals. One of the most important questions you have to answer when planning a website is what do I want visitors to leave with and how is that helping my business? By laying out what you want to put on your website and how you'll direct users, sitemaps help you keep your business goals on track.

Screen Shot 2017-10-17 at 6.16.26 PM

Planning a sitemap diagram

The first step to making a fully-functional sitemap is laying out all the content ideas for your website. At this stage, it's okay to do a huge brainstorm and think about all of the things you could ever want  — you'll have time to refine your ideas later.

Screen Shot 2017-10-17 at 1.23.16 PM

Now that you have a big list of all the things you want to include, it's time to start organizing them:

  • Identify the major categories that your website will have. Think: what will I have across the top bar or in a sidebar to direct people?
  • Identify subcategories for each major category.
  • Identify which pages fit into which subcategories.

Now, it's time to prune your ideas. At this stage, you may find there are ideas you want to put into your website that just don't fit into categories or subcategories. That might be a sign that you have to table those until a later date, another website, or a redesign that allows them the space to fit into your website. You may also find that you've got some ideas that are very similar to each other — consider lumping those together into one idea, so you don't end up with two different pages with duplicate information.

Once you have your general categories, subcategories, and finalized list of pages, you're ready to start thinking about how to actually organize your user journeys by creating a sitemap.

Building a sitemap

There's no one right way to organize a sitemap, but there are best practices to help you. The goal is to show how the relationships between pages on your site affect UX, so diagrams are commonly used because they give you an at-a-glance understanding of the relationship between all the pages on your site.

To start showing these relationships, write down your categories, subcategories and pages on sticky notes and start moving them around. This is a great way to begin, especially if you're designing with a team. Gather everyone 'round the whiteboard and get a rough idea of what your sitemap should look like. (You can also do this with a diagramming tool like Gliffy, which allows you to share your diagram with anyone.)

Once you've brainstormed a good contender, it's time to take things digital. Again, note each category, subcategory and page, but use different shapes, colors, and lines to denote the relationships between pages. For example, your homepage might be a circle, and each category might be a square:

Screen Shot 2017-10-17 at 1.37.35 PM

But don't stick to just labeling with “Home” and “Category 1” — you can also add the URL you want to use or the real title of the page. You should add any data that is going to be useful for a robust plan for building your site. It doesn't have to be extensive, but it should leave anyone with the basic knowledge needed to put together a site model.

Include a legend with your sitemap to let people know what everything means, especially if you are planning on sharing your map with customers or an outside team. Even for internal use, a legend is good practice for keeping things organized and easy to read.

Use annotations to enhance your sitemap and clarify information. Because the sitemap is a planning tool, you might have included parts of your site that will be rolled out on a timeline, or content that you are working on with collaborators. Noting things that require special consideration or planning will maximize your sitemap's effectiveness.

Screen Shot 2017-10-17 at 3.32.08 PM

An example of what a draft sitemap might look like for a product launch.

Refining your sitemap

You should have a pretty serviceable sitemap at this point, so it's time to put it to some stress tests.

  • Make some pretend user journeys. Take any user profiles you have and ask yourself how those people would navigate the site. Come up with questions customers might have and map out how you'd find the answer to that question. Where are there sticking points or unintuitive leaps? These are spots you might need to reorganize.
  • Give it to a stranger. Phone a friend who wasn't involved in making the sitemap and ask them to find what pages would have the answers to questions about your product. If it takes them too long, or if they can't find what they're looking for, take another look at those areas of your map.
  • Double check your deets. Sweep your sitemap and make sure every piece of information you need is available there in a standardized way. Are all page titles bolded? Are all your annotations in green? Did you label your legend? These things will make a big difference in legibility, especially if you share your sitemap with customers.

This should be all you need to get a serviceable sitemap for your standard redesign, product or company launch. Feel free to get creative and represent your website in a way that makes sense to you and your team. Color coding, metadata, adding design screenshots — everything is on the table, as long as it will help you work towards that perfect user journey.

Extra big sitemaps

Of course, the one case that this may not work with is when you're planning a redesign of an oversized site with hundreds of pages, URLs, and paths.

The first step is to use a sitemap generator to get the bones of your website. There are a variety of tools out there that will be able to process a list of your pages automatically.

Let's take Gliffy's website, for example. A quick sitemap of our website finds ~490 pages!

Screen Shot 2017-10-17 at 6.22.03 PM

A screencap of Gliffy's sitemap reveals pages differentiated by the <url> </url> tag.

But are all these pages necessary? One way to find out is to go through your sitemap with a fine-toothed comb and remove anything that's irrelevant. (If we recruited a five-person team to do this for our 500 page website, we'd get the categorizing done in an hour.) Do you have some blog posts from 2008 that, in retrospect, are pretty bad? Do you have some floating pages hanging around, like an old version of “About Me” from before you published your new one? Hunt these down and remove them, then run your site through a generator again.

Now that you have your cleaned up the sitemap, draw up heavily utilized categories to understand and visualize your website. For example, Gliffy's website has 457 subpages under the category “Blog”. So instead of trying to make a sitemap like this:

Screen Shot 2017-10-17 at 6.31.24 PM

You might just show this, filling in whatever categories are your heaviest-hitters.

Screen Shot 2017-10-17 at 6.33.06 PM

When you have a heavy, page-filled site, you may also choose to redesign and map your site one category at a time. After going through all the pages, it's possible that you might only be able to reasonably map out one section at a time — and that's totally fine! Just remember that you have to do your big sweep first, so you don't finish revamping the Investments We've Made section only to realize you want to include Investment Philosophy in that part of your site instead of under your Team page.

The truth of the matter is that sitemaps can and will become unwieldy and overwhelming if your site is too big. Pruning outdated pages and using categorical organization will help you better manipulate your site's data.

Build websites that work

Sitemaps help you build websites that work because they're just that, maps. They provide a blueprint you can build off of and directions for everyone involved in the project.

By taking the time to plan and streamline a sitemap, you're helping your business build a website that will actually work for users and get you closer to your business objectives. Gliffy offers design tools that are perfect for sitemap visualization, and a free trial to get you started today.

Draw Sitemap