Good website navigation not only helps visitors find the information they are looking for, it also tells them where they are on a website. This is especially important in light of the fact that people may arrive anywhere on a website via search or a link from another website. They will appreciate some indication of what section of the website they are in; sort of a “you are here” marker.

Essentially, we want to tell the navigation list that, if the navigation section is ‘X’, then this particular navigation list item should have a "current" class applied to it, which would allow us to style that item to highlight the navigation section. But the last thing we need, if we’re busy and have better things to do, is to edit the navigation on each page individually: every time we add or remove a page or change a navigation item name, we would have to update the navigation on every page.

We can make our lives easier with PHP. Remember, PHP executes on the server: you must upload your files to a PHP-enabled server to see it work. It will not execute on your desktop unless you have a local server set up. But if so, you are way beyond this little tutorial…

Below is the HTML for a very simple list-based navigation, and below that, the accompanying CSS. See the demo here»

The demo navigation should look like this:

The HTML

<ul class="navigation">

<li><a href="index.php">Home</a></li>
<li><a href="what.php">What We Do</a></li>
<li><a href="who.php">Who We Are</a></li>
<li><a href="why.php">Why We Do It</a></li>
<li><a href="need.php">Why You Need It</a></li>
<li><a href="contact.php">Contact Us</a></li>

</ul>

The CSS

ul.navigation { margin:0px; padding:0px; list-style-type:none; }

ul.navigation li { display:inline; margin:0; padding:0; }

ul.navigation a { float:left; display:inline; font-size:14px;

font-weight:bold; text-decoration:none; white-space:nowrap; padding:2px 10px 2px 10px; background:#fc0; border-left:1px solid #fff; }

ul.navigation a:link, ul.navigation a:visited { color:#000; }

ul.navigation li a:hover { color:#fff; }

Create a PHP include from the navigation list and place a call for it on each page.

This include is placed on each page in place of the navigation list with the following call for the include:

<?php include("includes/navigation.php"); ?>

This calls for the include, which was named "navigation.php", and placed in a folder called "includes".

Add PHP code to the list items in the include file to display the "current" class when called for:

<ul class="navigation">

<li<?php echo ($navsection == 'home') ? ' class="current";' : "; ?>><a href="index.php">Home</a></li>
<li<?php echo ($navsection == 'what') ? ' class="current";' : "; ?>><a href="what.php">What We Do</a></li>
<li<?php echo ($navsection == 'who') ? ' class="current";' : "; ?>><a href="who.php">Who We Are</a></li>
<li<?php echo ($navsection == 'why') ? ' class="current";' : "; ?>><a href="why.php">Why We Do It</a></li>
<li<?php echo ($navsection == 'need') ? ' class="current";' : "; ?>><a href="need.php">Why You Need It</a></li>
<li<?php echo ($navsection == 'contact') ? ' class="current";' : "; ?>><a href="contact.php">Contact Us</a></li>

</ul>

Add styles to highlight the navigation items when list item has "current" class applied.

ul.navigation li.current a:link, ul.navigation li.current a:visited

{ color:#fff; background:#000; }

ul.navigation li.current a:hover { color:#fff; background:#c00; }

One last thing: put the appropriate navigation section info on each page.

At the very top of the HTML page, prior to the doc statement, add the following 3 lines of code:

<?php
$navsection = 'home';
?>

Note that this particular example would be found above the doc statement on the home page. Because it matches the navsection statement attached to the home page list item on the menu, that list item displays with the "current" class.

This technique works well on the top level of list-based drop-down menus as well, though I have found that it’s easier to attach the "current" class to the link rather than to the list item. CSS, of course, must be adjusted accordingly.

Tags: Design/Development, Information Architecture

Giving away stuff on your website is a really smart thing to do. It’s an opportunity to spread your ideas or information about your products and services, sometimes in exchange for a little bit of information that could be helpful in your marketing. It’s a very simple process, but companies screw it up all the time, usually by one of the following two methods.

Screw-up No. One

Too often, companies undermine their attempts to offer free information (whitepapers, product info, sample book chapters, etc.) by requiring onerous amounts of personal or contact information in return. You’ve probably seen this, and maybe even been guilty yourself (I confess, I’ve done it). In exchange for a lousy whitepaper, I have seen people asked for ALL of their contact info (including their work phone, home phone, cell phone, and Twitter ID), their job title, their preferred salutation (Mr., Mrs., Miss, Dr., Professor) and their underwear size. OK, I made up the last one, but it does get intrusive after the third piece of info. By the time people finish and submit the form (IF they finish), that whitepaper had better be damned good.

Screw-up No. Two

Another way to blow it is with poor execution. I recently got an offer in an email newsletter I’m subscribed to for a free chapter download for a just-published book. I need another web design book like a hole in the head, but I was game to find out if there might be a reason to spend almost $30 on this one, so I clicked on the download button. That did not start a download. Instead, it took me to a page that asked for my email so they could email me the download info. While I didn’t consider their request for my email address to be too much to ask, the button had said "download," and I found it a little disturbing that it wasn’t what happened. I also wondered why, if they had my email address to send me the newsletter, they needed it again to send me the download info. Why didn’t they just send me the download info to begin with?

I dutifully typed in my email address and clicked "submit." That took me to a page where they offered me several newsletter subscriptions, all preselected as "yes," including the one I already had. I clicked on the link that said "No thanks, I’m just here for the free book chapter." That took me to a page that promised to send me a download link. Two days later, I’m still waiting for that download information. I don’t think I’ll go back and make the request again: I just saved nearly $30.

Giving stuff away is not rocket science, and unless you’re a government supplier, your customers are probably not rocket scientists. So don’t make it difficult. And keep the information you ask for to a bare minimum. Your visitors will never hold it against you if you ask for too little information.

Tags: Information Architecture, Marketing, Usability

Another excellent video from Michael Wesch, Assistant Professor of Cultural Anthropology at Kansas State University, this one describing changes in the way we "find, store, create, critique, and share information."

Tags: Change, Future, Information Architecture