Navigation is THE most important thing after content

There are literally hundreds of blogs that I would rate as 'excellent' in terms of content. But the vast majority do not deliver in terms of navigation.

The idea of a 'blog' or weblog started as a kind of online diary, a blog maybe had a theme but mostly was intermittent ramblings of an individual, in chronological order.

If the blog has great content, it can be difficult to find exactly what we need, or to 'discover' something cool, or just browse an area of interest without having to scroll back through pages and pages of historical posts.

How to create Great Navigation on a Blog - Start with Structure

To start with, navigation is not the same thing as structure. Structure refers to how the content is stored in a framework. A good example is a directory structure, for storing information on a hard drive. Most of us are familiar with this. Search-Marketing-Blog.com uses exactly that - a directory structure. On the server hard drive is a tree structure of folders, according to subject. Each blog entry is in fact a text file stored within that structure in the correct folder.

Tags are an Excuse for Muddled Thinking

Tags have become very popular as a way to mark a post, so that it can be found easily. They are helpful but certainly not the full story. Tags do not make up for an ordered structure combined with an effective search tool. With information ordered by topic/subject, tags are better deployed to help cross-subject theming and searching - for example the tag 'stats' show posts with statistical content regardless of the subject folder they are in.

• Search tool. Such a fundamental requirement for any website. How come so many blogs don't have them?

• List of recent entries. Seems essential that a visitor landing on your site (any page) can quickly see the most recent entries you have written.

• Related entries. When looking at a post, related entries should be listed. In a folder structure this is easy, just display the titles of the other posts in that folder and its sub-folders. When viewing search results, in addition to full entries displayed upfront, there should be a list of all titles found.

• Calendar. It should be easy to quickly display the posts of a certain month, and move back/forward from year to year.

• Breadcrumbs. These are the Home >> You >> Are >> here type of links so that a visitor can easily identify his location on your site. At any point in the information structure, it should be easy to see the sub-folders from that location so that browsing and discovery is easy.

• Sitemap. At any time, a complete list of all folders and topics is just a click away.

Wouldn't it be cool if a blog had ALL of these navigational devices?

Yep, sure would. You're reading it!

tag:geek

A Beautiful Baby Of A Design

Having chosen Blosxom as the engine for driving this blog, I next needed to think about the template. I had a very clear idea about the navigation structure I wanted, but the design itself and its implementation took quite some thinking about.

Best Tools For Blog Website Design

A couple of years ago, when I built websites for friends or myself as a hobby, I used Microsoft Frontpage. I had no time to learn Dreamweaver. Frontpage was fairly intuitive to use and suited my purposes. But, then I learned about CSS. What a revelation! What a change to the way I build websites.

The ONLY software tools used to build this site:

• NOTEPAD2. A great little text editor, designed as a setp up from the Notepad that comes with windows.

• PAINTSHOPPRO V9. I usually prefer free or open-source software but I hate the Gimp. PSP is great.

• FIREFOX with the WEB DEVELOPER extension. What a fantastic tool. When you switch it on you can directly edit CSS in-browser to see the effect on the live page. So many other features. Sometimes, I will use the FIREBUG extension which has some similar features but is a more complex to use.

• FILEZILLA for FTP. It works perfect and does everything I need. You can set it so that when browsing your remote directory, by clicking on a file it automatically pulls the file into Notepad2; when editing is complete it will automatically re-upload the file back to the remote directory.

• FASTSTONE CAPTURE. A truly great piece of free software. I use it every day. It has a very easy colour-picker tool, as well as being able to capture full-screen, part-of-screen, or even a complete web-page (by automatically scrolling the window).

That's it. No Frontpage. No Dreamweaver. Just Notepad and a few utilities.

The Layout and Design - Online Resources

I wanted the design to be simple, but with enough 'panels' for navigational elements as well as content. Also, I am not a designer and don't have a lot of time to try to do anything fancy... I am not one for re-inventing the wheel.

Here are the online resources I used:

• YUI Reset CSS This code is used at the top of the CSS stylesheet to reset fonts and settings, to make sure the look of the site is consistent across all browsers. In fact, I use the 'Foundation' code which includes Grids as well.

• Grid Builder this is a very useful tool for creating a standard CSS-based framework. For example, it generates the code to make a 3 column CSS template instantly. There's plenty of flexibility as to number of rows, columns, column-widths, etc.

• RoundedCrnr this amazing tool creates the CSS, HTML and images for the rounded panels on this site - both the solid background as well as the rounded borders. Chuck at Roundedcrnr asks for a small donation, but it is well worth it.

• ColorSchemer an easy to use tool for picking colours.

And that's it. A small selection of tools, but powerful.

tag:geek

Can I have my Geek badge please?

In the jungle of platforms available for bloggers, the big beasts of Blogger and Wordpress stand out. I experimented with both.

• The 'old' original Blogger was super-easy to use - taking literally just a few minutes to set up. I wanted to host on my own domain, and old Blogger allowed this. New super-duper Blogger does not, though.

• Wordpress takes a while to come to grips with, and many hosting companies have a simple-install option to get Wordpress running on your site in no time. I really liked it and spent several happy evenings playing with all manner of plugins. But then, I got scared.. scared by the simple blank and empty screen staring back at me when the Wordpress database failed. Luckily, there was nothing of value lost. Of course, there are plugins to assist with back-up and restoration of Wordpress databases, but it was still scary stuff for me so I decided to look for other options.

A Hit-List Of Must-Have Blog Features

I thought about what was important for a blogging platform.

• Good navigation facilities
• Hosted on my own domain
• No database to maintain
• Excellent navigation capabilities
• Easy to customise template
• Simple to write and edit articles
• Great tools for navigation
• No licence fee
• Flexible structure

Powered By Blosxom

I think over a two-week period I must have looked at every blog platform available. There are some really wonderful systems out there. In the course of my investigations I found something called 'Blosxom'. This is about 500 lines of Perl code (runs as a CGI), and not much else. The project dates back to 2003, is open source, and there are quite a few plugins available for additional features. The Yahoo-based support forum is full of spam, and the SourceForge forum is quiet. I didn't know Perl, but felt adventurous enough to try to install Blosxom. It was actually pretty simple (or maybe I was lucky). I was struck by it's minimalist philosophy, drawn to it, moth-to-light like.

So, this blog is powered by Blosxom. In the last month I have done quite a lot of tweaking and customising (having learnt Perl), but at the core is the Blosxom code.

Watch for these future posts:

• Template design of this blog
• Navigation design of this blog

tag:geek