BitFreedom

The web is evolving at an incredible rate. Since those early days of HTML code in the 90s, we’ve come a long way. With HTML and CSS now going hand in hand, and new technologies like HTML5 just on the horizon, there’s never been a better time to double-check that your website is completely optimised for usability. For a long time, companies and online publishers were happy enough to simply have a web presence, and to be able to give their customers or readers a place to find out more.

Today, however, the internet is a very different place. From golf shoe stores to online marketing companies, the web is packed with sites. And social media now drives a lot of traffic on the web, meaning that quality content (and design) can spread rapidly. Unfortunately, this also means that the opposite is true: bad design and poor content can be ‘called out’ with relative ease. Thankfully there are ways to make your website user experience seamless with very little effort – starting by ensuring you have simple, clear, and intuitive navigation in place.

Why is navigation so vital?

You wouldn’t head out on a road trip without a map or a sat nav system, because you’d get lost and probably turn back the way you came. Exactly the same logic applies to web design. Navigation is one of the core elements to any website. You could have the best looking site in the world with as many bells and whistles as possible, but if your visitors can’t find their way around it, its success may be limited. By having navigation that is not only easy to understand, but also placed correctly and naturally, you’ll be helping your users to enjoy your site in the best way possible.

Examples of good navigation

There are many websites out there that have great navigation implemented; however do remember that the size of the website needs to be taken into account. A highly specific site that does one ‘main’ job – one for a certain product or service, for example – will have fewer requirements in terms of navigation. For example, if the site has a maximum of ten pages, the navigation menu will need roughly that number of options – or even fewer. A larger site, such as a department store like Amazon, will need a much more complex level of navigation with more ‘levels’. The first thing to do before you start to analyze your own navigation is to assess the size of your site, and therefore how complex your new navigation will need to be. This analysis will serve you well during the redesign process, and can be very handy when it comes to troubleshooting end-user issues.

Keep it simple

To be doubly sure that your navigation is as clean and simple as possible, always keep your user in mind during the design process. Test constantly, even when you’re still scribbling ideas on paper. Think to yourself: ‘how would a user find this section?’ or ‘Where would the user want to go from here?’. With these questions in mind, you’ll be far better armed to create a form of navigation that’s effortless and effective at the same time. Another key concern that designers often overlook is placement of the navigation menu. For sites such as Amazon, left-hand navigation works well because it allows ‘pop-out’ layers to fill the screen as necessary. For smaller sites, such as those for businesses or services, a top menu with the option for drop-down sub-menus is often the best choice.

It’s all about user experience

User experience (or UE, or UX, or whatever name you’d like to give it) is becoming one of those ‘hot button’ topics. The reason is simple: the web has evolved to a stage whereby the technical details are now secondary and the visual design has taken over. We no longer need to rely on technical wizadry (or at least, not so much), and can instead focus on how users interact with designs. As a web designer, it’s vital to respond to these changing industry conditions and to create websites that are as easy-to-use as they are visually striking.

My site, BitFreedom, uses the simpleX theme.  This theme is nice and simple, and best of all designed to be customizable.  It really saved me the trouble of creating the “Lonestar Theme” from scratch.  I also started using it for other sites, and it quickly became obvious that with a few simple modifications I could easily just drop a CSS file into the directory and have simpleX automatically pick it up.

Some time ago (July 2010) I emailed the author with my changes so he could put them into the next version of the theme.  However since the next version seems to be a long time coming, I’ve decided to post my changes here.

So here it is, my simpleX patch (along with the Lonestar style):

Example of the Lonestar Theme

Installation

1. Copy the functions.php file over to the simplex theme directory (overwrite).

   functions.php.orig is a copy of the original (version 1.3.3)
   functions.php.patch is a diff between the two

2. Copy the contents of the css/ directory over to the simplex/css/
   directory.

   This directory contains an example of a custom theme.

Latest News: As of November, 2010, these child themes are no longer necessary.  Instead, Dragonskin version 2.1 and later supports selecting a preset color from the WordPress admin area.

The Dragonskin Theme now also had child themes to give your site the skin of a different colored dragon. The child themes should be included in the download for the theme, and are simply used to modify the color scheme. You select them just as any other theme.

Note: The WordPress repository did not support child themes when I uploaded version 1.5.  Therefore, they will not be included in that package.  Please download them from this page below (added).  My intention for the next version is to include all of them in one package with an switching tool on the admin menu to select the one to use.

Dragonskin Gold

Dragonskin Gold

Download Dragonskin Gold 1.5

Dragonskin Green

Dragonskin Green

Download Dragonskin Green 1.5

For the longest time, my Dragonskin Theme has had WP-PostRatings integration. Recently I removed the integration because it is easy to modify the rating plugin to accomplish the same goal. (I hope that in the future WP-PostRatings will provide a simple way to do this through the admin interface–it really isn’t that hard.)

All you need to do is open wp-postratings/wp-postratings.php and find a line that looks like this:

//add_action('the_content', 'add_ratings_to_content');

Simply uncommenting that line will put the post ratings at the bottom of every post and page. In Dragonskin, I only included it on posts and at the top. To achieve the same, make some modifications to the next block of code, so that it looks like this:


function add_ratings_to_content($content) {
if (!is_feed()&&!is_page()) {
$content = the_ratings('div', 0, false).$content;
}
return $content;
}


I followed the instructions here for installing an akismet-based spam filter on phpBB2, but I found that it didn’t play nicely enough with the current Akismet API.  So instead, I downloaded an Akismet class and used that instead.  Basically, you should use Akismet.class.php instead of functions_akismet.php in your spamwords.php file.

1. Install the spamwords mod
2. Download Akismet.class.php and put this under your phpBB2 includes/ directory
3. Modify the spamwords.php file so that it looks like this (include your Akismet API at the top):

Update:  Another developer has created an updated version of this plugin.

First of all, let me preface this posting by saying there are a lot of versions of a “sitewide” plugin to show recent posts.  There are however, no widgetized versions that I could find, so I made a simple one.

Download WPMU Recent Posts Widget

Latest version 1.1

http://wordpress.org/extend/plugins/network-latest-posts/

Wrap your blog in the skin of a dragon! This is a dark theme that has a nice look for RPG and gaming sites. I originally developed this theme to go along with my D&D fan site. It features CSS-drive drop-down menus, support for multiple authors, and fluid width for flexible resolutions. (See below for full list of features and details.)

Download Dragonskin 3.0

Example Site Using Dragonskin

Downloads

• Dragonskin 3.0
• Development and other versions

Features

• Author profile pages that feature the authors as well as their posts.
• Navigation bar with drop-down menus
• Support for multiple colors
• Header image support for site logos

Integrated Support for Plugins

• Random Redirect
• Coauthors
• Smart 404

Image Credits

• Bowie J. Poag
• Brilliant Button Maker – for the 80×15 badges
• Arcsin Website Templates – for the border image

If you like this theme please rate it at WordPress!