The hapless ramblings of an intoxicated web designer.

There’s plenty of statistics services out there. Google analytics and Statcounter are market leaders, and offer incredibly detailed visitor behaviour statistics. Over time you realise that there’s still missing something though. If only there was some way to understand your user behaviour at a glance. It seems that heatmaps are the solution.

What is a heatmap?

Heatmaps record where your users click within your website, and then compiles the information into a intensity map showing your clicking hotspots.

How will a heatmap be useful to me?

At a glance you can see what areas of your site are performing best. You can even see when users are becoming confused and clicking in the wrong places. This information, if used correctly, can prove invaluble for improving your user experience, ad performance and navigation.

How do I set up a heatmap?

Crazyegg offer a paid service with a powerful heatmap and statistics service. If you don’t want to spend any money though you can use the free heatmap script Clickheat provided by Labsmedia.

Popularity: 15% [?]

This is perhaps the greatest tool in any web designer’s arsenal, and also perhaps the most overlooked. I notice many web designers shy away from the idea of copying ideas, design elements, color schemes or styles. To me this seems like madness.

The impossibility of individuality

It helps to realise the vastness of the internet, and then to consider what it would take to make each and every one of those sites entirely unique. I also like to consider the overwhelming similarities in basic structure that have developed over the years.

How many websites that you know of don’t have the following?

- A logo in the top left hand corner.
- A header, content area and footer.
- A ‘navigation bar’.
- A ‘home’ page.

Clearly even the most original of web designs have some form of benchmarking involved.

The benchmarking process

Benchmarking in web design is the process of visiting numerous websites and extracting the best features from each of them. Personally, I use a pad and paper and note down the features I like and the features I don’t like. Visiting rival websites is an even more targeted way to see what they are doing right, and also what they are doing wrong.

As your list builds up you’ll find appealing ideas crossing over from all the different sites you have visited. Eventually you’ll be able to develop a seemingly original idea that learns from the lessons of the past.

Choosing a time to shine

Originality certainly has its place in web design. Without it the internet wouldn’t be where it is today. Even the most talented though only have flashes of greatness periodically. The smart web designers use benchmarking for those times when ideas aren’t flashing into their heads.

Knowing the limits

There’s nothing web designers hate more than a copycat. Cloning, as it has come to be known, should be avoided. Many members of the online community immediately click the back button when they realise a site is exactly the same as another more established one. If you think about it this totally makes sense. Why would anyone want to use two sites that do (or look like) exactly the same thing?

My advice is to just take 1-2 of the best elements from each site and leave it at that. Remember that you tread on a thin line and resist temptation.

A place to start

- Awards sites are a great place to find quality web site examples. SEOmoz.org offer an excellent selection of sites from their web2.0 awards.

- Showcase sites are a talking shop for cutting edge web design. CSSbeauty.com is possibly my favourite. Here you can see the reactions of other designers to submitted work. CSSzengarden.com takes a different form. Here the site itself transforms to demonstrate quality designs.

- Sites you visit every day. Odds are that if you visit them, then there is something you like about their design.

- Don’t forget search engines. If you search for “top 10 websites” or “Web 2.0 designs” you are bound to find sites that interest you.

Go forth and benchmark

Clearly there’s no reason to shy away from the benchmarking concept. It’s a powerful tool you simply can’t afford to ignore. Just like the great artistic masters you’ve under-studied the past greats and, over time, developed your own mastery!

Popularity: 11% [?]

I thought I would re-post this since people seem to have found it useful. IE6 is a real problem for tableless designers. Its lack of W3C compliance tends to ruin our designs and we’re left with a choice between using ugly conditional comments and hacks. In some cases a feature will be totally unsupported and a web designer is forced to scrap his design.

Dean Edwards, a programmer from London, has a solution to some of these problems. Over the years he has been working on his unfortunately named ‘IE7′ compliance javascript libraries. The libraries fix many of IE6’s compliance issues. It also supports a number of CSS2 selectors as well as PNG transparency.

Unfortunately, like all javascripts, we must take account of the fact that they my be disabled by the end user. Therefore it’s important never to create design that depends upon these libraries for basic stability. They do, however, make an excellent addition for anyone looking to show off new selectors and other features, without risk of compromising the overall design.

Popularity: 14% [?]

Recently I’ve been quite excited about a module created by Mike Davidson and Mark Wubben.

Most experienced web designers realise that font selection is perhaps the greatest deciding factor in the success of any given design. CSS has given us the ability to modify existing fonts significantly. Unfortunately, we’re still limited to a small number of browser safe fonts.

The sIFR typography module uses flash actionscripts and javascript to replace existing fonts with rich typography. It’s an incredibly powerful tool. Most importantly it’s free.

How does it work?

sIFR downloads flash .swf files containing a custom font that is then held in the browser cache. This means you can effectively patch your user’s browser with a new font that doesn’t exist in their computer’s font library. Crucially sIFR can handle dynamic content since the .swf is a font library, rather than a simple static flash movie.

Degradation/Compatibility

sIFR degrades gracefully into default CSS fonts should you have your Javascript of flash disabled. It’s also fully accessible to screenreaders and other assistive technology. Matt May from the W3C has endorsed it as an accessible method to create rich typography on the web.

In terms of compatibility, sIFR works on Firfox, IE5+, Opera 7+, Safari and many other browsers. 90% of machines are said to be compatible (and that’s today). On non-compatible machines the module simply does not take effect.

Limitations

I’ve found there to be some minor speed issues. It’s advisable only to use the module on small headlines etc rather than whole paragraphs. Loading speeds are excellent though if used properly, and are invisible to the user.

