Welcome to the second installment of the iNoobs’ Process of Designing a Website series (check out Part 1 here). That last sentence makes me feel like I should be taking off my jacket and shoes and slipping on a sweater like Mr. Rogers.
Today we’ll be discussing the creation of a sitemap. Before we get there, let’s recap the total 8 step process:
- Develop site plan – Use Case Development (optional)
- Create Sitemap
- Content
- Wireframing
- Design
- Technical
- Testing
- Launch
What is a Sitemap?
Visual Sitemap
You’ve probably heard the term used before, and I can promise you’ve seen a link to “sitemap” on every major website you’ve visited. A sitemap is simply a list of all of the content on your site. Often times websites will have a link at the bottom of their site called “sitemap” as it’s very beneficial from a user and search engine marketing perspective. For the purpose of your first exposure to sitemaps we’ll ignore that for now and instead concentrate on them from a website planning and execution perspective.
A sitemap is a break down of all of the sections, subsections, pages, and information on your site.
Here’s a very simple example of a business website’s sitemap:
This business is involved in the home maintenance industry.
- Home
- About
- Services
- Lawn Care
- Pool Maintenance
- Contact
And we’re done!
The above example has 6 total pages, and as you can see I indented “lawn care” & “pool maintenance” implying that these are “under” services – which they are! In technical speak we could call “services” the “parent” and “lawn care” a “child.”
I like to create a sitemap in two ways – first is an overall sitemap – which will feature every single element I can think of or know about and how it fits into the site structure (including some marketing elements). After that first step is complete I go back around and ask myself, somewhat from a design perspective how will users navigate to this content? I then create another sitemap directly underneath that one with a breakdown of all of the pages from a navigational perspective.
More Sitemap Examples!
We were just working on a sitemap for a client with a large website. This client is in the commercial bathroom products industry and specializes in the online sales of Hand Dryers (I know who would have thought!)
Here’s what we came up with (this is an abbreviated example):
Page Sitemap
- Home
- About
- Locations – /locations/ – this page will show each of the organizations’ locations, along with a Google map.
- History
- Mission
- Management/Personnel
- Brands/Lines – /brands/ – list out each of the manufacturer brands provided by client, including a brief description and logo to establish a connection with our clients’ customers and to possibly rank for brand names.
- Service/Support
- Awards
- Service History
- Testimonials
- Support Request
- Hand Dryers
- Hand Dryer Brand 1
- Hand Dryer Model 1 /hand-dryers/hand-dryer-brand/model/ – Will display the individual product, pictures, and information.
- Hand Dryer Brand 1
- Commercial Bathroom Partitions
- Water Fountains
- Professionals – /professionals/ – Will address the specific needs of the various customers’ of our clients’.
- Architects
- General Contractors
- Contact
- Terms
- News (aka blog)
- Categories
Sitemap Navigation:
Top Navigation – Primarily for contact information and to address exisiting customer questions, status of orders, etc.
- Home
- About
- Support
- Contact
Main Menu Navigation – Primarily for navigating potential customers to products (will feature drop down menu):
- Hand Dryers
- Commercial Bathroom Partitions
- Water Fountains
Footer Menu – listing of all top level sections on the sitemap as well as “terms” and “sitemap” page
Here I broke out the initial sitemap, and as an example revealed the location of the page/section as well as the goal for that page. The complete version of this is many pages long, where each page is detailed in depth, and assigned goals. With these two elements (the main sitemap & the navigational sitemap) we’ve defined a bunch of things:
- What content do we need to produce?
- What is the goal of each section and page?
- How is the site structured, from a usability and marketing perspective – there are very distinct rules and best practices regarding the naming of your site, use common sense and you should be fine (although a more in depth discuss is warranted for another article).
- What menus will our design need to accomodate and what will be on those menus, and how will they operate/direct users to content?
All of these have been answered.
This concludes the second part of the iNoobs’ Process of Designing a Website series. In the next article we’ll be discussing one of the key elements that was just concluded with the sitemap – content!
If you have any questions or suggestions regarding the creation of a sitemap please leave a comment and I’ll be happy to help!
Zach Katkin
Latest posts by Zach Katkin (see all)
- How to Write AdWords Ads – March 20, 2013
- 5 Extremely Useful WordPress Plugins – March 13, 2013
- Basecamp 2013 Review: Project Management Tools for Small Businesses – March 1, 2013
- Apollo 2013 Review: Project Management Tools for Small Businesses – February 15, 2013
- How a Few Simple Tools & Techniques Can Help You Write Better and Grow Traffic – January 30, 2013
Sitemaps are great for the visitors. They are perfect route maps for very content heavy sites, prevents un-neccessary clicking back and forth and saves a bundle of time!
[...] third installment of the iNoobs’ Process of Designing a Website series (check out Part 1 here and Part 2 here). Some people say “content is king” others say “content is queen” personally I don’t like [...]
[...] 4 of Inspired Magazine’s mini-series on the process of designing a website (check out Part 1, Part 2 and Part 3). In our day-to-day iNoobs series we write about many of the beginning technical [...]