Optimizely introduction

Optimizely is an A/B and MVT testing platform designed to make testing quick and easy for non-technical people to use. The visual WYSIWYG editor allows you to make changes on the fly and quickly deploy them as an experiment.

One of the best features is that with Optimizely you can quickly convert any web page into a mobile responsive page capable of rendering the right experience for mobile, tablet and desktop without needing your IT team to do anything.

Responsive design with Optimizely

Building responsive pages in Optimizely

To build tablet and mobile pages in Optimizely, you will need to set up two new experiments for the existing desktop version of the page, one will be for mobile and one for tablet.

1. Target your experiments

For the mobile version of the page you will need to create a new target audience by selecting audience targeting –> create new audience. Add a “device” condition and set to “Visitor is using iPhone OR other mobile phone”. Then in options –> editor settings you may wish to choose “load mobile version of pages”.

For the tablet variation you will follow the same process but choose  “Visitor is using iPad OR other tablet” for the condition.

tablet-condition-settings

 

2. Edit your page

To edit your page, you will want to start by making the page containers responsive. This means changing all the width settings for those elements to percentages rather than pixel values. The best way to start is to select an element on the page in the Optimizely visual editor and choosing “select container” and choose the most top-level container you can access. Then click edit element –> Edit style and change the width to 100% or the appropriate value if you don’t want your page to be full width. If you open the code editor you will see the code this has generated.

Optimizely-responsive-settings

 

You will then need to repeat this process for all the elements on the page, specifying a width in percentage. You can also define a “max width” value which allows you to say “this element should be XX% of the screen wide but should never be bigger than 200px” for example. This can be very handy when trying to rebuild the page for multiple different mobile phone sizes.

You will most likely want to leave heights as automatic otherwise images may start to stretch or you may be left with large blank spaces.

One key nuance to be careful of is that Optimizely doesn’t really like percentages for widths and often if you change an element to be “width: 100%” then you later move that element it can overwrite your width with a new fixed width. If something has broken just check the code editor for any fixed widths (widths specified in px). The screenshot below shows the code created by the visual editor when making several changes to one element:

Optimizely-responsive-design-issues

Hopefully this gives you a very brief overview of the process to go through to build responsive web pages in Optimizely. Please add comments if you have anything to add or any questions!

Responsive page design with Optimizely

One thought on “Responsive page design with Optimizely

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>