Wes Cutshall

Thanks to Stumbleupon, I discovered this service about a week ago. ClickTale utilizes JavaScript cursor position (X/Y coordinate) tracking to generate both website user interaction “videos” and interaction maps for your website. Where Analytics can tell you a navigation path (page A, then page B, then page C), ClickTale can show you exactly what a user did on a page in between the clicks. You can replay a user’s visit to your website. You see the content of your website with a cursor moving over the site just as the user navigated the website. You can see mouse movement, clicks, page scrolling, and in some cases the characters that were typed into form fields (this only works on some recordings, so I assume it’s browser or OS-dependent, the majority of recordingss showed “?” instead of the exact character) in real time. This service can be very useful for solving website interaction issues, some that you don’t even know you have.

If your conversion rate is low you can see exactly where users quit using your registration or order form. If only JavaScript could also record audio it would be just like being there (“Ahh, too expensive.” <exit>). I tested ClickTale on Naming Force and found it very intriguing to watch people using the website. I focused on users who visited the New Assignment page. You can narrow down the recordings to view users who viewed a certain page, among other parameters. The recordings start as the users entered the website, so you get to see how they navigated to the page in question, as well as what they did on that page.

One of the most shocking things I saw was that most of the users scrolled all the way down the home page, when the home page was the site entry point. With so much talk about Above the Fold I was a bit surprised that the content was engaging enough that most of the users scrolled down the whole home page before using any of the navigation items. Pleasant surprise. As far as conversions on the New Assignment page, I haven’t yet found anything that has lead me to modify the form. Many users visit the page briefly without scrolling, which shows that they simply are checking the site out without much interest in submitting an assignment (yet). Very few users started to fill out the form only to exit the page. Of the users that started to fill out the form and then exited, most of them (less than a handful with my small one-week sample size) seemed to do so after viewing the (very affordable) prices. This has brought up the question of whether the package options should be moved to the top of the page, but in regards to conversions, I don’t see how this would matter one way or the other. The only interface change that has been made at this point due to watching ClickTale videos happened to be on a somewhat unimportant page. But, it revealed some interesting UI issues. Naming Force has a Random Name Generator for users to use. It consists of a large white box with a button underneath. You click the button, repeatedly, to generate random names that appear inside the white box. I watched one user visit this page and click 20-30 times inside the white box, in various spots, never clicking the bright orange button underneath, only to (I assume, frustratingly) leave the page. So, I added “click button below” inside the white box, as somehow it wasn’t obvious to at least one person. Hopefully I’ll find enhancements I can make to some of the more important pages based on these interaction videos.

One of the other features of ClickTale is the Heatmaps. Heatmaps take all the data collected, mouse move, click, scroll, etc and chart them on an overlay of your website. This gives you an idea of where people are concentrating their focus on your pages. Mouse move and click are pretty straight forward, you can see a heatmap of the most concentrated areas (see image below). Scroll reach is another heatmap that might need some explanation. This heatmap maps the percentage of users who scrolled down where the part of the page was in the browser window. This is where the Above the Fold theory can be tested for your site without watching hundreds of videos.

Mouse Move and Scroll Reach Heatmaps

Overall the ability to record user mouse movement and play it back is pretty incredible. The only problem I see with ClickTale is that the prices are a bit unrealistic for the majority of us smaller website owners. In order to view details for pages that are not my top URL on Naming Force, for example, I had to sign up for the subscription that is $290 / month. I don’t see myself continuing this service past a month, which is a real shame for ClickTale. I’d happily pay $30-$50 a month, but I can’t find $290 worth of modifications to make each month to make the subscription worth sticking with. I feel like this service’s business model should be to get users to sign up for an insignificant amount and allow them to “forget” that they have the subscription, or technically just to not care enough to cancel it and allow it to recharge them for years. Users won’t want to cancel a $50/month subscription, just in case they want to look through the collected data in the future, and ClickTale could make a lot more through long-term subscriptions, IMO.

What is it?

In short, jQuery is a JavaScript library that makes it easier to do some of the things you do in JS every time you create a new website. If you adopt jQuery for even one website you will end up adopting it for every website after that.  JQuery changes the way you select and modify HTML elements in JavaScript.

I’ve never been big on JavaScript libraries, since I feel that I can just about write anything in JS that I need. Although I will Google for code from time to time, I’ve just never found much of a need for a JS library. I will admit  that I’ve used Yahoo’s drag’n'drop controls on LeagueAce.com, though. I had heard of jQuery, or at least seen mentions of it in forum posts, but never tried to discover what it was. Then one day, when I had absolutely nothing to do, I Googled “jQuery”. Now, jQuery’s website isn’t the best place to figure out what it does, IMO. I had to read a few blog posts and then read through the jQuery documentation before it made any sense. I think that jQuery could do a much better job of explaining what it is to newbies on their website.

JQuery Example Usage

