Visual Sitemap for your Website Design

Visual Sitemaps Tutorial

In the world of website design, there are undoubtedly several elements of our sites that seem to be there purely because they have to be. Unfortunately, the sitemap is often one such thing. Just a simple list of pages with corresponding links, aimed at being near enough a behind the scenes index, helping the user navigate through the site.

I’m going to be looking into how we can jazz up your sitemap and make it both insightful and useful to your visitors, as well as being exciting and in keeping with your overall look and feel or your website design.

View Demo | Download the files here

Finding a Sitemap Concept

As with a lot of design elements there should be two clear stages to creating a stunning sitemap navigation page. Firstly we need to come up with the concept. This can often be the hardest part, and you are only really bound by the limits of your imagination.

I have decided to create a sitemap concept for hypothetical golf club that sells both products and services online to the club members. Firstly, I would look to design the page in Photoshop, giving me a clear prototype for how your page should look. Then just as I would with other pages of my site, look for the most efficient way to code into HTML / CSS.

Visual Sitemap using CSS Example

The Sitemap Page HTML

Firstly you should create the skeleton of your sitemap, using ‘ul’ and ‘li’ tags. For my golf shop example, here is the basic HTML structure for the sitemap which represents my client.

Styling using CSS

The magic of creating a visual sitemap is in fact the CSS. After creating a wrapper div for my sitemap to sit within, and using a combination of CSS and background images, I have a flag pole, which will grow with sitemap should this be required. I have used a horizontal line as a background image to represent the ‘branch’, and subsequently styles both the top-level and sub-level links accordingly. In order to view the stylesheet, you can either reference the live demo or download the files from the link at the bottom.

Taking it further with CSS3

Now, for those of you out there who choose to be a little more adventurous with your website design? You could further what I have done here with CSS3. The first and last element selectors mean that you could implement both a top and bottom graphic for each set of list items, or you could also add rounded corners, drop-shadows or any other the other usual suspects.

View Demo | Download the files here