Florida SEO Says, "Dear JavaScript ... Will You Ever Forgive Me? "

In my last post ... I attempted to explain how pure JavaScript menus were not good for SEO. However, after reading how the message came across to some of my readers, I feel it's probably best if I add some clarification. Thanks to Dan Switzer at PengoWorks for pointing out that my post needed some explanation. What I mentioned regarded the usage of pure JavaScript menus -Not All- JavaScript menus. If my post confused anyone, I apologize. There are lot's of SEO friendly menus that incorporate both JavaScript and yet maintain good web design practices ... So, now let's take a look at a few that stuck out with me.

In my humble opinion, menus that use JavaScript to manipulate the DOM (Document Object Model) and CSS (Cascading Style Sheets) to handle styling, maintain a good balance between usability and provide a dynamically appealing experience.

Okay ... So Show Me Some Cool Stuff Now

Before I show the following examples I want to point out the main factor that make these menus search engine friendly is the accessibility of the links to the robots. These menus do not rely on JavaScript to display the content either.

The first example here is from one of the most respected names in design ... A List Apart. Here Dave Shea provides an excellent detail on creating a menu implementing CSS Sprites with JQuery.

1. CSS Sprites2 - It's JavaScript Time

A List Apart
by: Dave Shea

Next, one of my favorite designers, Collis Ta'eed provides in exhaustive detail, everything required to create a very attractive and effective tabbed content area using CSS & JQuery ...

2. Slick Tabbed Content Area using CSS & JQuery

NetTuts
by: Collis Ta'eed

Soh Tanaka offers a very clean and attractive JQuery & CSS menu. Aside from issues with IE6's non-support of the :hover psuedo-class for elements other than anchor tags, this is a very good menu and degrades gracefully with JavaScript disabled.

3. Sexy Drop Down Menu w JQuery & CSS

Noupe
by: Soh Tanaka

Clark gives a solid example of how to create an animated drop down menu that also degrades well with JavaScript disabled - The key here is that the animation on the list elements is acceptable regardless of whether the visitor has JavaScript enabled.

4. Animated Drop Down Menu with jQuery

ClarkLab

Okay ... I'm not a great designer by any sense. But, when I created this site I decided I wanted a little DHTML action and of course promote good SEO techniques at the same time ... So, I used Adobe's Spry  Accordion Widget to build my right navigation ... It too degrades gracefully with JavaScript disabled - The menus tabs will simply open up if JavaScript is not activated.

5. SEO Compliant Spry Accordion Menu

by: Adobe Lab

There are many excellent examples out there ... I really just wanted to take a few minutes to clarify the difference between a pure JavaScript menu and a menu that uses JavaScript and CSS.

That's it.

Recently I decided that it's time to start paying a bit more attention to improving the visual presentation of one of my sites. The site's built in ColdFusion with lot's of nifty CF Ajax stuff thrown in. CFDiv's, CFWindows, and Pods here and there too. So, I figured since I'm not too bad at coding in CF - at least I can usually Google my way through most of the snags I run in to - I wanted to try challenging myself a bit by taking on something fairly foreign to me. Ajax.

I know the basics of Ajax. Asynchronous JavaScript with XML - Sending and receiving Http requests and responses to a server to return data to a site without refreshing the documents. However, I had little experience actually taking on an Ajax project. But if that wasn't difficult enough, I wanted to get really frustrated, so I decided to use a JavaScript library that I had little if any experience with - Entrance JQuery.

Now I've seen a lot of very groovy examples of the nifty UI tricks that can be done with JQuery. They are cool. But I really wanted to learn how to use JQuery for my specific needs. So, I did. I choose to launch my campaign with a real world example. So for my project, I mapped out what I wanted to do with ColdFusion, JQuery, and Some CFAjax stuff. Here's what I planned out ... First, I wanted to add a US database to my site, SEOMasterList.com, to build out some dynamic pages. The reasons for that should be quite apparent. I'm planning to obtain rankings and possibly monetize the site.

Next, I wanted to add some cool visual effects while providing improved functionality to the site, and possibly give visitors a better experience.

And finally, I just wanted to see if I could actually do it - two weeks in to it, I finished it. I have got to admit I spent a hell of a lot of time learning while trying to get the site done - someone with experience could have probably launched it in a matter of no time. But, I learned a lot.

Once I modified, installed, and built out the components to accommodate the addition of the database, I set up another component to dynamically bind the results from the database to two selects in a form. This was very challenging - I spent the better part of two days just trying to get the bindings to work. Luckily, I found a cool ColdFusion script and modified it to output my database queries to XML. That came in really handy. The first go at trying to output 80,000+ records to a single flat XML file didn't work out to well. I ended up rebuilding the data CFC's several times in order to get what I needed. I ended up with a 1.4 MB XML file that I'm now using to bind to the data in the selects.

After tackling that part of the project, I wanted to introduce some visually appealing effects to the site so I picked up the latest JQuery code and sent it up to my site. After some effort, I was successful in creating a pretty slick interface for my Ajax loaded form. Through the use of some nifty ('#div').show(),('#div').hide () functionality on the form page, I was able to add and remove elements of the page which weren't necessary at every stage of the form submission process. This proved to be tougher to implement than I had expected. Up to this point I have a form bound by CFC's to data, an asynchronous form handler to process a form submission, and some nifty JQuery going on to assist in dressing up my application modifications. All in all. I think it went really well - and I learned a whole hell of a lot doing it. If you want to see what I did ... have a heart ... I'm an Ajax nOOb. Check it out on SEOMasterList ...