MintTwist’s Essential Web Design Tip: Navigation

Okay, I stole that from Spider-Man but there is some truth behind it. Designing a web site is about much more than superficial Photoshop visuals and CSS coding. A web designer must make sure that everything is in its place and that the web site is clean, navigable and obvious. Any decent web designer knows that an ‘average’ web user (don’t you just hate that phrase?) has a very short attention span. It is for this reason that everything must be immediately obvious to them. There are, obviously, no rules regarding web site design. That’s why you get some truly awful-looking web sites. But there are conventions. The MintTwist’s Essential Web Design Tips series will see us publish what we consider to be the top (in no particular order) web design conventions so that those who are just starting out, or those who are just looking for some tips can be as good at web site design as the design team at our Digital Agency in London. Well, almost as good… We’ll start the series with Navigation:

Easy Navigation with MintTwist

Perhaps one of the more important conventions, the main navigation for a web site simply must be easy, clean, obvious and consistent. With the use of some simple CSS, it is perfectly easy to create a beautiful yet functional navigation system for a web site. Colours should utilise contrast in a way that makes the links within a menu accessible to everybody who can see. That doesn’t mean the menu has to be a boring, post-it yellow and brick red set of links. Experiment with colours. Make a colour pallet and save it; you never know when you might need to use those colours again! The navigation should be uniform throughout the site, even on the Home page. By uniform, I mean consistent, and on EVERY page. Colour-coding your navigation is good, though, for a site with many pages. Each section that has a specific colour can be represented in the navigation but make sure it benefits the user. If it helps with navigation of the site to have colour-coded sections, by all means go for it; it must be obvious, though. The most important point to remember is that we must try not to make a web user think about what he should click. If it follows the conventions, the user will stay put and there is a much greater chance that he will continue to browse the site and maybe even come back! If you confuse the user with multiple navigation systems throughout a web site, or a different style of navigation on each page he will simply leave the site to get the information he requires elsewhere. A user has expectations when it comes to visiting a web site. The menu is expected to be in a certain place (the top or to the left), the logo or ‘site ID’ should be at the top left, the content shouldn’t stretch across the page and so on. Placing the menu at, say, the bottom, or having it float and follow the user to the obscure parts using dodgy JavaScript is, for the most part, less than helpful. Unfortunately, (or perhaps fortunately, depending on your viewpoint) people do judge a web site by the way it looks and acts. Functionality for the sake of functionality is a web design faux pas! The fantastic thing about building clean, simple and navigable navigation is that it is easy and only needs a few lines of CSS. As long as you get the basic rules of a CSS menu right, the challenge should only be with creating a style to suit your web site. The possibilities are endless. See after the jump for an example of an easy to build, yet clean navigation. I’ve chosen a horizontal menu, for use below the masthead of a site, and above the content. Happy CSSing!… [caption id="attachment_5801" align="alignnone" width="500"] Example CSS Menu[/caption]  

The CSS

.navs {
	list-style:none;
	width:900px;
	background-color:#990000;
	overflow:auto;
}

.navs ul {
	margin:0;
	padding:0;
}

.navs ul li {
	display:inline;
}

.navs ul li a {
	padding:3px 25px;
	background-color:#990000;
	color:#FFFFFF;
	text-decoration:none;
	border-right:1px solid #FFFFFF;
	font-weight:bold;
	letter-spacing:-1px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	margin:0;
	float:left;
}

.navs ul li a:hover {
	color:#FFFFFF;
	background-color:#0033FF;
}

The XHTML

<div class="navs">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

And that’s it! Simple; a few lines of CSS and even fewer lines of HTML and you’re golden. Or red, green, blue, purple, orange, mauve, pink, yell… Tested and works in Firefox (obviously), IE6, IE7 and Safari.