Responsive design
- Optimizely Web Experimentation
- Optimizely Personalization
- Optimizely Performance Edge
Responsive sites respond and adapt to different devices and screen sizes by resizing elements and changing layouts to provide the best experience for every case.
You can see how changes that you make with the Visual EditorVisual Editor look on a responsive site.
The following methods are often 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 CSSExperiment CSS to apply the changes across variations.
- Replace style sheets based on device.
- Custom JavaScript.
Make CSS changes
You can make a CSS change to a media query.
This example edits the class .showcase-left to change the max-width property of @media="all" to 50%:
- Go to your variation.
- Click the Variation Code Editor icon.
- Click the CSS tab.
- Edit the media query for the img attribute.
- Click Save to apply.
Audience targeting
If you want to change visitor experience based on the device they use, use audience conditionsaudience conditions to target your experiments by device or by platform.
In some cases, targeting by device type may be too general for your responsive design. 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. See Use screen measurementsUse screen measurements to learn more. 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 <= 640Note
Set breakpoints and targeting conditions based on your design and not based on the device. The above examples use device measurements to show how to write the JavaScript audience condition.