Everyone hates getting lost. It’s nice to know where you are and what is around you. Unexpected dead-ends and one way streets drive us crazy! Therefore we use maps… (well at least we did a few years ago, now we use a Sat nav… but the sat-nav is based upon a map… !) Anyway – for the same reasons that we use a map to travel around town, web designers often ask for, or help their clients to, develop a ‘site map’ for a website they are being asked to produce. These ‘site maps’ help everyone know where each page on a website will reside in the websites navigation. A site map is therefore essential at the start of any website project.
Although site maps are actually quite simple, for people who are not working with websites every day the concept can initially be quite hard to grasp. We thought we would outline some basic principles of the site map to help anyone out there who is scratching their head over how to draw up a site map for their website…
The ‘Family Tree’ Site Map
A site map can be understood like a family tree. All the pages on your website are like one big family – each page is related to another page in some way and the site map shows how this works.
Pages in a website can be termed ‘parent’ pages or ‘children’ pages or even ‘grandchildren’ pages. As soon as the family tree concept is understood, site maps become simple.
At this point it might be worth noting that site maps deal with the pages on the website – not blog posts – which are completely different. Your blog posts will all sit inside your ‘blog’ or ‘news’ section and do not need to be mentioned on your site map. Pages are used for information which is timeless about your company e.g. the ‘About Us’ page, or ‘Our Services’ page etc. Blog posts are used for latest news updates about your company / products etc.
Working Example Of A Site Map
To illustrate how a site map works we will look at the Attitude Design website.
Here is the homepage – this is separate to the parent pages but on the same ‘level’. Think of it as the place where all the parents hang out.
The parent pages are all the main pages on the homepage navigation – in this example, this would be: Portfolio, About, Services, Journal and Contact.
Let’s have a look at how the site map would look so far:
“Children” pages are any pages immediately inside the “parent” pages. Here we look at the “children” pages for this website example:
Journal does not have any “children” – as there are only blog posts inside this area and the contact page is a ‘stand alone’ page – with no inner pages.
Now let’s have a look at how the site map has developed:
If any of the inner pages (or children pages) such as “Branding” had inner pages of their own then these would become “grandchildren” pages. In this example there are no “grandchildren”.
The number of “family generations” in a website affects the number of clicks a user has to make to reach a certain page. In this example, a user will only ever have to click twice to reach the deepest level of the website e.g. once on “About” and then again to reach “Testimonials”. It is recommended that a user should not have to click more than 3 times to reach any area in a website. In other words, having “great grandchildren” pages would not be ideal.
We hope this helps when you come to draw up a site map for your website.
Drafted your site map and now need a great design? Why not contact us for a competitive website quote…
Site Map Resources
Check out these great links which might also be useful to you:
- The Lazy IA’s Guide to Making Sitemaps
- 3 Reasons To Start With A Visual Site Map
- How to create a visual sitemap
- Make a Site Map of your Website with WriteMaps
- A visual sitemap