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.

I learned ColdFusion in DreamWeaver. For that matter, I've learned HTML, CSS, JavaScript and PHP in DreamWeaver too, so it's been fairly difficult for me to completely switch over to Eclipse even though I actually prefer working in Eclipse more than I do DreamWeaver. For some reason I just feel like I'm 'really' coding when I'm working in Eclipse. I don't feel like a 'serious' programmer when I'm working in DreamWeaver. So, I've decided to share some of the things I've done to make the migration a bit more tolerable.

First off I have Eclipse 3.3.1.1 Europa J2EE. I'm sticking with that platform for now because the latest Eclipse release, Ganymede, doesn't play to well with CFEclipse.

Then I installed CFEclipse, and added the ColdFusion extensions for Eclipse, the ColdFusion 8 help files for Eclipse, the ColdFusion 8 Syntax dictionaries, and finally plugged CFEclipse in to the CFLib and CFSnippets snippex servers.

After that, I installed Aptana. Except for the annoying 'upgrade to pro' messages they send, Aptana's really nice. What I really like about Aptana, is it's great HTML, CSS and JavaScript functionality. Coding web pages in Aptana is a snap, and since I'm a snippets freak, Aptana's snippets view helps me make the transition to Eclipse that much easier. The most important thing I needed from Aptana though, was remote FTP view. Being able to FTP from within the IDE was definitely keeping me tied to DreamWeaver, and by removing the key bindings in Eclipse for CTRL+Shift+U, and CTRL+Shift+D, I was then able to take advantage of the default GET and PUT FTP shortcuts that were so familiar to me from working in DreamWeaver. CTRL+Shift+U (PUT File via FTP ), CTRL+Shift+D (GET File via FTP). I live by these shortcuts.

Snippets are a way of life for me in DreamWeaver. Once I create something reusable, it goes in to a snippet folder, and I assign a keyboard shortcut to it. One thing that really sold me on CFEclipse, was the awesome job Mark Drew did on making snippet variable regions. That's too damned cool. For working with HTML, CSS and JavaScript snippets, I've just added the snippets view from Aptana to my CFEclipse perspective and the same with my Aptana view, I added the sniptree view to my Aptana perspective. That way, I can get the best of both worlds. For more customizations, I decided to install JSEclipse for my JavaScript work. JSEclipse is also really nice.

So, it may still take me a bit to get used to Eclipse, but I'm going to do my damndest to make it my primary IDE.

I went down to Miami with my good friend Mark from A List SEO to BarCamp Miami ... I didn't have tickets to the show I really wanted to be at, the Future of Web Apps, So I figured that at least I could hang out and get to meet some people at BarCamp.

Well, meet people I did ... and a lot of them. I was lucky enough to hang out and eat dinner with Larry Masters, the master mind behind the CakePHP framework. From our talks, I am definitely going to be checking out how I can start reaping the rewards of CakePHP as a rapid application development Framework.

Some of the other great guys that I spoke with were Kevin Marks, a developer advocate from Google ... Edgar Caballero, the senior technology consultant from Altra-App ... Jason Baptiste, CEO of Publictivity ... David Di Cillo, web and print designer with ThirtyNine ... Gary Schulthesis, & Craig Agranoff from Vois ... Sunir Shah from FreshBooks ... Eamon O'Connor from Refraction Films ... Onajide Shabakaka from the Miami Art Exchange ... and many more ...

So, from what I thought was going to be a nice get away turned out to be a networking home run ... some of these guys are making really big moves in the development community ... most notably, is Larry ... if that guys team works on a web application ... you are almost guaranteed that it's going to be rock solid.