White on White Web Design

"White on white" gives your web pages a super-modern, clinically clean and well-lit environment that generates an aura of calm and professionalism. In many ways, it’s a natural conclusion of the "Save the Pixel" approach.

My new article describes where "white on white" comes from and shows 9 examples of recent UI designs I’ve done, and asks if "white on white" could be a useful addition to your designs.

Marketing Insights from the STP Conversion Page

Last month, I described Google Website Optimizer, which is an amazing free tool that helps you test variations of your content to find optimal combinations that help you achieve specific goals.

This month I successfully completed my home page experiment, increasing the number of people who clicked "Buy Now" from the home page by about 40%. So I next turned my attention to the "Buy Now" page.

Historically, only one person out of seven who visits the "Buy Now" page has actually purchased the ebook. Why aren’t the other six people convinced to proceed? Of course, I don’t expect a 100% conversion rate here, but 1/7 seems pretty low.

Here’s the original page. Where do you think people might be dropping off? There’s a brief introduction to what happens next, a bold button calling you to click it, and some notes to help ensure you receive your book in a timely manner.

The whole principle of testing and measuring your page designs is you often can’t tell what will work well, what will work less well, or why. You have to use some educated guesswork.

The things I tried were:

  • A bolder intro, with a heading and without the "1, 2" numbering.
  • A simpler version of the intro, saying "Get Save the Pixel Now" and using bullets instead of numbers.
  • Adding a link to Google that shows people the current equivalent of the sale price in US dollars.
  • Reducing the size of the notes that follow the button.
  • And finally getting rid of those notes altogether (they’re repeated after you’ve paid).

Here are the results so far:

What this shows me

Clearly, the biggest benefit is from hiding the notes, a massive 92% improvement, which was a surprise.

Thinking about it, I guess that the notes are doing something I’ve suspected has been at play on a few sites I’ve reviewed. I’ve long believed that web pages should give people enough positive reasons to proceed without risking giving them reasons not to move forward.

What I think those notes were doing was making the process of purchasing the ebook feel more complicated and difficult, so giving people reasons to back out of the purchase.

Here’s the strongest combination, which I’m now running on its own head-to-head against the original. It currently has a conversion rate of 8/66 (12.1%) against 0/7 (0%) from the original combo. Even with low numbers, it seems to be a clear winner.

Semantic CSS?!

Do you know what Semantic HTML is? It’s not rocket science, in fact it’s quite simple. Here’s a brief introduction (Introduction to Semantic HTML), but in brief it means using the correct HTML markup to express accurately the structure of your content.

If you try to practice semantic HTML, have you ever thought how semantic correctness applies to your classnames and IDs? Once you get to grips with the basic principles of using the "right" tags (which is rarely clear-cut anyway), how does it apply to the ID and class properties of your HTML elements?

I find that using classnames and IDs correctly (i.e. only using classnames to describe properties of an element and reserving the ID property for identifying what an element actually IS), selecting appropriate names for these values can take you on quite a journey.

If you’re interested to learn more about semantic HTML, why you should be using it, and how it can make your pages work better, I recommend you check out my ebook on the subject, which costs just £5, only available on Web Design from Scratch. It contains a complete reference to HTML tags and how to use them appropriately, plus a complete worked example that takes you through the decision-making process of naming tags and properties.

FREE ebook

I’m excited to be able to share this ebook that I first read a few months ago. It’s by Geoffrey Heard, who’s a highly experienced marketing copy writer. I’ve learnt heaps over the last few months from reading the experiences of copy guys like Geoff and the guru Drayton Bird, and it’s great to be able to share this with you.

It’s a free preview of Geoffrey’s new book, which is the best and most accessible introduction to writing compelling copy I’ve ever come across. Since he sent it to me to preview, several months ago, I’ve been trying to get Geoff to put together a copy that you can read, and here it is.

Quite a mouthful, but believe me, you’ll learn loads from this book!

Enjoyed this Newsletter? Pass it on!

If you got value from this issue, please feel free to forward this message to your friends and colleagues.

Make Better Web Pages!

How to make your web site sell - use my secrets

Find out How

Do you love our approach to crafting simple & effective web sites that just work for people?

We'd love to hear about your web strategy.

Contact one of our team today!

Leave a comment

Articles + tutorials in Blog

