Drafting a website site map

Creating a visual site map helps everyone involved see the scope of the project and helps to get people discussing the project at a Macro level in 1 or 2 pages.

What is a site map?

A site map is a list of pages of a website. There are several meanings for the term Sitemap:

  • In Web Design, it means pages organised in a document showing their hierarchy and structure to help with the planning process.
  • In Web Site Management it refers to a HTML page on the site that lists the pages of the site in a hierarchical format to help users find pages within the site.
  • In Search Engine Optimisation (and others) it means a structured XML format document that tells search engines about the pages of the site, their relationships and where to find them.

For this planning phase of your website, it is the first type we are referring to. Typically it will be a visual diagram.

Why Use a Site map?


why-sitemap

One of the key roles a sitemap has to offer is to help everyone involved in the project, especially your main stakeholders, have a simplistic way to gauge the size and scope of what is being undertaken.

When trying to plan how to achieve goals, establish where your must-haves fit in, how much content you will need, what other resources will be required and how to get the necessary budget, having a way to provide size, scale and purpose in a simple one or two-page document is critical.

Not everyone in the decision-making process wants to read through pages of specifications and field lists. Many want to know the macro level, coupled with some other critical questions, so they feel they understand what is being proposed.

If you think about a list of directions compared to the actual route drawn on the map, one is used to get an overall picture of how, while the other is applied in the detail of what you need to do at any given moment. The sitemap summarises at the top level the project and key elements. It's the zoomed view of the new site.

It also is a great initial checklist and way to get initial thoughts on paper to build from.


How to create a site map

There are several ways to draft a site map either as a simple list or as a flow chart (diagram).

Which method you choose might be determined by how you best work, and in many ways both have a role to play in identifying the types of pages and areas of your site you are going to need.

You will find it easiest to start creating the top level as a chart and then depending on the depth of the site progressing to a list, before producing a final set of flow charts.

Let’s step through how these work.

For the example, we will show you of how to chart a sitemap we will use http://draw.io (a web-based diagram app).


Flow chart site map

Start your Site map

Let's work through the site map for a hypothetical Legal Practice.

  • Open the app and choose which method for saving your files. Typically we would use Dropbox. The App can't update files if you choose the Device option and it can be annoying saving many copies. Dropbox manages all this nicely.
  • Select Create New Diagram.

Note: In the examples shown we are working in a simplistic way of connecting information we know we want to have on our site and translating that into our site map and scope. There are many expanded and advanced areas that can be covered in choosing the information architecture and other needs. For this example, we want to provide a practical how-to for everyone rather than just advanced practitioners.

Background:

Our legal practice looks after some Personal Law and some Commercial Law. It’s a location-based practice with a team of 20 and covering a broad range of each legal services.

This summary of our business gives us some basic product/content groupings. We also have a pretty good idea about some basic pages most companies would need, e.g. a contact and locations page, some form of About Us company page, Legal docs e.g. Privacy policy etc.

For many companies starting a site map will work like this from what we already have an idea on or other examples. It’s a starting point that helps you group what you already know which we can improve on and expand in steps as we move through the process.

It’s much easier to see what needs improvement when you have it laid out in front of everyone.

Let’s lay these pages down in our Charting Software to help us visualise what we are working with.

  • First, make sure you have selected Landscape in the Paper Size options in the right-hand column.
  • Drag in the rectangular boxes from the left-hand objects panel
  • Type the name of the box. Do this for all the pages you are going to add now.

Your starting site map will look a little like this:

Don’t bother connecting the boxes yet (with lines and arrows), typically you will end up changing your mind a few times about what pages live where, and the hardest thing to do is these connections, so leave them until last.

In advanced sessions, this process might be down with post-it notes in a meeting room which allows you to build out all the pages and shuffle them until everyone agrees, then create the sitemap. Pen and paper work well too.


The Obvious

Knock over all the super easy stuff up front as well. That is the pages you are relatively sure will need to be on the site based on your current site or competitors or what you know to be good practice.

Once you see the sitemap built out you will be able to determine if they still make sense and keep them, modify them or remove them quickly later in the design process.

Try to remember that when looking at your existing site and other people's sites it isn't about copying, it's to give you an idea to make decisions from. Always ask what's the purpose for every page you add.

We want you to be thinking through the ‘best’ structure for your new site, not just re-skinning what you already have (see common mistakes).

So our next version would start to look a little like this:

Here you can see the extra pages on our site added.

Legal-Practice-less2

Easy so far. That's quite typical of how you would start drafting a new site.

Expanding Your Offering

As we break out the legal services that we offer they can be added to the sitemap as subpages under Legal Services.

As an example:

sitemap-3

These outline the topics or subcategories of our services. They match up pretty well to the content we already have in online and offline documents and importantly are the subject matter areas we offer to our clients.

Ultimately this is the offer we believe we have that we present to our prospective and current clients.

At this point, we aren't sure how much content we will have per topic area, and it's possible as we continue through our planning process that some topics will end up with additional content.

For example, we aren't sure if the Family Law page might have subpages for Divorce, Pre-Nuptials, Child Custody or whether this will all live on the one page. We may not know this entirely until after the Research phases are finished and content discussions.

At this point, we are trying to cover off all the key base pages/topics we know we need to cover.

We haven’t dug deep into content architecture, depth of content topics or other related information needs. We will address these progressively through the following stages of our scope.

This phase is about learning how to create the basic sitemap and updating it incrementally through the process until we can create the final site map version.

Here is our initial sitemap that will use in the next stage of our scoping process.

Legal-Practice-less1

Below is an example of how this would look if you choose to do it in more of a list format using something like Excel (or Google Sheets).

sitemap-list

There are some other final steps we need to take to finish off a sitemap. These steps tie in with the next steps in our scoping process so we will complete the numbering and connecting steps once we are sure everything has been added.


BUY the entire guide as an ebook or paperback

 

Buy the Guide

 

Available on Amazon, Kobo, iBooks, Barnes & Noble and other great bookstores

Free access to the Website Planning Guide Facebook Group with any version you purchase