Perhaps a site map is one of the more rarely mentioned elements of a blog or website. Its justifications are many: for both SEO and accessibility purposes. But if they are important, then they are important enough to be read, and to be read well.
The good news: a site map is fairly easy to style. Its requirement to be machine-readable means that it has a very simple structure.
The bad news: it’s usually coded as a plain list and remains presented like this:
Category A
- Post 1
- Post 2
- Post 3
- …
Category B
- Post 4
- Post 5
- Post 6
- …
And if you’re using a plugin, then adding classes to individual element is rather out of the question.
Defining Our Problem
Right away, there are several issues around the way this hierarchy works that we can address. The assumption that “we think in list” is correct (ever wonder why Diggable posts are always numbered?) but while bullets help organize our thought, they must be well done or risk being unscannable to the eye. Here was what Oakhazelnut.com’s looked like.
Note how:
- The only difference between first level lists (the one marked ‘Category’) and second-level ones (the entries) are bold highlighting.
- Type sizes are the same (while the reader’s visual priorities aren’t. We tend to intuitively scan categories first, then look at individual posts within that category second.)
- Categories and entries are uniformly spaced. In body text, where long-length reading occurs continuously, maintaining a consistent line-height rhythm is a good practice. But when reading occurs in chunks, better spacing to distinguish information is expressly needed.
- The behavior of underlining hovered links is consistent with how the rest of the site operates. But when lists are long, we need another device to show our location in a page at all times. Breadcrumb navigation that applications like Apple’s Finder has is one such device.
Determining Our Workplan
I proposed several solutions from knowing these issues:
- Categories and entries need to be differentiated enough inter and intra-categorically (between and amongst each other) by ways of color, size, spacing and typography. The goal is to allow our eye to scan through the sitemap as quickly as possible to get to the entry we want, but not so fast as to miss things along the way. This problem is further amplified when we use the scrollwheel/trackpad/two-finger gesture to move about the page. Because putting more differentiating element means more comprehension to the eye, but also more distraction, this is a tricky problem to handle.
- Create a device to aid navigation and let readers know where they are located in the long, big sitemap of lists (isn’t it ironic?) at all times.
- Break site design and behavior conventions when it aids comprehension, but never change more than a few elements to keep consistency.
- If possible, change the sitemap generator plugin so it outputs in columns
Getting Into The Code
Inspecting the page through WebKit’s Inspector (or hit ‘View Source’ from your browser menu) yielded this result:
<div class="ddsg-wrapper">
<h2>Pages</h2>
<ul>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Services</li>
</ul>
<h2>Posts</h2>
<ul>
<li>Category 1
<li>Post 1</li>
<li>Post 2</li>
<li>Post 3</li>
<li>...</li>
<li/>
<li>Category 2
<li>Post 4</li>
<li>Post 5</li>
<li>Post 6</li>
<li>...</li>
<li/>
<li>Category W
<li>Post X</li>
<li>Post Y</li>
<li>Post Z</li>
<li>...</li>
<li/>
</ul>
So the CSS elements that we have to style are:
h2
Blog categories (“Pages” or “Posts”)ul li
Page name and post categories (“About,” “Contact,” “Cyborg Anthropology,” “Ambient Findability,” etc.)ul li ul li
Post titles (“Hazelnut Tech Talk Episode 4 | The CoLab Experience,” etc.)
The Work
Here is the CSS code that I wrote, along with its translation:
#blog .entry .ddsg wrapper h2 {
This is the blog categories
font-size: 19px;
The size matches Oakhazelnut’s blog.
padding-top: 25px;
padding-left: 0;
margin-left: 10px;
Put vertical and horizontal spacing to distinguish it from the rest of the entry.
text-transform: uppercase;
Capitalizing letters are another means of headline differentiation.
}
#blog .entry .ddsg wrapper ul li {
This is the page names and post categories.
font-size: 15px;
Note the smaller type size.
display: block;
This will make sure that the list descends downward.
list-style: none;
The list (and all lists preceeding it) will not be bulleted, you’ll see why below.
padding-top: 10px;
padding-right: 5px;
padding-bottom: 13px;
padding-left: 12px;
margin-top: 10px;
More spacing is put in to distinguish the post categories from their parents.
background-color: #f8fff5;
This is the reason why the list wasn’t bulleted. The post categories will be “boxed” in a light-green background color to more elegantly distinguish it from the rest of the page. Had I used a bulleted list, the hierarchy will be confusing.
}
#blog .entry .ddsg wrapper ul li ul li {
This is the post titles.
font-size: 11px;
This type size isn’t only smaller. It’s also consistent with Oakhazelnut.com’s body text.
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
margin-top: 10px;
Note how I reduced the top and bottom padding when compared to the post categories above. This is because smaller type sizes naturally require less space between them
background-color: #f8fff5;
This is the reason why the list wasn’t bulleted. The post categories will be “boxed” in a light-green background color to more elegantly distinguish it from the rest of the page. Had I used a bulleted list, the hierarchy will be confusing.
}
So far, so good. The text hierarchy is properly established in terms of type styles, sizes and spacing.
But I also said above that one of my goals was to:
Create a device to aid navigation and let readers know where they are located in the long, big sitemap of lists (isn’t it ironic?) at all times.
The solution here is to have two devices of differentiation:
Background Color
#blog .entry .ddsg wrapper ul li {
background-color: #f8fff5;
}
This is the reason why the list wasn’t bulleted. The post categories will be “boxed” in a light-green background color to subtly distinguish it from the rest of the page. Had I used a bulleted list, the hierarchy will be confusing.
#blog .entry .ddsg-wrapper ul li:hover {
background-color: #edffe6;
}
When the mouse hovers over the post category box, it will turn into a darker shade of green.
#blog .entry .ddsg-wrapper ul li:hover ul li:hover {
background-color: #dbffcc;
}
When the mouse hovers over individual posts, it will turn into an even darker shade of green.
Click here to see it in full.
Wishlist
I would’ve loved to tackle these goals if I had enough chops to get into the sitemap generator plugin and hack it:
- Post title ordering, either alphabetical or by post year, month and date
- A mini table of content that, much like the site map, automatically updates every time a new entry or category is added
- Hide certain parts of the date when not needed. For example, if I could sort the post titles by month, then I would only need to display the numerical date rather than the full text.
- Columns, for more sophisticated organization (Intel, Oracle, Apple and Business Objects have done this)
Have More Questions?