Overall impression

I love this module. I will be using it in many of my future websites. It’s important though to remember that small proportion of people who can’t run the module, and make sure that the default CSS styles are also up to today’s high standards.

I think that sIFR is an excellent stop-gap measure. It’s badly needed as designer’s grapple with current font limitations. In the long-term however, browsers will have to find a way to support rich typography ranges. You can learn about the tool by visiting their website.

Popularity: 6% [?]

Remote mouse viewing is nothing new. There’s plenty of software out there that allows users to transmit their mouse movements and activity to another users’ screen. In a sense it was only a matter of time before the website usability trade got a hold of this concept.

A company called Tapefailure are one of the first on the scene. Robotreplay have also recently entered a free beta testing phase. The new services allow webmasters to monitor user activity in ‘video replay mode’. Essentially this is just like looking over the persons shoulder while they surf your site. Activity is tracked from the moment you enter a site using the script until you leave it.

Where’s my right to privacy?

Well I’m sorry to say that you don’t have any. In a sense you didn’t have any before. The vast majority of computers have hidden spyware that monitor your surfing for marketing purposes. Many sites already use services like google analytics to give incredibly detailed statistics about your surfing behaviour. The only new thing about this is that it doesn’t just record your activity - it watches your every mouse movement. It adds a very personalised touch to something that was previously very generalised.

I’m sure a lot of people reading this will be feeling outraged. I think it’s a growing concern in the society that we live in that we are being increasingly surveyed.

The flip side: better usability

As with any product that has a hard sell there tends to be a big advantage to make up for it. In this case it’s usability. By watching mouse movements webmasters can optimise their websites to make them easier to use for those who visit them, and more profitable. You can watch, for instance, a user that goes to the final confirmation of payment for one of your products and then backs out. Understanding customers is big business.

In addition, there’s thousands of hours of activity being recorded. The odds are you will never have your activity watched. If you think about it, this has been the case in the telephone call center industry for a decade now. Ever heard the “your call may be recorded for training purposes” message?

Webmasters will also find the software useful to convince their managers that something needs to be done that is affecting their business. User behaviour becomes more of a fact than a science when you are watching it in real-time.

Ease of use

Services like this are very easy to use. You simply have to insert a small snippet of code into your head section and activate your account on their website. The entire process takes 5 minutes.

Can I protect my privacy online?

Yes! Most modern browsers give users the ability to disable Javascripts from running while browsing. This will prevent the required mouse surveillance scripts from being activated. Unfortunately many (poorly designed?) sites use Javascript in their core functionality. Users therefore stand to lose a great deal of quality in their surfing as a result.

In the wrong hands

I do worry about the potential uses of software like this in the wrong hands. It could potentially be included in all sorts of nefarious activity. It’s worth noting though that the software only displays your browser window (rather than your computer screen). Certainly though the creators of this service will have to be very aware of the potential negative power of this technology.

I hope that this software plays a positive role in the internet and delivers on website usability while minimising the potential negatives. Perhaps an inclusion option for website web site users, “tick this box if you do not wish to have your mouse activity surveyed”? Then again, maybe this isn’t something companies want to advertise!

Popularity: 9% [?]

A friend of mine recently recommended a technique called design by grid to me. I must say that I am very impressed with this technique. For some time now I have been looking for a real strategy for laying out design elements.

Designing by grid has been around since the early days of the printing press. It is surprising, in fact, that it has taken so long to find its way into the web design world. Perhaps it got lost in the excitement during the early years of the internet, when people were more concerned with getting their .com up and running as soon as possible, rather than the subtleties of design. Certainly it’s still far from a standard practice in web design.

For one thing designing by grid helps me combat my fear of a blank canvas. It gives me some visual structure to start off from. This is a real problem for me, as I think it is for many designers. Getting good design ideas time after time is always a challenge and, just like beginning a novel, the first aspects of a design are always the hardest to decide upon.

In addition, I’ve found that design by grid helps people absorb my designs visually, making them somehow better. I find my designs are becoming more and more like eye candy at as I get better at using this system.

I’ve noticed though that design by grid is very geared towards certain types of websites. Many of the sites I design using a grid system end up having many columns and sometimes a slightly blocky feel to them. I hope that I can learn to apply this technique to all the websites that I work on.

Popularity: 6% [?]

John Chow is, quite possibly, the devil. His blog johnchow.com is dedicated to how much money he makes online, how he makes his money online and also, how awesome he is for making so much money online. Seeing a recurring pattern here?

Famously he’s recently had the idea of charging people to remove the nofollow attribute from their comment links. Now I know this might be stating the obvious, but wasn’t the nofollow attribute designed to prevent comment spam, and improve the quality of search engine SERPS?

Recently he has also had the bright idea of bribing people with backlinks in order to get them to use the words ‘make money online’ in his anchor text. Clearly this is done to fool Google and I’m surprised that he hasn’t been banned yet for this behaviour.

My pet hate today is people who write blog posts purely to target keywords. This sort of content for the sake of content is watering down the internet slowly but surely. It’s becoming rarer and rarer to see people writing because they want to express an opinion, or simply want to help others.

John isn’t the worst culprit though. At least his content is original, well written and, in some cases, useful to readers. The real prize has to go out to those invisible profiteers who are tirelessly plagiarising our content as we speak and re-posting it, plastered in adverts, all over the blogosphere.

That is not to say that I think it’s wrong to make a few bucks from your efforts. I think all bloggers should include one or two ads and get some compensation for their efforts. The main thing is to make sure your heart is in the right place and that you’re adding a positive contribution to the internet, rather than a negative one.

Popularity: 7% [?]