From web development to tools for writing better copy, here is an essential collection of sites and applications for designing, building, troubleshooting, and logging experiments on the web.  I have chosen not to include the testing software itself.  Instead, these are tools and software you can use to help support your testing activities, regardless of how you do it.

Troubleshooting Tools:

1. Firebug

Firebug is an extension for the Firefox web browser which helps you design and debug CSS rules, HTML and javascript.  It lets you make edits to a page that is live on the web (although you cannot save them.)  This means you can try things out in Firebug, seeing how they will look on your site.  When you are ready, just cut and paste the edited HTML into your testing application.

In addition, if you are seeing layout problems, these same capabilities may be helpful in figuring out the problem.

2. Web Developer Toolbar

The web developer toolbar is another essential Firefox extension.  It contains many of the same capabilities as Firefox, but has a useful option to “View Generated Source.”  This works just like the regular “view source” except it will show the source code of the page after it has been rendered- which may be different than the “actual” source if a test is running.

3.  FireCookie

Firecookie is an add on for Firebug, that makes it easy to view, edit, and delete cookies. In addition, cookie activity shows up in the Firebug console.

4. Add and Edit Cookies

This is another Firefox extension for editing and deleting cookies on your system.

5. MVT Vendor Detector

The Vendor Detector is a Greasemonkey script for firefox that will show you which (if any) vendor a given website is using for testing on their site.  It works well at detecting Google optimizer, but is unable to determine the variable location of tests run with some other tools.

Design Tools for Creating Test Options

1. Fireworks

Fireworks, from Adobe, is the perfect software for building alternate buttons, badges, and other assets for your tests.  It includes many of the same capabilities as bigger brother Photoshop, but is optimized specifically for building website images.

2. Dreamweaver

You can use Dreamweaver to develop HTML layouts and snippets, then include them in your tests.  It is tightly integrated with Fireworks, and using the two applications together you’ll be able to quickly develop complex HTML layouts.

3. CssEdit (Mac Only)

You will most likely want a visual tool for creating new style rules for existing web pages.  Although there are many editors on the market, and Dreamweaver also does CSS, if you have a Mac you are in luck.  CssEdit is, in my opinion, the best CSS editor out there.  It works by allowing you to “override” the native styles of any web page, and edit them in a WYSIWYG environment with live updates on the actual site you are editing.

Copywriting Tools

1. Thesaurus.com

When you are writing alternative sales copy for your site, you’ll definitely want to keep a thesaurus handy.  Thesaurus.com lets you quickly find alternative words and ways to say things.

2. Digg.com

One of the best ways to learn copy writing is through example, and Digg is a literal treasure trove of good and bad examples.  Often the most well written headlines help the story make it to Digg’s front page- and the lesser examples flounder in anonymity.

To get started, run some searches on Digg using your business niche as the search word.  The results of your search will contain a wide selection of examples, which you can then order by number of Diggs received to find the best.

Tools for Planning and Keeping Track of your Tests

1. Microsoft Excel or Google Spreadsheets

Keeping good records of your testing activities is important, so you will want a spreadsheet.  Both Excel and Google Spreadsheets will meet your needs here. Google Spreadsheets is great because it’s online, but is still buggy in places.  For mass acceptance, Excel is the way to go.

2. Fleck

We have convered Fleck in the past, and it continues to be a useful tool for unobtrusively annotating web pages and test designs.  It is particularly useful if you need to send some ideas to a client or partner, and want to be able to share it via a URL (say through IM).

What did we miss?

Is your favorite resource missing from this list?  Why not add it in the comments below, and we may do a following on post covering your suggestions!

So you are starting a new campaign? Your team is excited to build the landing page of all landing pages, but the team is divided and can’t agree on what the message, layout and calls to action should be.

Let them all have a try.

Here is a strategy to move forward and dial in on the best conversion rates.

FIRST – Create two or three landing pages. Try different layouts, different messages, different imagery and different calls to action. Then put the pages up to your audience, through SEO, PPC or whatever means you use to drive traffic.

Start with a high level split test, alternating complete pages and URLs to your audience. Watch the results and wait until you get a clear winner and move to stage two.

SECOND – Take the winning landing page and begin a multivariate test, testing all the variables that influence conversions and give them different options. Good things to test are; the headline, the images, the copy, bullet points, the buttons, the button location, the button text, different calls to action, different offerings, etc.

Once your multivariate test reaches statistical validity you have a winning recipe. Implement the winning recipe and move onto stage three.

THIRD – Once you have a winning recipe, your software should tell you what variables on the page or in that recipe are the most influential. Begin a split test with that variable, if it’s the button, just split test different options with the button, the button text, or the button size and color. If it’s the headline, just split test different headlines, etc.

With this three stage approach you can have a sure-fire strategy to dial in to your optimal conversion rate. The good news, Vertster’s software can handle all of that.

Don’t guess that you have the right message, run a test and validate it. And if you make big gains in conversions, congratulations! But don’t stop, always be testing!

Are you using Twitter yet?  I have been personally for a while now.  If you want to follow, here are two accounts that contain Vertster information:

http://twitter.com/optimizeit – This is the twitter account of Scott Miller (me).

http://twitter.com/vertster – This is the official twitter account for Vertster, and contains important system announcements and things like that.

This morning I saw the following blog post from Google’s lead designer,  Douglas Bowman,  on why he is leaving Google:  http://stopdesign.com/archive/2009/03/20/goodbye-google.html

It boils down to one reason- Google designs by testing, not by what one (or several) design guru’s say looks good.  I can appreciate both sides of this story- certainly great design cannot be created by machines- design still has, and always will have it’s place. That being said, Google is not known as a design oriented organization, and their style is very geeky, plain, and barebones.

As a testing and data junkie, I can say that if you have the shear volume of traffic that Google has, there is little reason not to test everything.  Given the extreme simplicity of Google’s designs, it is not only possible to test 41 different shades of blue, but it is fairly easy.  For most sites, this is simply not feasible- due to more complex page layouts and far less traffic.

So where does this leave design?  In my opinion, rely on designers to get started with a new look or direction, and then use testing to refine and perfect the design.  I always tell designers that the best thing about testing is that you get to try several great ideas, instead of just providing one final deliverable.  Tests cannot design the design, only perfect it from a profitability perspective.