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

The Optimizely 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 they are resized. The best way to describe responsive design is to see it. Try going to a responsive design site like starbucks.com and resizing the window to see how it changes.

If you have a responsive site and use Optimizely, you 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: 

$('head').append("<style>...</style>");

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.

Understand screen measurements

In order to target experiments by screen size, you need to understand what each native screen measurement object describes. You may notice that many of these measurements end up being the same value. 

Heights

Object

Code Type

Description

document.body.clientHeight JavaScript Inner height of the HTML document body, including padding but not the horizontal scrollbar height, border, or margin
$(document).height() jQuery Full height of the HTML page, including content you have to scroll to see
screen.height JavaScript Device screen height (i.e. all physically visible stuff)
screen.availHeight JavaScript Device screen height minus the operating system taskbar (if present)
window.innerHeight JavaScript The current document's viewport height, minus taskbars, etc.
window.outerHeight JavaScript Height the current window visibly takes up on screen (including taskbars, menus, etc.)
Note: When the window is maximized this will equal screen.availHeight
$(window).height() jQuery The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() jQuery The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() jQuery The current document's viewport height, minus taskbars, etc.
 
Widths

Object

Code Type

Description

document.body.clientHeight JavaScript Full width of the HTML page as coded, minus the vertical scroll bar
$(document).width() jQuery The browser viewport width, minus the vertical scroll bar
screen.width JavaScript Device screen width (i.e. all physically visible stuff)
screen.availWidth JavaScript Device screen width, minus the operating system taskbar (if present)
window.innerWidth JavaScript The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth JavaScript The outer window width (including vertical scroll bar, toolbars, etc., includes padding and border but not margin)
$(window).width() jQuery The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth() jQuery The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth() jQuery The browser viewport width (minus the vertical scroll bar)


Here are two images that visualize how each of the nine width and height objects described above is measured (the second image is courtesy Imgur):

 
Note:

Since the jQuery methods measure the first matched element, the above image reflects where that specific element’s padding, border, and margins make a difference in the number of pixels returned.  Since there is only one document or window object, many of these measurements will return the same value.

Connect measurement objects to CSS media queries

Now that you understand what each JavaScript or jQuery object measures, you can use the same measurement(s) that your site’s media queries use to establish breakpoints. Here are the most commonly used CSS attributes: 

Heights

Object

Code Type

Description

device-height CSS Device screen height (i.e. all physically visible stuff)
height CSS The current document's viewport height, minus taskbars, etc.
min-height CSS The minimum viewport height pixel amount at and above which the indicated styles take effect
max-height CSS The maximum viewport height pixel amount at and above which the indicated styles take effect

 

Widths

Object

Code Type

Description

device-width CSS Device screen width (i.e. all physically visible stuff)
width CSS The browser viewport width (minus vertical scroll bar)
min-width CSS The minimum viewport width pixel amount at and above which the indicated styles take effect
max-width CSS The maximum viewport width pixel amount at and above which the indicated styles take effect
 

Custom javascript audience targeting

Since we were able to align the 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
//-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
 
 
Note:

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.