Articles

February 1st, 2010

Increase your conversion rates through geolocation

One of the most annoying things I find when filling in my address online is selecting the country. I have to search through a massive list and coming from the UK I have no idea if I need to find “United Kingdom”, “Great Britain”, “England” or some other variant. If I struggle occasionally with this (and I’m a web developer) other users must also find it hard.

Continued…

November 30th, 2009

Blue Beanie Day

I decided to modify my sites mascot and colour scheme in honour of Blue Beanie day. The aim of Blue Beanie day is to support web standards.

Continued…

November 23rd, 2009

Telling a user how to enable flash

When setting up some flash files at work I found some code I wrote which returns context sensitive instructions explaining to the user how to enable flash. I thought it was worth sharing.

There are normally 3 cases why the user cannot view a flash plugin:

  • Flash plugin not installed - user must install the Flash plugin
  • Newer version of the flash plugin is needed - user must upgrade their flash plugin
  • Javascript is disabled - user must enable javascript

I use SWFObject to embed flash. SWFObject is a well written piece of javascript which allows you to add flash in a progressivly enhanced way. It does this by replacing the contents of a HTML element that you set. If something goes wrong, for instance the user does not have flash, the original contents of the the selected HTML container are shown.  However this means that if javascript is disabled, the flash will not run.

There are two cases we should code for:

  • If javascript is disabled,  the user should be told to enable javascript
  • Flash is not installed (or the wrong version),  the user need to be told to install the latest flash player

The code

For the HTML we have this:

<div id="flashDiv">
    <img src="/images/videoImage.jpg" alt="Alternative
        image for video" />

       <p id="noscript">To view this video online please
        enable javascript.</p>

        <p id="noflash" class="hideContent">
         To view this video online please
        <a href="http://get.adobe.com/flashplayer/">install
        the Flash player</a>
    </p>
</div>

We have a DIV with an ID of “flashDiv”. If javascript is enabled and flash is installed swfobject will replace the contents of this with the flash file we want to see, in this case it would be a video. Alternatively if the flash has failed, the original contents of this DIV will show instead. This will include a nice picture showing what the user is missing out on along with two instructions to help them enable flash. The instructions are either to enable javascript or to install flash.

We want only one of these to show at any time. On the bottom paragraph, I have added a class called hideContent. This has the following CSS.

.hideContent {
    display:none;
    visibility:hidden;
}

This class hides any element it is added to, currently the bottom paragraph. We also have some javascript which is run:

var noscript = document.getElementById("noscript");
var noflash = document.getElementById("noflash");

if (noscript) noscript.className = "hideContent";
if (noflash) noflash.className = ""

From this you can see that the javascript will remove the hideContent class from our disabled flash paragraph showing it to the user. The javascript will also add the hideContent class to the disabled javascript paragraph hiding it from view.

Therefore the following will happen:

  • If javascript is disabled, the flash instruction will not show but the enable javascript instruction will
  • If javascript is enabled but SWFObject has failed to add the flash to the DIV, either the Flash plug-in is missing or the wrong version. Therefore we let the javascript run and hide the enable javascript message and show the install Flash message instead

Putting all this code together you get:

<div id="flashDiv">
    <img src="/images/splashImage.jpg"
          alt="Alternative flash image" />

    <p id="noscript">To view this video online please
           enable javascript.</p>
    <p id="noflash" class="hideContent">
        To view this video online please
           <a href="http://get.adobe.com/flashplayer/">
           install the Flash player</a>
    </p>
</div>

<script type="text/javascript">
    var flashvars = {}
    var params = {};
    var attributes = {};

    swfobject.embedSWF("/files/player.swf", "flashDiv",
           512, 312, "9.0.0", "files/expressInstall.swf",
          flashvars, params, attributes);

    var noscript = document.getElementById("noscript");
    var noflash = document.getElementById("noflash");

    if (noscript) noscript.className = "hideContent";
    if (noflash) noflash.className = ""
</script>

You may view a live example of this (with some minor additions) on the British Museum website.

Using this technique the user will receieve specific instructions on how to get flash working on their computer rather than some generic message.

This is using basic javascript but can be quite easily altered to use jQuery and to find class names instead of ID’s, let me know if you would like any more enhancments.

Continued…

November 9th, 2009

How web standards save you time and money

At the J.Boye Aarhus 09 conference I was asked to speak on web standards. As I was presenting to a business audience I gave a business case as to why you should use standards.

Continued…

November 3rd, 2009

Prototyping with paper, scissors and glue

It is my first day at J.Boye Aarhus 2009 and after getting up at 3:35 this morning I arrived in time to turn up to the second tutorial. I decided to go to Prototyping: Fun with Paper, Pen, Scissor and Glue Stick by Henrik Olsen.

Continued…

October 29th, 2009

Install all your Firefox plugins in one step

If you are like me and have many Firefox plugins you will know how much of a pain it can be when you need to install them all onto another computer. I recently was doing this on a number of computers and decided to find a better way to install my favourite plugins.

Continued…

October 20th, 2009

Attending J Boye Conference – Aarhus 2009

First, just wanted to drop a post to apologise for not posting as much recently.  I came down with the Flu (with a captial F) and it has meant me catching up with a lot of work since I have recovered.

However, I am now back and healthy and will be writing more posts over the next months and also attending a conferance.

Continued…

September 15th, 2009

The pain of sending HTML email with Outlook 2007

Recently it was time to re-look at our html emails working on some issues that had cropped up and general autumn cleaning.  This also coincided with Office 2007 deployed to the organisation sending the emails.  Office 2007 also means the fun of Outlook 2007.  Outlook 2007 had not been written when we last wrote our collection of html email so we also had to get them working in this fun email client.

Continued…

July 26th, 2009

Build scripts for CSS

When coding CSS it is now good practice to separate out different parts of the CSS into different files.  I tend to do this in the following manner:

Continued…

July 18th, 2009

Usability tests without the users

Everyone is in agreement that usability testing is good.  This normally involves testing users against an interface.  You find appropriate users and through software such as Morae or Silverback you can test and record their actions.  From the user responses you can fix any problems found.  But… how much information can you get without the users?

Continued…

Head of teddy bear appearing over the footer