Themery : Blogged - Navigation
This is the second post in my series, Themery : Blogged, where I blog about each step of a WordPress theme design.
If you recall from yesterday’s post I have already decided that my theme should be minimalist; i.e. a white page with a post on it, so next I need to think about the navigation.
Navigation is a particularly important issue with a WordPress theme, firstly, because there is usually so much of it, and secondly because it is often divided up into more the one type.
The navigation components can be subdivided into two distinct sets: static and dynamic. The static pages are what WordPress would call pages, and the dynamic pages are posts, or collections of posts.
They each serve slightly different needs but critically they are also used in different ways.
I am designing the theme for a blog, and not a WordPress powered website. This is very important for the concept of navigation. This means that the static pages are likely to be one-off single pages, and the user is also likely to expect that. These pages will typically include the default home page, an about me page, a contact form, and other similar style of pages.
The dynamic pages on the other hand are pages that are typically browsed through. A single page is not a one off, it is the start point for browsing. A user will not typically know exactly where they are going and so every dynamic page could be the start point for narrowing or widening a users search.
The key task I have then is how to divide static and dynamic links, how much information to include on the page, as opposed to hidden within menus, and what information needs should be site specific, always remaining at the top of the page, and which content specific, i.e. changing to appear with the post.
For a minimalist theme this is important as it defines whether there should be a sidebar, or a footer with links in it, or not. I have opted for a single site-wide point of navigation to deal with static pages and sideways searches. Everything else will be relegated to content specific navigation and I will deal with that when I come to each relevant type of content.
By sideways searches I mean navigation within the site that does not solely widen or narrow the focus, but actually moves to a separate part of the side; for example, if a user is reading a post in a particular category, but then navigates to an unrelated category, or a post within an unrelated category. This includes search.
With a single point of navigation everything is in one place, whether that be the header, footer, or sidebar. There is just one. This means there is no hunting for navigation, but it also means that I will have to balance the static site links, home, about, contact, with the dynamic pages such as archives, categories, and tags.
One has more choice, the other has requires less decision making. One requires nested menus, possibly multiple levels deep, and the other pretty much puts every link out there to see.
Finally, one adds to the sense of minimalism and the other is likely to drive through it like a truck.
I’ve clearly decided that a single point of navigation is the key, so what next?
Well, I’m not looking to reinvent the wheel with this theme. I will use some classic elements in the way that works me.
The original sketch uses the line and title style menu structure. This should work with the minimalist feel that I’m going for as it can be created out a several shades of grey but with a very noticeable accent colour.
The danger with this though is that by adding artificial height to the menu it could begin to take on the role of the sidebar, appearing to add complexity instead of removing it. I will need to watch this closely when it comes to building the site and keep in mind that I might have to change it for a thinner structure if it doesn’t feel right.
The navigation scheme combines the static pages and the dynamic pages, such as categories, archives, tags, so I have added a grey ribbon across the top, segregated into two different weights to create a visual distinction between the static and the dynamic. In addition I have nested the dynamic menus so that they will display several levels deep.
The example in the sketch has the categories expanding to show the last five posts and each category expanding to show an excerpt.
The next stage is to produce a more defined mockup and so the next image is from photoshop. Note that at this stage I have still haven’t decided on fonts or colours; however, the balance between them, i.e. the main accent colour and the lightened accent colour are likely to be used.
Finally I need to add search into the mix. Search is quite important and by and large it has become the accepted standard to include it at the top in an easy to find place. With that in mind I have included it on the right hand side of the colour bar:
Although I am not at the stage of implementing it yet I have created this mockup on the assumption that I will use a variation of the Suckerfish drop down code. This is CSS only for most browsers and should help to keep things light weight.
Tomorrow I will look at the first of the content sections, starting with the most important, the single, full post page.
Comments
Leave a Reply
I am currently testing a comment link policy which means commenters do not get a link. There is a poll, and open comments for feedback on the comment policy page.
- Get fed with RSS
1
inspirationbit (http://www.inspirationbit.com) commented at 7:23 am, 29th 02 2008:
Andrew, thanks so much for starting this series. I’ll be closely following your every step, since I’m going through a similar process myself. Really glad you’re going with a minimalistic design!
Question - based on your mockups, does it mean you’re planning on including a DHTML navigational menu, and listing all the post titles under each category? For blogs with a frequent posting schedule, wouldn’t that mean a very cluttered page with lots of posts in the submenu?
2
Andrew Rickmann (http://www.arickmann.co.uk) commented at 7:36 am, 29th 02 2008:
Hi Vivien,
I am really just carrying on where I left off last time I redesigned my other blog. I can’t help but love the minimalist.
Some Javascript will be involved for the older browsers but for the modern ones it will be pure CSS.
The plan is to include only the most recent five post titles. It isn’t intended to be the sole means of navigating to those posts but I wanted to add a touch more options for navigation straight to a post instead of clicking through a spare page.