This article will help you:
  • Understand the considerations for using Optimizely Classic on responsive sites
  • Use media queries, style sheets, or JavaScript to accommodate responsive sites
  • Create Audience targeting conditions that include or exclude visitors based on specific screen measurements

The Optimizely Classic Visual Editor and the Optimizely Mobile Editor offer easy ways to make and verify visual changes to a responsively designed website.  This article discusses Optimizely's compatibility with sites that use responsive design and ways to make changes to media queries on responsively-designed sites. It also suggests a method for managing responsive design changes that differ dramatically by device and screen-size. 

What is responsive design?

Put simply, responsive design is a design technique that allows sites to respond and adapt to different devices and screen sizes seamlessly, to provide the best possible experience in each case. Responsive sites will resize elements and change their layouts as screen sizes and window sizes change. The best way to describe responsive design is to see it. Try going to a responsive design site like and resizing the window to see how it changes.

If you have a responsive site and use Optimizely, you may want to change elements on a page to create variations and make sure that those changes still fit within the responsive experience.

Is Optimizely compatible with responsive design?

Yes, Optimizely is compatible with sites that use responsive design when a combination of the Visual Editor and the Mobile Visual Editor are used. As you resize the Optimizely Editor window, the site will respond as it normally would and you can edit it at the desired screen size.

The only thing to keep in mind is that the Optimizely Editor window is hard-coded to 1000 pixels in width, meaning it will stop resizing based on your responsive functionality once the window is narrower than that size. This is generally when your page would transition from its desktop layout to its mobile layout.

To view pages at widths less than 1000px, you should switch the editor into Mobile Web mode using Options > Editor Settings. You may also use this menu to select which device to simulate when viewing your page.

Please note that this only applies within the Optimizely Editor, not your actual responsive site. Your responsive functionality should work as normal when a visitor views the page.

Four methods are generally used to create responsive sites. In order from most to least common, they are:

  • Edit the CSS of media queries in the Code Editor (described below).

  • Add a custom class to the elements you want to be responsive, then add media queries to Experiment CSS (which you will find in the Options menu in the Editor) to apply the changes across variations.

  • Replace style sheets based on device.

  • Custom JavaScript 

We’ve provided links to tutorials on each of these methods at the bottom of this article, in case you’d like to learn more.

Make CSS changes to a responsive site using Optimizely

You can use Optimizely to make a CSS change to a media query using the <Edit Code> box. 

Take a look at the following media query for the img attribute:

You can use the .append() method to insert specified content as the last child of its selector. If you want to insert it as the first child, you can use .prepend()

We will edit the class ".showcase-left" to alter the max-width property of its @media="all" query parameter to 50%:

$('.showcase-left').append("<style type='text/css'>@media all {img {max-width:50%}}</style>");


Now, in the running experiment, the CSS properties look like this:

Alternatively, you can convert raw CSS into one line of jQuery, which some customers find less prone to error, especially when directing the CSS of an experiment to the media breakpoint.

Rather than appending a CSS selector, use the .append() method as a style tag to the <head>, like so: 


Audience targeting for responsive design

So far we've discussed how to make changes to a responsively-designed website so that that your modifications look great across all your media query breakpoints. However, you may choose to drastically change your visitors' experience based on the device they use to visit your site. If this is the case, you face a risk that dramatic changes to the mobile view of your site may break the desktop layout, and vice versa. 

To protect the integrity of all visitor experiences, use Audience conditions to target your experiments by device or by platform.

In some cases, targeting by device type may be still too general for your responsive design. You may instead choose to include or exclude visitors based on their specific screen or viewport sizes. 

Custom JavaScript audience targeting

Once you align JavaScript and jQuery definitions with the CSS attributes, it's straightforward to write a Custom JavaScript Audience condition that targets visitors who are viewing screen sizes above or below a given pixel count.

Copy and paste either of these code samples into the Custom Javascript box to create an audience condition that targets screen size: 

//target desktop viewports
//matches CSS media queries for height/width or max/min-height or
window.innerWidth > 1400 && window.innerHeight > 800
//target mobile phones
//matches CSS media queries using device-height and device-width
screen.width >= 320 && screen.width <= 480 && screen.height <= 640

It's best to set breakpoints and targeting conditions based on your design and not based on the device. The above examples use device measurements to illustrate how to write the Javascript audience condition.