Styling A/B Tests in Optimizely With CSS

When running A/B tests within Optimizely, I often need to apply a bit of CSS to my experiment variation. There are several ways to accomplish this within the Optimizely editor. One method is to use the visual editor to click on different elements and apply style changes within the GUI, like so:

Screenshot 2016-02-17 15.26.14

The advantage to this method is that it is easy for non-coders to make changes.  The disadvantages are many:

  1. Style changes will only apply to the specific element you click on
  2. If you need to make a lot of changes, there is quite a bit of clicking around required and the workflow can be painstaking
  3. It’s tricky if you need to undo a changes before your most recent change, as you would need to re-execute changes after the change you want to undo, repeating yourself unnecessarily
  4. The visual editor limits you to a set number of basic CSS properties.

Another method for making CSS modifications is to utilize the Experiment CSS:

Screenshot 2016-02-17 16.09.58

The disadvantage of this is clearly stated in the dialog window itself:

Experiment CSS is executed across all variationof the experiment, including the original.

Ohhhh, I like the idea of writing my own CSS within a dedicated coding window!  However, I don’t want to apply my CSS to all variations at all. That would completely defeat the purpose of A/B testing.  Why not just give me a tab within the Code Editor to toggle between Variation Javascript and Variation CSS?!  Maybe Optimizely would consider this feature for a future release.

Screenshot 2016-02-17 16.15.10

So, I know I like the idea of writing my own CSS within a dedicated workspace, but how do I apply my changes to only the variation?  I find that there is often a solution to problems like this that are stupidly simple.  This situation is no different.  Here’s the solution:

Add one line of jQuery within your Variation Javascript to add a body class to the variation, like so:

Screenshot 2016-02-17 16.22.54

Adding this line of code will allow us to use the .variation selector within our Experiment CSS to target the variation specifically:

Screenshot 2016-02-17 16.25.14

And that’s it.  Any questions?

Andrew Van Wart

About Andrew Van Wart

One of the Bay Area's original adopters of Responsive Web Design principles (RWD), Andrew is our front end developer responsible for executing and engineering solutions from UI to fully functional responsive web solutions. He is also well versed in visual design and has a passion for making informed, data-driven design decisions.