/CSS/ Create site maps using lists
13/11/2008 | Filed under Develop > CSS
Craig Grannell shows you how to be more creative with lists, using them to create great-looking site maps for showing to clients and helping your users
Lists aren’t the most glamorous of HTML entities, but they’re massively important and highly flexible. Similarly, site maps aren’t the most thrilling of design devices, but they’re essential in the creation of many websites, as they can help you to figure out where various chunks of information are going to live – and how each page relates to its parents and siblings.
The majority of designers tend to work with the likes of Illustrator or a charting application to churn out site maps. That’s fine until a client starts demanding about a dozen changes per hour. Soon, Illustrator becomes the most hated item on your hard drive and you spend many happy moments anthropomorphising it in your head, hunting it down for your pains. Clearly, at that point you’re almost barking mad – so a different course of action is perhaps in order.
Make a list
Typical site maps are lists of sections, often housing sub-sections, which in turn may house their own sub-sections. To that end, although a vector-based drawing is a perfectly good means of illustrating such a thing, so too is a basic bullet-point list, with indented items representing sub-section content. The only issue with a bullet-point list is that the relationship between pages and their siblings isn’t terribly clear, but – as the CSS-savvy will be aware – HTML lists are pretty versatile and can be styled in many different ways, bringing some visual panache and usability to what was originally just a bunch of black discs and words.
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
Which advert annoys you most? The one with the kid on the toilet and the air freshener: “It’s all gone!” Gah.
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
Headland Web Design / 21/11/2008 / 17:28 / http://www.headland.co.uk
SIte maps should be easily traversable by search engines. Lists are a good way to make use of HTML site maps.
Jeremy / 25/11/2008 / 04:33 / http://www.dialme.com
I usually use a combination of sitemaps in xml and html format. That way I increase the changes of getting crawled. Good info thanks!!
Jon Harvey / 15/01/2009 / 17:46 / http://www.coderequired.com
Jeremy - a great way to do this is to actually use your sitemap xml file (generally these can be published directly from Content Management Systems) and an XSLT sheet to display the content - that way users get an up-to-date sitemap without you having to manually update it when/if you add sections via your CMS but search engines can also have another access point to crawl your site... ;-)
James Emms / 22/03/2009 / 01:05 / http://www.jamesemmstravel.ca
Jon's idea is fantastic - As much as I think a list sitemap is great, I'd much rather have one that updates itself automatically! Being driven by a CMS just improves the entire process.
Cheers,
James Emms
Dan - Smart Energy UK / 08/04/2009 / 12:03 / http://www.smartenergyengland.co.uk/
Jon, I will try your idea to create Sitemap's for all my websites. You have shared a valuable information. HTML lists would be really nice as visitors can also search inner URL through them.
