- Understand the considerations for using Optimizely with 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 lets you see how changes that you make with the Visual Editor look on a responsive site.
The following 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
See the links to tutorials at the bottom of this article 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%:
Go to your variation.
In the Editor, select the Variation Code Editor icon ().
Edit the media query for the img attribute.
Click Save to apply.
If you want 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.
//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