Site design best practices

  • Updated
  • Optimizely Web Experimentation
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, you can ensure Optimizely Web Experimentation always runs robust, cross-browser-compatible experiments. The guidelines in this article target those who design websites and have a basic familiarity with HTML and CSS.

Basic

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

  1. Use Unique IDs for elements wherever possible.

    Optimizely Web Experimentation executes JavaScript during page loads to display your variation to a visitor. Providing elements on your page with unique IDs allows Optimizely Web Experimentation to identify them when executing this JavaScript.

    Optimizely Web Experimentation does not require unique IDs to work with elements. However, using them cleans the variation code and decreases the chances that your variation looks different in older browsers.

  2. Use descriptive CSS class names.

    If Optimizely Web Experimentation cannot use a unique ID to identify an element on your page, it tries to isolate that element using CSS classes and your page structure. If descriptive classes are consistently used to demarcate the structure of the page, Optimizely Web Experimentation generates short, readable selectors for the modified page elements in a given experiment. Apart from the aesthetic appeal, these selectors also have wider browser compatibility, especially when other JavaScript modifies the DOM on this page.

  3. Avoid using HTML tables for page layout.

    Optimizely Web Experimentation (and JavaScript in general) struggles to adjust table-based layouts, and internet browsers often render them differently. You should avoid using a table in HTML if you can do it in CSS.

  4. Avoid heavy use of iframes.

    Optimizely Web Experimentation can modify the contents of an iframe if your Optimizely Web Experimentation snippet is on the iframe'd page. Pages that use many iframes can be difficult to test with Optimizely Web Experimentation, as well as difficult to maintain and re-size.

    If you only want to test the contents of an iframe, and not the content around it (like Facebook applications), Optimizely Web Experimentation should work just fine.

  5. Use <p> tags to separate distinct paragraphs in large blocks of text.

  6. Wrap changes to the attributes of the entire <body> in a <div> tag. Internet Explorer has trouble modifying the entire body of a web page.

Advanced

Pre-populate any dynamic pages with Optimizely Web Experimentation activation and event-tracking API calls. This allows you to quickly set up experiments that take advantage of them in the future and has no effect if your Optimizely Web Experimentation snippet is not on the page.