Me2solar E-commerce Site Designed by Scratchmedia
UK-based Web Designers Scratchmedia recently delivered this new e-commerce site for US/German Me2Solar, makers of innovative portable solar chargers
GuruShot – Scratchmedia’s Latest Web2.0 Application Design Project
Introducing GuruShot, a new Web2.0 web-based application. GuruShot is a wisdom sharing site designed and built by UK Web2.0 designers Scratchmedia.
What is the Relationship Between Graphic Design and Web Design?
Explores the difference between design, graphic design, and web design. Argues that web design is a much broader discipline than graphic design.
Ben Hunt’s Web Design Newsletter, April 2010
Ben Hunt's web design newsletter April 2010: Conversion Rate Optimization, 2 new Web2.0 projects, and a trip of a lifetime
Case Study: Increasing conversion rate using Google Website Optimizer
A case study on increasing conversion rate with split testing using Google Website Optimizer
Order Your Copy of the Blogging for Business Pre-Release DVD
Order your pre-release copy of Ben Hunt and Mark Attwood's "Blogging for Business" seminar
Conversion Rate Optimisation Case Study: Bible Timeline
How Scratchmedia's designers tripled one customer's web site's conversion rate
Ben’s New Year 2010 Newsletter
Ben Hunt's web design review of 2000-2009 and a look ahead to web design in the 2010s...
Web Design is Dead
Why the familiar creative-driven web design process fails, why combining creativity and testing works so much better, and how to do it successfully.
Ben Hunt’s Web Design Newsletter, October 2009
Web design newsletter for October 2009: Conversion Rate Optimisation, usability, and an invite to an exclusive internet marketing club.
New Book: How I’ll Maximize Your Web Site’s Conversion Rate
How I'll Maximise Your Web Site's Conversion: Process and agreements for taking advantage of Ben Hunt's new CRO book project offer.
Your Chance to Be Part of My New Book Project
Your Invitation to be part of my new book project on Conversion Rate Optimisation. I'll try to double your web site's conversion rate and track the results in detail.
Simple Tips for More Effective Web Sites
Save the Pixel is an ebook from pro web designer Ben Hunt which teaches that anyone can create great web design
10 Boring Things to Get Excited About
Some of the best things in life take some time and don't feel like much fun, but they're better than the quick fix alternatives. Ben Hunt introduces a list of ten really interesting uninteresting things we should all be doing.
Meet Ben Hunt at Ken McCarthy’s System Intensive, London September 26 + 27
Invitation to meet Ben Hunt at Ken McCarthy's System Intensive online marketing seminar in London September 26 and 27 2009
Ben Hunt’s Web Design Newsletter, August 2009
Web Design newsletter for August 2009 by Ben Hunt, various thoughts and links
Ben Hunt’s Web Design Newsletter, July 2009
White on white web design, semantic HTML, testing and measuring, and a free copywriting ebook (Ben Hunt's Web Design Newsletter, July 2009)
Ben Hunt’s June 2009 Newsletter
Ben Hunt's June 09 newsletter: Results of Google Website Optimizer experiments on Save the Pixel; Web Design from Scratch redesign
Benefits of a Simple Client Brand/Design Alignment Session
Sitting down with your clients before you start a design project to run through a few dozen web sites and identities can save hours or days of work
Argument that Investing in Evolving Your Web Site Beats Big Bang Redesign
It's more cost-effective to invest in evolving your web site, using continual cycles of change-test-measure, than to redesign wholesale.
Why Deepak Chopra’s New Navigation Fails
Deepak Chopra has a new site, but the navigation leaves you guessing. Not the place to be airy and mystical, Deepak.
Ben Hunt’s Newsletter, April 2009
Ben Hunt's newsletter for April: Tips for Surviving the Economic Winter
Introducing Clicss, Flexible and Useful Web Page Templates
When can using web page templates really work? Sneak preview of Clicss.com, a new range of simple, standards-compliant web page templates for sale.
Subscribe to Ben Hunt’s newsletter
Ben Hunt is sharing his experience in making web sites that are appealing, easy to use, and successful. Subscribe to his newsletter to get regular updates.
8 Reasons to Put Your Prices UP This Recession
Many service providers needlessly undercharge. Here are 8 Reasons why you should seriously consider putting your prices UP.
10 Top Skills for Web Design, in order of importance
My list of the top ten skills you need to be an effective web designer, in order of importance. Not what you may think!
My Vision for a Real Workable Web3.0 World
Ben Hunt's vision of Web3.0, solving the future of the web user experience, consumerism, marketing and DRM in one elegant theory. Just may be the biggest thing you read today.
When to Use Graphics in Web Design
Ben Hunt urges web designers to get really conscious about only using graphics in web design to communicate, and lists 7 specific reasons why graphics can be better than text.
Tips from Our Experience of Switching from PC/Windows to Mac
One business user's experience of switching from Windows PC to Mac, using Parallels and a temporary Windows installation to transition in a manageable step by step way.
10 Tips for Recession-Proofing Your Web Site
10 simple and powerful principles web site owners should be following now to help ensure your web site is really supporting your business through the current economic difficulties.
Announcing Scratch Web Design Forums
Scratchmedia has launched a free web design forum at http://scratchwebdesignforums.com/. Visit to learn from industry experts and share hints and tips on web design, production, SEO etc.
Introducing CMS from Scratch, the open-source lightweight AJAX CMS
We're proud to launch CMS from Scratch, now as an open-source project: the system we've developed over the last 3 years to let Scratchmedia's own clients easily manage and update their web site content.
Real Web Design versus “Design Toss”
The vital difference between true Design (crafting communication solutions with a purpose) and graphic art for the sake of other designers
My Web Design Workstation: 10 essential items of design kit
The 10 key pieces of kit that this web designer couldn't live without
The Social Future of Web2.0 / Web3.0
Ben Hunt casts an eye to the future of a more connected web, and predicts that Yahoo will be the dominant online brand for the next 5 years (LOL)
Why All Web Designers and Web Developers Should Learn to Type
Learning to touch-type is one of the most valuable skills you'll ever learn as a designer or developer
Pursuit of the Original in Web Design
The value of laziness in design, and why the pursuit of the original can be detrimental to design success.
DHTML Decision Making Tool
Tutorials on learning JavaScript to enhance web pages and applications
Review of Harvey Nichols’ 2nd web site, 2004
Review of Harvey Nichols' second web site from 2004
Review of Harvey Nichols Web Site (2001)
Review of Harvey Nichols' first web site from 2001
© Scratchmedia Limited, 2006-2010
Floor 3, 111 Buckingham Palace Road, London, SW1W 0WQ, UK
+44 (0)207 1600 989