I am currently working on a site for a holiday apartments business in Devon (You can see the site in development here: http://beta.vomero.co.uk).

The problem

Because of the nature of the business, high quality photography and showing lots of images of what to expect on your stay are really important. However the time taken to download all these images can slow the page from loading.

The solution

The solution is to load the images once the body of the page has loaded - in a similar way how the iPhone does things - show the raw information quickly, then flesh it out with images afterwards.

The basic idea is to ensure that the space for the image is allocated correctly (to avoid layout problems whilst the image loads) and to initially display a small animated icon (such as one from preloaders.net) until the 'real' image is ready to be displayed.

The best way of doing this seems to be adding an extra element to the page which can have the background set as the animated .gif - This way you can have the animation appear at 100% size in the centre of the block, rather than having it stretch to the width of you real image.

Existing methods

There are several solutions floating around for methods of doing this, but none were suitable for me to use for this site. I need to be able to declare the image source within the HTML and not as a variable within a JavaScript file. Other solutions seemed to use non-standard attributes to store the url for the 'real' image, but I wanted to ensure that the home page passed the W3C Validator.

Many other methods also required adding extra mark-up to your page which I was keen to avoid.

My jQuery method

My method doesn't require any additional HTML elements to be added, instead we use the wrap and unwrap functions to do all the hard work for us - These were added to the framework in version 1.4

Requirements:

• A loading animation
• A 1x1 transparent gif
• And of course the jQuery framework (v1.4+ for wrap and unwrap functions)

We then add an image to our page in this way:

<img src="/images/blank.gif" height="200" width="300" class="delayLoad" onmouseover="this.src = '/photos/myphoto.jpg'" />

Then add a CSS class to display out loading animation:

.delayLoad {
background: url('images/loading.gif') no-repeat 50% 50%;
}

So this would now work, and display the image when the user hovers their mouse over the image, but let's use jQuery to find all these images and execute the mosueover function for us.

// Load images once the page has loaded
    jQuery("img.delayLoad").each(function() {
       
        // Create a new span element which we will wrap around our image
        // Using a span because if the image was inside an <a> tag then online inline elements should be used
        var delaySpan =  document.createElement("span");

        with (jQuery(this)) {
            // Handle images that are hidden, otherwise display mode for the span should be block (inline doesn't work properly)
            if (css('display') == 'none') {
                var _display = 'none' } else {
                var _display = 'block' }
           
            // Copy the style from the image into a new object (this means you don't need to worry about styling this span within your CSS)
            var cssObj = {
                'height' : css('height'),
                'width' : css('width'),
                'margin-top' : css('margin-top'),
                'margin-right' : css('margin-right'),
                'margin-bottom' : css('margin-bottom'),
                'margin-left' : css('margin-left'),
                'background-image' : css('background-image'),
                'background-color' : css('background-color'),
                'background-repeat' : css('background-repeat'),
                // Hack for now, becuase IE doesn't seem to read the background-position property correctly
                'background-position' : '50% 50%',
                'display' : _display
            }
        }
       
        // Apply our style properties to our span    
        jQuery(delaySpan).css(cssObj);
       
        // Wrap the image in the span
        jQuery(this).wrap(delaySpan)
       
        // Hide the image (leaving just the span visible
        .hide()
       
        // Simulate the mouse over the image, whcih will cause it to switch the img src
        .mouseover()
       
        // Remove the mouseover attribute (since we don't want to update the img src every time the user does a mouseover
        .removeAttr("onmouseover")

        // Simulate the mouse moving out of the image (To reset the image to its normal state)
        .mouseout()

        // Once the image is loaded, perform a function
        .load(function () {
            // Fade the image in
            // Remove the span by unwrapping the image
            jQuery(this).fadeIn().unwrap();
        });
    });    

Test it

I found using Firefox Throttle really handy to slow things down, whilst keeping an eye on the Firebug net panel, to see exactly what was happening as the page loads.

Limitations

As with all of these techniques to load images after the DOM is ready, search engine crawlers, or browsers without JavaScript enabled are not going to see your 'real' images. But I just don't see a way around this - if you include the 'real' image url in the DOM then it will get loaded alongside the rest of the page content, causing a possible delay in the page being shown to the user.

Why not just use the onload event and save the necessity for jQuery? - I had tried using onload="this.src='/photos/myphoto.jpg'" but this event seemed to be firing before the rest of the DOM was ready - defeating the purpose of what we are doing.

I hope this helps, let me know your thoughts.

The use of HTML in email allows us to create engaging and branded messages, but achieving consistency across a variety of desktop and web based clients is a minefield of disappointment. There are sensible reasons for restricting some HTML features within an email message, although the features that different email clients choose to honour vary greatly.

Email distribution firm Campaign Monitor have put together a great article which details the features that are supported by each client. Most notably, corporate favourite Microsoft Outlook 2007 has particularly poor support for many basic HTML and CSS features - most frustratingly it will not display background images either as CSS styles or HTML tag attributes.

Knowing the restrictions of HTML email I was recently able to design an email template for a client which would render consistently across all email clients. I started by designing a standard HTML page with a set of CSS styles and then used the excellent Premailer tool which converts all CSS styles into in-line styles. This is an important task to ensure compatibility, but would be an arduous process to do by hand - what's more Premailer also provides a reminder of compatibility issues that may occur based on the HTML code you provide - Very handy!

TV's are pretty expensive bits of kit, yet the chances are you have bought a new one since 2001 right?... Whether you upgraded to replace failing equipment, or to keep up with newer technologies such as plasma, LCD or high definition, that old bulky CRT just wouldn't seem right as your primary TV any more.

So why are over 7% of internet users still using Microsoft Internet Explorer 6?

IE6 was launched back in 2001 and since then many new browsers have emerged such as Mozilla Firefox and Google Chrome, not to mention versions 7 and 8 or Microsoft's offering - yet despite upgrading to any of these browsers being completely free, many users are still using software that we used at a time when less than 1% of us had broadband connections - 9 years is a long time in the history of the internet.

The reason for the frustration you may be able to sense in this post is that designing websites which work with IE6 is incredibly time consuming as this browser doesn't adhere to the rules of HTML - and as I like to keep up to date with technology I don't even have access to an IE6 browser any more, which makes identifying these bugs tricky.

Fortunately help is at hand from GeoTek's NetRenderer which allows you to see what any site looks like in this antiquated browser - very handy!

I worked an interesting conference today which wasn't scheduled to finish until 16:00, although the England vs Slovenia game kicked off at 15:00.

My client didn't want to frustrate their colleagues who we in attendance but was not able to change the timing of the meeting. The solution? I used a Freeview hard drive recorder to time-shift the game, allowing the conference to watch the game as live, one hour behind the actual start time.

This allowed the conference to go ahead as planned, and keep the attention of all the attendees since they were safe in the knowledge they wouldn't miss a second of the game.

So the iPad has been launched here in the UK today. Whilst I'm not completely sure of the need it fulfils, if the sales figures in the US are anything to go on it is set to be a hit here too.

The really exciting bit from a Purple Pixel angle, is that the iPad is Apple's first handheld device that supports high definition video, so we look forward to working on future projects that can be delivered in 720p HD, ready to play on the iPad.

Today I left my role of Web and Digital Manager at Sport England after nearly two years of providing new and innovative services to support the Communication Team.

I am a little sad to leave be leaving the great team they have there, but I am excited about the possibility to work full time for Purple Pixel and continue to do some great multimedia projects with new and exciting clients.

After working closely with our Internal Communications Manager and a design agency, today we launched our new intranet here at Sport England.

Branded 'The Score', the new site is built on a CMS called DotNetNuke. I have introduced many custom modules to produce an intranet that meets the requirements of the organisation, and is a worthy replacement of our old SharePoint based intranet, which had become sluggish and inaccurate.

At the core of the rationale for developing a new intranet was the need to update the information architecture to align it to a new organisational structure.  Doing this involved some tough decisions, but working with key individuals, information is now presented clearly and in a logical manner.

We were also keen for The Score to improve the way in which colleagues communicate, so we introduced the ability for anyone to be able to write blogs on behalf of their team which appear on the homepage, making The Score a much more powerful communication channel than it ever had been previously.

Finally we wanted to introduce a personal element to the site, so a photo of each colleague now appears on dedicated team pages, along with a short description of their role. Colleague photos are also used throughout the site next to any blog posts or comments they write, to allow people to better recognise the individual contributing to The Score.

The entire project was delivered on time and on budget, and was experience for me to work along side a design agency for some elements of the look and feel, whilst implementing and building the designs.

Sport England had their annual All Colleague Day today. As the Digital and Web Manager I was asked to support various elements of the conference, including the production of a video to close the conference.

Using techniques I have used on other projects, I decided to produce a 'same day edit' in which I shot and edited footage, and set it to music during the course of the conference in time for the video to be shown at the end of the day.

Prior to the conference I worked with the conference organiser and discussed the tempo of the video and selected a piece of music to use, this allowed me to plan the shots I would need to look for on the day. During the course of the day a series of awards were presented to recognise individuals for their excellent work. I was given the names of the winners in advance which meant I was able to pick up shots of these colleagues during the day and include them along with some animated graphics detailing their award.

My colleagues found seeing themselves in a wrap-up video which captured the events and emotion of the day very entertaining, they left in a positive mood, looking forward to seeing the next same day edit!