Review: Designing Web Navigation

In today's day and age where the Internet is a part of our everyday life, there has never been a time more appropriate now then to have really good navigation on your or your client's website. As sites grow more advanced and complex, it is vital to the success of your website that users are able to find what they need in a timely fashion without jumping through hoops to get there.

Designing Web Navigation: Optimizing the User Experience helps you lay the ground work to achieve a great user interaction experience. This full-color O'Reilly book clearly explains the full process of designing web navigation in three parts: Foundations of Web Navigation, A Framework for Navigation Design, and Navigation in Special Contexts.

In Foundations, the author writes an adequate analysis of various types of navigation systems, such as the search model, browse model, or the liquid information model to name only a few. He describes why poor navigation design will turn away users and may actually decrease the credibility of your website. Furthermore he touches on topics such as banner blindness where your users may not truly notice intentional site navigation, simply because back in their minds it looks like a vertical advertisement banner.

In Framework, Kalbach evaluates different forms of navigation for different types of sites. He talks about the need to engage your users to help determine what style will work best for your target audience. Moreover, he discusses types of technologies that may be implemented such as back-end technologies and front-end technologies like CSS and JavaScript.

James Kalbach does an excellent job describing every facet of this complex and sometimes daunting process in a very detailed yet easy to comprehend fashion. He backs up all the research he has done with references as well as providing great additional reading and other resources. The full-color diagrams and case studies of existing navigations on real-world websites prove invaluable to the reader. One small complaint I have is that for a book on designing navigation, the page numbers are quite small and difficult to glance at when you are flipping through the book. Aside from this small glitch, as it were, this book is a must have in every web developer or designer's library. Even if you consider yourself to be an expert at web page flow, you cannot go without learning a rule or two, and perhaps some great what not to dos in this book.

Acid3 Released: Web 2.0 Specifications Emerge

The Web Standards Project announced today the release of the Acid3 test, a consecutive release of a series of tests designed to help browser makers realize the standards of the web to which they are encouraged to uphold for the best and most consistent user experience.

The test consists of varying amounts of CSS, JavaScript, HTML, and tests with PNG images. Browsers are ranked on a point score based on how each one graphically renders the different use cases.

The overall results for each browser are as follows:

  • Firefox 2.0.0.12: 50%
  • Firefox 3.0b3: 61%
  • Opera 9.26: 46%
  • Safari 3.0.4: 39%
  • WebKit Nightly: 87%

Run the Acid3 test for yourself

Acid3: Putting Browser Makers on Notice, Again. [The Web Standards Project] Acid 3 Ships; WebKit praised [Ajaxian]

Fresh Look Thanks to CSS

A couple of days ago I was catching up on some articles from Design Meltdown and came across his recent post on sites that use a lot of brown to communicate a certain mood and feeling that is somewhat disconnected from technology. The color tends to give the feeling of warmth, comfort, and welcomeness.

As I was looking at the example sites that he posted, to my sheer surprise, mine was one of the examples. Looking at some of the others and reading his article inspired me to take the brown feel a step further. Yesterday I mocked the style that I wanted my site to have in my head. This morning, I went ahead and laid it out in Photoshop.

Last year when I redesigned my site, I made sure that I used proper CSS techniques so that if I ever did want to update the look of my site, I could do it easily. It only took me about 3 hours to do (which included the actual designing in Photoshop). I thought that was quite good! The actual implementation of the changes in the site maybe took about 45 minutes--which is about 30 minutes too long. This has to do with some things that I would have done differently to make it more effecient. No big deal.

I also designed the new look with in mind that I was going to keep a lot of the same elements. The navigation bar was NOT one of them however. Yet, once I placed the header on the page the navigation bar was just a little below the header this time (as opposed to being a part of the header as it was before), and I decided to keep it this way and tweak it a little.

Finally, everything else pretty much fell into place. I changed the colors a little of the text and links, but for the most part everything else is the same. It's amazing how much just the background and the header of a page can change the look of the whole site.

HTML, XHTML, semantics and the future of the web

Great article on web standards and why you should transform your site from HTML to XHTML to prepare yourself for the future:

HTML, XHTML, semantics and the future of the web