- 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
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.
Use Unique IDs for elements wherever possible.
Use descriptive CSS class names.
Avoid using HTML tables for page layout.
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!
<p>tags to separate distinct paragraphs in large blocks of text.
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.
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.