RELEVANT PRODUCTS:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations
  • Optimizely Classic

This article will help you:
  • Structure or redesign your site to work best with Optimizely
  • 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 tracking calls on a page

While Optimizely 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 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 are assumed.

Basic

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

  1. Use Unique IDs for elements wherever possible.

    Optimizely works by executing JavaScript during page load (usually) in order to display your variation to a visitor. Providing elements on your page with unique IDs gives Optimizely a surefire way to identify them when executing this JavaScript. Note: Optimizely 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 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 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 (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 can be used to modify the contents of an iFrame only when your Optimizely 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. 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 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 in nature, pre-populate them with Optimizely 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 snippet is not on the page for whatever reason.