Site Navigation Approaches
When it comes to site navigation, there are lots of good, bad and ugly ways to help users and search engines find their way around your site. I’d like to show two bad approaches, with examples, and the optimal technique. I’m going to go in reverse order here in showing examples of each.
The Ugly
Tables: An antiquated approach to navigation is the use of tables and images. I’ll admit, early in my web-dev days, I’ve created a site or two using this method. Tables include a lot of extra code, right on the page, that can clutter things up making for ugly code and making it hard for Google to read and index. When the images contain the text of the navigation, then Google can’t read it and give it the respect it deserves. Also, these two methods can make the page load a little slower- not a good thing for users or search engines (remember- Google takes site load time into account when ranking your site).
Rocky Mountain Movers: Nice company, really bad use of table and images in their navigation. With some nice alt text, sometimes this can be overcome- but not my first choice.
The Bad
Flash: Adobe Flash, although one of my personal favorite tools because it allows one to create fun and elegant navigation (one of my first sites was 100% in Flash- many years ago) doesn’t allow search engines to get in and see the code under the hood. Within Adobe Flash, developers use ActionScript to create animation and navigation. However, after it is rendered and compiled, all the search engines see is essentially an interactive movie. The code is locked away- in the dark recesses of a .swf file- this is bad. Fantastic option for a great user experience, but really bad for SEO. Search engines are getting better at reading them, but it’s still not an optimal solution.
Case-Mate: A prime example of nice, but unreadable site navigation is I Make My Case. Award winning company- not the most SEO friendly navigation.
DOT: I love Design of Today (DOT). These folks are really creative- and their site reflect their quirky awesomeness. However, Google can’t read the entire website, because the navigation and content is buried 100% in Flash.
The Good Navigation
Navigation that is easy for visitors to use, search engines to read/index and loads quickly is the best choice. Smart use of HTML and CSS will cover your bases. Instead of using tables to create the layout of the site and navigation- replace it with <div> tags. Within these tags use the bullet point HTML code of <ul> and <li> (unordered list and each bullet point). You may think this will just create an ugly billeted list, but when CSS is applied- it’ll end up looking great. Also, within the <li> tag itself, you can type in the text keyword, so Google can easily read it. Finally, because the CSS code is all on another document, removing most the styling code from the on-page HTML, the site will load faster.
Example of HTML and CSS for Site Navigation
HTML Code: When viewing the source of CNN.com’s homepage, you can see the use of Divs, calling the CSS file for styling, <ul> bulleted lists and then the actual text and link of the navigation button.
CSS Code: The CSS code that is called resides on another document, but is called from the homepage. The separation helps the on-page code be cleaner and load faster.
View the Tutorial: I take a few minutes and walk you through these examples of the good, the bad and the ugly (actually, the flash sites are quite gorgeous, talking about tables here). Enjoy!
Feedback? What other navigation approaches do you use for a good user experience and effective SEO? Please, let us know.