I’ve been working on redesigning the homepage of the company I work for (more on that below) and I wanted to go beyond the usual html, css, flash bit that I normally do. I decided to stay away from having any Flash on the homepage because I want it to be easier to update. I also wanted it to be completely optimized for search engines without looking too cluttered. I found the perfect solution while attending a Webinar that featured www.salesforce.com. On Sales Force’s site, they have their pretty home page with flash, buttons, calls to action and all the things a site should have. It’s not very text heavy and their keywords are used only a few times. That is until you see the expanding box with tabs at the bottom.

Sales Force takes advantage of hidden elements. Not hidden by CSS necessarily but hidden from plain site. The box at the bottom of their page shows a paragraph or so of text (including the H1 tag with optimized keywords) but has an expand button to show the rest of the copy beneath it. There’s a lot. And it’s keyword dense. As if that werent’ enough, you can click on their “related searches” tab and it will show you a huge list of keywords with supporting content under each one. Genius. But wait, there’s more. The next tab is for “popular searches”. I’m sure that Sales Force defines these as “popular” based on what they want to be popular. Very clever. This is a huge list of linked keywords of their choosing. It’s ingenious and I love it. The end result is that you give the customer enough info to read if they want but you’re not smothering the page with it. At the same time the search engines see paragraph upon paragraph and link upon link of keyword rich text.

The other clever thing they do is to place all of this keyword rich content toward the top of the code and then use CSS to position at the bottom of the rendered page. Search Engines see it first, people don’t. Again – very clever.

So the natural thing for me to do was to copy this. As I set out to do so I knew I would need some help. I’m not great at all at javascript and I had recently looked into jQuery a bit. First off, let me just say that jQuery’s website is masterfully built. The demos, the documentation, the auto-compiled download, the information, the samples – it’s all amazing. So, with very little knowledge about javascript, I was able to download jQuery with the “Tabs” script installed, get it running on the site and then install a plugin called “expandable”. This allowed for the slick little “[+] Read More” text to function after a certain amount of characters of text. I’m lovin’ it.

Here’s the page I’ve been building. By the time anyone reads this, it willprobably be located here: Human Machine Interface Terminals and Mobile Data Terminals. Sorry for the shameless plug. I couldn’t help myself. I made some tweaks to the CSS and it all worked out great. There are a lot of other neat features of jQuery but I was glad to be able to put a few into use pretty quickly and easily. So this is my official shout out to the folks who develop and promote jQuery: Thank you.

Peace out,
Nils