General

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…

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…

June 10th, 2009

Enhancing websites on a shoestring budget

Firstly, apologies for a delay in the updating this site, I have been very busy preparing for a conference and getting the portfolio section for the website ready (coming soon).

Below are my slides for the World Wide Wonder conference at the V&A I was speaking at today.

Continued…

May 11th, 2009

Fake sign at Picadilly Circus

I was walking out of Piccadilly Circus last week and noticed a fake sign that someone had hung up at the station.

Continued…

May 2nd, 2009

Welcome

Welcome to the first post of We love nice things.  I have decided to develop and write articles on this website from what I have learnt over past years.

Continued…

Head of teddy bear appearing over the footer