Skip to main content
menu_icon.png

Everything you need to learn Optimizely X in one place: See our resource pages for Web Experimentation and Personalization.

x
Optimizely Knowledge Base

Responsive design in Optimizely X

This article is about Optimizely X. If you're using Optimizely Classic, check this article out instead.
 
relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization

THIS ARTICLE WILL HELP YOU:
  • Understand the considerations for using Optimizely with responsive sites
  • Use media queries, style sheets, or JavaScript to accommodate responsive sites
  • Create audience targeting conditions to include or exclude visitors based on specific screen measurements

Responsive sites are designed to respond and adapt to different devices and screen sizes seamlessly. They resize elements and change layouts to provide the best experience for every case.

Optimizely makes it easy to see how changes you make with the Visual Editor look on a responsive site. 

Read on to learn how to make changes to media queries with Optimizely on a responsively-designed site. We also suggest a way to manage responsive design changes that differ dramatically by device and screen-size below.

Four methods are generally used to create responsive sites:

  • Edit the CSS of media queries

  • Add a custom class to elements you want to be responsive, then add media queries to Experiment CSS to apply the changes across variations

  • Replace style sheets based on device

  • Custom JavaScript

We've provided links to tutorials at the bottom of this article, in case you'd like to learn more.

Make CSS changes

You can use Optimizely to make a CSS change to a media query. 

For example, here's how to edit the class .showcase-left above to change the max-width property of its @media="all" query parameter to 50%:

  1. Navigate to your variation. In the Editor, select the Variation Code Editor icon ().

  2. Edit the media query for the img attribute. 

  3. Click Save to apply.

Audience targeting

If you'd like to dramatically change your visitors' experience based on the device they use to visit your site, use audience conditions to target your experiments by device or by platform.

In some cases, targeting by device type may still be too general for your responsive design. Instead, you might choose to include or exclude certain visitors entirely based on specific screen sizes.

Custom JavaScript audience targeting

You can also use a custom JavaScript audience condition to target visitors who view screen sizes above or below a certain pixel count.

Below are two code samples for audience conditions that target screen size. Learn more about how screen definitions in JavaScript and jQuery align to CSS media attributes. Then, use these code examples target screen size with the custom JavaScript:

//target desktop viewports
//matches CSS media queries for height/width or max/min-height or
//-width
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.