February 28, 2008

This is the fourth post in my series, Themery : Blogged, where I blog about each step of a WordPress theme design.

One area that I didn’t sketch out in my initial plan was the archives. This wasn’t a deliberate choice; I just didn’t have any real ideas about it and so I have left it until the main content was done.

I consider archives, categories, and tags to be minor variations on the same page and so I am considering all of these together.

There are two main challenges for the design of these pages: how to create the third style of navigation that is consistent with the look and feel of the rest of the site navigation, but which works in quite a different way, and secondly, how to handle the extra heading. I’ll look at these in reverse order.

I’ve run into this problem in the past. I have created my single post page and so decided on the way I want my post titles to appear and then found that I need to place another title above those to explain that this is an archive page. If I was creating the markup as well the issue would be one of changing my post titles from an H2 to an H3.

Even if I just accept that I will do that I then need to decide if I should keep the same styling for the page title as for other h2 tags used across the site, meaning that it will look like a page title and the page titles will look like lower level titles, or whether I should make the post titles the same but in the process cause my different levels of header to be inconsistent throughout the site.

There are other markup issues but I will discuss those later on in the post.

The decision I have come to is that consistency is very important. The post page has one header, and I don’t want to impose a higher order header above that, even when the page contains more than one post title. The post titles are the top level header, even where there is more than one.

My solution then is to add a header to the navigational structure to explain how the user is navigating, instead of explaining what the user is looking at; i.e. you are navigating through the archives, and not, you are looking at a list of posts from the archives.

With that decided I need to consider how to put together the third style of navigation that the site has. The first being site wide, the second style is post specific, this is the intermediate step.

The navigation needs to fit in and around the list of posts so that it feels consistent with the theme as a whole. That means it must fit into one of the spaces that I have already defined from the single post pages.

My solution is to use the space to the left, used in the single post for text devices, to list the possible archives and to incorporate the paging options into that list so that they are displayed beneath the active archive page in the list.

This uses spaces that are already defined in the scheme and only creates one navigational structure. It is fairly common to include the paging links at the bottom and top of the list of posts and this would have been out of place in this design.

Finally there is area the other markup issues.

So far I haven’t intended the post title to be a link to the post, as it is in most themes. If I make the page title a link on the archive pages, but not on any other pages is that likely to cause confusion, and, if I use a link beneath the page title as I used for categories and tags beneath the title of the main content is that going to be intuitive enough?

Instead of making the page title a link, which I prefer not to do for consistency, I have included a ‘read more’ link in black text to make it stand out much more. Even though I have generally avoided black, using it in small doses as a highlight option seems to work well.

Although I haven’t talked about the markup I will use to build the site, mostly because I haven’t consciously considered it until now, there are some semantic considerations that I think are interesting enough to consider at this stage.

The first is the what kind of header to use.

This theme has no site title. Quite often an H1 tag is used for the site title and everything else considered a sub heading of that. Personally I don’t think this is logically correct, but it is a sort of de facto standard. Without a site title I am free to use the h1 tag for the post titles on the single pages, and by default therefore as the post titles in the archives. Each post is, after all, on an equal footing.

The issue specific to these style pages is whether to treat the posts as a list of posts, or as separate topics on a page; i.e. should they be wrapped in an ordered list to define the list relationship or is it enough that each post title is an H1 tag?

There is no doubting that they are a list, but is there any benefit to be added by marking it up as a list?

Because I am using H1 tags I don’t think there is a semantic benefit to using lists; however, if I had used a page title of archives and the posts were H2 tags then the case would be less clear.

Tomorrow I am going to consider the home page, and then, starting next week I will start to create the actual theme itself and look at ways it can be raised from a relatively straightforward minimalist theme to a theme with hidden depths or personalisation and usability.