Archive for Web Design


Extreme close-ups are a piece of cake with Magic Touch. In 3 minutes, I knocked together this impressive zoom:

Click to zoom in.

Very handy for showing huge photos without taking up much screen space.


Cool JavaScript turned off warning

I just spotted this thoughtfully crafted "JavaScript turned off" warning message on Get Satisfaction:

JavaScript turned off warning

JavaScript turned off warning

Not only is it a good looking message that you can't miss at the top of the page, but it's also a play on the legendary TPS report scene from Office Space. Nice touch.

When a site relies heavily on JavaScript, JavaScript turned off messages are important notices to the user. Without it, they may think the site is broken.

This requirement will be included in the next release of our book, Tick My Boxes – the checklist for building successful websites


Web developers’ checklist – book

Leon and I have just launched our book (in beta), Tick My Boxes.

The web developers' checklist

The web developers' checklist

It's a checklist for web developers, with 80 checkpoints of the key things to do when building a website.

If you build websites, you will know many of these things already. Having them in a checklist format, together with an explanation, helps you quickly tick off the things you should be doing. If you are new to building websites, the book will help you learn lots of the best practice techniques.

We released the book in beta so that we get feedback from developers which we will incorporate in the final version, to be released later in 2008.

The book is available for £9 from Lulu.

Visit the official website:


An effective AJAX alert box

This is one of the best AJAX alert boxes I have seen. The latest changes on Ebay's feedback system are important enough to warrant a deliberate notice to all users entering the feedback system.

What I like about this alert box:

  • Grey background. Just the right opacity – not too dark or light.
  • Close button and X in top right. Both common standards, so user knows exactly what to do.
  • "Don't show me this again" checkbox to put the user in control.
  • Yellow heading with gradient, consistent with operating system messages.
  • Shadow around the alert box to make it stand off the page.
  • Centred both horizontally and vertically.

Ebay alert box


Outstanding new TV advert

Have you watched the latest Dairy Milk advert? It has absolutely nothing to do with Dairy Milk chocolate, but it is an outstanding production.

Why did they do it? In the producers words…

Well it just seemed like the right thing to do.

I saw the advert on TV over the weekend and mentioned it to Neil "The Sport" Monnery yesterday who was also raving about it. Everything makes this advert outstanding – the choice of music (In the Air Tonight – Phil Collins), the special effects, the mimicking oh human behaviour, the filming, the timing, the irrelevance.

Web marketers will also nod in approval that the advert (deservedly) has it's own website and is supported by an Adwords campaign. Search on Google for Dairy Milk Advert and it ranks as the first sponsored result. Good attention to detail.

Comments (1)

Fresca wins top e-commerce award

Congratulations to Rubicon Retail and Fresca for winning the Best use of e-commerce in a retail environment in the European Retail Solutions awards. I know how committed Fresca is to building it's e-commerce platform so I'm chuffed to see the team recognised in the industry awards.

It's one thing for a web development team to build a one-off store but it's another to build a customisable e-commerce platform that can unleash a brand new store within 3 months. E-commerce providers have lots of clients, all asking for different features and in pressing timescales – it's a demanding, high pressure task.

It's worth pausing and looking at how far things have come from those crazy dotcom days. Back then, a world class e-commerce site would have cost you a few £million (and it was destined for failure). Nowadays, it'll only cost about £8,000 a month, and it'll generate £millions.


Sign-up forms and activation email

The WordPress sign-up process has some excellent features that are worth noting and incorporating into your own forms.

1. It highlights the email address to which the email activation code has been sent with a bright yellow background. This is a great way to draw people to the email address as the person may have input a mis-spelt email address. They can check it and correct it if it is wrong.

Wordpress - highlight the email address
2. It lets you update your personal profile while you are waiting for the activation code. There are numerous benefits here:

  • The user is kept occupied so does not waste time.
  • The user is less likely to forget and go and do something else.
  • WordPress gets more information on the user which gives them more data to work with (e.g. personalise any emails they send you with your first name).
  • It helps keep the signup form (on the previous page) really short and then gets the extra data they want (e.g. first name) afterwards. This will lead in a higher conversion rate for the previous form.

Wordpress - update your profile while you wait
3. The page uses very large form fields. They look a bit ugly but they it is very obvious what to do as a user. This is more likely to get people to fill in the form than having standard small fields.

Wordpress - large form fields
4. If the user has still not received the activation email, they are given instructions on what to do. By now, the user should have been kept busy for about 1 minute so this has given the email more time to arrive in their inbox. This should reduce the number of support questions sent to WordPress saying "I havn't received my activation email yet". It also helps people proactivley find out likely reasons for not having received the email.

Wordpress - instructions if still waiting
More examples of fantastic usability from the masters at WordPress!


Embedding Flash – the ultimate way

For 2 years now, SWFObject has been the ultimate way to embed Flash movies into a website. If you are a web developer and want to embed Flash, this free tool is a must.

  • HTML and XHTML compliant
  • Flash plug-in detection
  • Accessible (so you can meet the WCAG)
  • Works on all major web browsers on Mac and PC
  • Search engine friendly
  • Easy to use
  • Free

Go and download SWFObject now.


Sell your photographs!

I've been working on a website – Zengle – that enables anybody to sell their photos online. I had the idea with Paul when we were travelling in Australia last year. More and more people own good quality cameras and are taking an interest in photography as a hobby. Some of the photos these people are taking are just as good as some of the images taken by professional photographers.

Zengle allows anybody to start selling their photos within minutes. You just need to pick out the really good photos from your digital photo collection and upload them to the website. There is more advice on the site as to what you can and cannot sell, but its all pretty straightforward.

For every sale, we split the proceeds 50:50 with the photographer.

There is a huge market for good quality, original photography. Almost every brochure, website, catalogue, magazine or poster needs fresh photographs. There are many other stock photography companies (e.g. Getty or Corbis) but the price of their photos is high and you need to be a professional photographer with a large portfolio in order to sell them. Plus, they don't pay as much commission as Zengle pays.

Start earning extra money from your photos… join Zengle now!

Comments (1)

Microsoft blocking Firefox?

I tried to download Firefox today but there was no download link available. I was using Internet Explorer.

To the right is a screenshot of the page.

Firefox download pageIs Microsoft deliberately obscuring the download link? I can see the link if I visit the page using an alternative browser. Surely Microsoft would not deliberately prevent people from downloading a competing web browser?

See if you can download Firefox from this page using Internet Explorer.


« Previous entries Next Page » Next Page »