I like to test with CSS

Optimization and TestingWebsite Optimizer

I can’t think of a more elegant way to do AB or Multivariate testing than with **CSS **(Cascading style sheets). The whole idea behind CSS is to separate presentation from content, where CSS handles the presentation (font, colors, layout) and content is all your HTML (text, links, product descriptions, images). If you are testing the CSS you are not changing the content in any way – I think there is something inherently elegant about this and makes implementation of a test much easier.

In a multivariate experiment using Website Optimizer you have to place tags around the element you want to test. For example if you want to test a headline on a page you would place the tags as such:

<html>
<head>
<title>Test Page</title>
<link rel='stylesheet' href='https://www.michaelwhitaker.com/blog/wp-admin/css/colors-fresh.css' type='text/css' />
<!-- CONTROL SCRIPT -->
</head>
<body>
<script>utmx_section("Headline")</script>Original Headline</noscript>
<!-- TRACKING SCRIPT -->
</body>
</html>

But you can use the same approach to test CSS:

<html>
<head>
<title>Test Page</title>
<!-- CONTROL SCRIPT -->
<script>utmx_section("CSS")</script><link rel='stylesheet' href='https://www.michaelwhitaker.com/blog/wp-admin/css/colors-fresh.css' type='text/css' /></noscript>
</head>
<body>
<!-- TRACKING SCRIPT -->
</body>
</html>

When you set up your variations in Website Optimizer you can then link to another css file:

You can also test individual styles instead of a whole CSS file:

<html>
<head>
<title>Test Page</title>
<link rel='stylesheet' href='https://www.michaelwhitaker.com/blog/wp-admin/css/colors-fresh.css' type='text/css' />
<!-- CONTROL SCRIPT -->
<script>utmx_section("CSS Style")</script><!-- EMPTY --></noscript>
</head>
<body>
<div id=leftcolumn>Left Nav</div>
<!-- TRACKING SCRIPT -->
</body>
</html>

Here the original content is basically empty. When you create your variation in Website Optimizer, you can test something like this:

The beauty here is that if there already is a style declared for the element with id leftcolumn, it will be overridden by this embedded style as long as it comes after the CSS file.

Naturally, there are some things you cannot test with CSS, but if you can use it, it makes for an elegant test setup. And obviously, if you start with a CSS-friendly design it makes it even more powerful.