January 5, 2011

Creating Current Menu States in WordPress

Rule #1 for creating a good user experience is to make your product as easy to use as possible. Whether it’s a web site, or a vacuum cleaner, if it’s difficult to use it’s a shitty product. In the web world, user experience often get’s overlooked for fancy graphics and unnecessary animation (the old myspace comes to mind). The good news is as more browsers start to adopt web standards it’s becoming easier for designers to make sites that are both good looking and usable.

Good design equals better functioning — that if the true path of good design is followed scrupulously, then not only does the thing look very cool, but it is also a better object all around.

David Byrne from The Bicycle Diaries

One of the most surefire ways designers can enhance a user’s experience on the web is to provide clear navigation for the reader; the user should always know where they are on the site. One of the more subtle yet effective ways of achieving this is to give the current page menu item a different state from the rest of the menu items.

Easy enough in theory, however implementing requires a bit more trickery than normal CSS styling. I have used WordPress to build my site so this tutorial will cover how to implement current menu states using CSS & a little PHP with WordPress, however there are also other methods that utilize JavaScript and straight CSS that you can read about here and here if you like.

So getting started, your basic navigation probably looks something like this:

<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

You should be able to find where your menu is being called from in the header.php file. Now with a little PHP magic we can determine what page the user is on and place “current” in the right spot. Here’s how the first <li> element from above should look after replacing the code:

<li<?php  if (is_home()) {  echo " id=\"current\""; } ?>><a href="#">Home</a></li>

Assuming everything goes as planned, WordPress should generate some HTML that looks like this for the current page item:

<li id="current"><a href="#">Home</a></li>

You’ll now need to go through for each menu item and edit the code appropriately. Our navigation structure should now look something like this:

<ul id="menu">

<!-- To show "current" on the home page --> <li<?php if (is_home()) { echo " id=\"current\""; } ?>><a href="#">Home</a></li>

<!-- To show "current" on the About Page --> <li<?php if (is_page('About')) { echo " id=\"current\""; }?>> <a href="<?php bloginfo('url') ?>/about">About</a> </li>

<!-- To show "current" on the Blog Page --> <li<?php if (is_page('Blog')) { echo " id=\"current\""; }?>> <a href="<?php bloginfo('url') ?>/about">Blog</a> </li>

<!-- To show "current" on the Contact Page --> <li<?php if (is_page('Contact')) { echo " id=\"current\""; }?>> <a href="<?php bloginfo('url') ?>/about">Contact</a> </li> </ul>

Now throw a little CSS in your stylesheet and you’re in business:

#current { background-color: red; }

For more information on defining current menu states visit the WordPress Codex.


January 3, 2011

Life in Perpetual Beta

Perhaps one of the most notable differences between print and interactive design is the absence of a clearly-defined stopping point. In print, the work is finished when it goes to press or is in circulation. However, with the organic nature of the web we are forever revisiting and testing better solutions.

To show the world a product that may not be perfect in our eyes can be a very intimidating proposition. Many web designers don’t have websites because they are in a constant state of re-design.

With that being said, I am releasing Alex Deckard 3.0 to the world. While unfinished, I feel that Phase 1 is fit for public consumption. So don’t be surprised if you encounter an occasional bug or something doesn’t look quite right in the old Internet Explorer. Phase 2 is just around the corner.


December 27, 2010

Rework

Rework should be on every creative professionals reading list. Written by Jason Fried & David Heinemeier, the brains behind 37 Signals, Rework offers a unique perspective on re-structuring the modern work day and office. Rework is a quick and entertaining read as well as an excellent way to start thinking about getting the most out of your 2011. Purchase your copy here.