Optimizely Web Experimentation site design best practices

  • Updated
This topic describes how to:
  • Structure or redesign your site to work best with Optimizely Web Experimentation
  • Create unique and descriptive element IDs and CSS class names
  • Understand the tradeoffs of HTML tables and iFrames
  • Use <p> and <div> tags
  • Set up Optimizely Web Experimentation tracking calls on a page

While Optimizely Web Experimentation was designed to work seamlessly on any website built with HTML, CSS, and JavaScript, there are a few things you can do when designing your site to ensure Optimizely Web Experimentation will always run robust, cross-browser-compatible experiments. In this article, we detail some of these guidelines. This list is targeted at those who design websites and as such a basic familiarity with HTML and CSS is assumed.

Basic

The first few guidelines we discuss are recognized best practices for building websites in general. We will discuss how each of these helps when using Optimizely Web Experimentation on your website.

  1. Use Unique IDs for elements wherever possible.

    Optimizely Web Experimentation works by executing JavaScript during page load in order to display your variation to a visitor. Providing elements on your page with unique IDs gives Optimizely Web Experimentation a surefire way to identify them when executing this JavaScript.

    Optimizely Web Experimentation does not require unique IDs to work with elements, however, using them makes for clean variation code and decreases the chances that your variation will look different in older browsers.
  2. Use descriptive CSS class names.

    In cases where Optimizely Web Experimentation cannot use a unique ID to identify an element on your page, it will attempt to isolate that element using CSS classes and your page structure. In cases where descriptive classes are consistently used to demarcate the structure of the page, Optimizely Web Experimentation will generate short, readable selectors for the page elements you're modifying in a given experiment. Apart from the aesthetic appeal, these selectors also enjoy wider browser compatibility, especially in cases where other JavaScript is also used to modify the DOM on this page.

  3. Avoid using HTML tables for page layout.

    Table-based layouts are difficult to adjust with Optimizely Web Experimentation (and JavaScript in general) and are often rendered differently in the Internet Explorer browser family. In general, if you can do it with CSS, avoid using a table.

  4. Avoid heavy use of iFrames.

    Optimizely Web Experimentation can be used to modify the contents of an iFrame only when your Optimizely Web Experimentation snippet is on the iFrame'd page. Because of this pages that make heavy use of iFrames are, apart from difficult to maintain and re-size, sometimes difficult to test with Optimizely Web Experimentation.

    Note: in cases where you only want to test the contents of an iframe, and not the content around it (e.g. Facebook applications), Optimizely Web Experimentation should work just fine!
  5. Use <p> tags to separate distinct paragraphs in large blocks of text.

  6. If you plan on making changes to attributes of the entire <body> wrap them in a <div> tag first--Internet Explorer has trouble modifying the entire body of a web page.

Advanced

If your pages are dynamic, pre-populate them with Optimizely Web Experimentation activation and event-tracking API calls. Doing so will allow you to quickly set up experiments that take advantage of them in the future, and will have no effect if your Optimizely Web Experimentation snippet is not on the page for whatever reason.