The most common use of jQuery is to easily select and modify HTML objects in JavaScript. Please note that the following code examples are not tested, are from my memory, and might need slight changes to actually work. Where we normally code “document.getElementById(element).className = class” we can now code “$(element).addClass(class)“. Where we normally have to write a loop in order to get the value of a selected dropdown item with standard JS, in jQuery we can instead code “var test = $(element).val()“. JQuery simplifies the process of selecting the correct HTML element, changing its properties, getting it’s value, etc. JQuery allows you to select elements in different ways, which is one of the coolest features. You can select an element via it’s HTML ID ($(“#id”)), via the tag type ($(“:input text”)), via CSS class ($(“.class”)), etc. JQuery can also select elements based on parent-child relationships. So you could select every text input element inside of a DIV with the ID of “divTest” ($(“:input text”, “$divTest”)), for example. As mentioned in the dropdown menu example jQuery has foreach ability for looping through elements that are selected. JQuery allows you to string together methods so you could make multiple changes to one object by simply adding “.method1(value1).method2(value2)” to the end of your command.

Summary

JQuery has some other features, like transition effects, that are “nice” but far from the reason why I started using it on all my new websites. The simplicity of how you can select HTML elements makes you wish that JavaScript had been written like this from the beginning.

I recently ran into a problem with a 3rd party JavaScript source call slowing down the load of one of my sites. I decided to change the code to perform a document.write of the external source tag when the page’s initialize JS code ran. Apparently the 3rd party developers wrote code to test for the correct insertion of their code, and whenever I made this change the script suddenly stops working, and instead pops up a JS alert saying that you need to place the code between the “<body></body>” tags. Their validation code is erroneous, but that doesn’t help me. I ended up finding a solution to my problem in the following script I found online. Somehow adding the code dynamically do the head tag doesn’t trigger the same warning, and the script still works.

var head= document.getElementsByTagName(‘head’)[0];
var script= document.createElement(‘script’);
script.type= ‘text/javascript’;
script.src= ‘http://www.example.com/script.js’;
head.appendChild(script);

I have 6 Firefox plug-ins, or “add-ons“,  that have made my life as a web developer much easier. Some of them I don’t know how I ever got along without. Here’s a quick rundown of the plug-ins I use every day. We’ll start with the least useful and move the most useful tool I have, period, for web development.

Window Resizer

It’s a simple tool for resizing your application window to common screen resolutions. Once installed you right-click the page and bring up the dialogue. Choose your screen resolution and the application window resizes. Great for making sure your website fits in various resolutions.

Screengrab

What is it about Windows screen capture that CRASHES it if you do not reboot your PC often enough? I’ve had this problem on countless computers across at LEAST 3 different OS’s and don’t know why Microsoft cannot get this fixed. Either through the Print Screen key or using Vista’s Snipping Tool, the core application for screen grabbing crashes and you’re stuck without being able to get a screengrab without rebooting. I often send customers screengrabs when they simply cannot understand what I’m talking about. Sometimes, “Select the item and click ‘delete’” doesn’t come across correctly in an email, and a screengrab always ends the conflict. The Firefox add-on Screengrab works even when Vista’s print screen feature has crashed! I actually downloaded this add-on right after discovering that Vista’s screen capture was not working that day, installed it, and immediately made the grab I needed. You can choose to grab the whole page or just a selection. You can either save or copy the grab to the clipboard. Most of the time I take a screengrab into Photoshop and add comments, so this is a great tool for me.

Colorzilla

Colorzilla is a simple color picker tool that will give you the RGB and HEX code value of any color on a web page, even images. Drag the cursor over the element and your status bar now shows the color values of whatever color you are hovering over. Great tool for when you forget what colors you used on a certain page or want to use the same colors as another site. I don’t use this a ton but it’s an awesome tool for the times when I want to do this.

IE Tab

No more needing to open a new Internet Explorer window in order to test your design in IE. IE Tab allows you to open a new Firefox tab that runs the IE rendering engine inside of it. It will load the address of the current tab so that you can see how your current design is working out. Of course it cannot share cookies between the two browser engines, so you might have to sign in if you’re checking out a secure section of your site.

MeausureIt

This awesome tool allows you to draw rectangles over a web page and it gives you width and height measurements of your rectangle. I use this all the time. Whether I’m checking to see if an element is displaying as wide as I specified, or trying to figure out how much room I have for an icon, I find many uses for this tool.

Firebug

Hands down the most important add-on there is for a web developer. Especially if you write JavaScript. Browsers have been notoriously poor at giving developers information on JavaScript errors. They will tell us when and where the error occurred, then leave us to search through the code for line #1304. And why was it that older versions of IE were ALWAYS off by one line? If you develop with some type of server-side scripting language it can make it harder to find the bug because you have to View Source since your actual code lines will not line up with what is rendered by the browser. And Firebug will crawl deep into your included/source JavaScript files for you. Firebug allows you to click the “# errors” link at the bottom of the status bar to jump right to the line (in a small window) that caused the error. Although I don’t use, I believe you can even view the value of some variables at the time of the error (don’t quote me on that). Beyond JS you can use Firebug to view the HTML of any section of a website. Firebug’s Inspect Element feature allows you to mouse over sections of the web page and view the HTML for that element. And in reverse, you can run through the HTML of a page and click on a tag to see the element highlighted on the page. This is huge for looking for HTML bugs of any type, and DHTML/CSS developers like myself need this. There are other features but that’s mostly what I use it for, and it saves me a ton of time.

Obfuscation, it’s not just a fun word…it’s useful! Every once in a while you do something that is so simple, yet so valuable, that it just makes you feel good – like you actually did something complicated and are reaping the rewards. Today I had the need to obfuscate some JavaScript and I found this online JavaScript obfuscation tool. I had tried one already and it had failed to work with my code, but this one worked like a charm. It is possible to de-obfuscate obfuscated code, but the casual HTML coder won’t even understand what they’re looking at. You’re preventing a person from looking at your HTML and saying, “Hey, this is nice, I can use this!” but not preventing someone from deciding to copy your site outright.