Rich-text Reply

Create different device views on 1 experiment

houseofe 04-21-16

Create different device views on 1 experiment

Hi there,

 

I'm currently looking into running a test with 2 different hero images on our homepage. I've created an experiment, all went well, but on mobile it's not turning up as readible as I had hoped for.

 

I decided to check out the mobile views (e.g. iPhone) and edit it visually. Turned out my regular view was altered as well. Not so handy (feel like this is something Optimizely could work on?).

 

I figured running 2 experiments with the same goal but with different audiences (desktop/laptop vs mobile/tablet) could do the track, but on the latter I ran into the same trouble – I changed the iPhone, and with it the iPad view was changed too.

 

When I run experiments, I'd like to run them for either device, and make sure it's properly visible. That is, in the cases where I'm purely testing simple copy or visuals.

 

Does anyone have a solution? I couldn't find a proper article in all the Knowledge Base things in here.

 

Thanks in advance!

Level 2

AllisonR 04-22-16
 

Re: Create different device views on 1 experiment

Hi there,

 

Thanks for your question! It sounds like you are trying to change an element on your site which is dynamic based on the visitor's device. The best way to ensure this element stays responsive after the variation code is applied is to use media queries. We outline how these can be added to your variation code in this support article

 

If this is beyond your CSS expertise and you don't have access to developer resouces then your best option is to set up separate experiments for each device as it sounds like you have done. Do note that according to Optimizely audiences tablets are considered mobile.

 

To make the experiment's targeting even more specific another option is to use a custom JavaScript audience condition which checks the visitor's screen size and targets the experiment that way.

 

Hope this helps!

 

Best,

 

Allison
Sr. Technical Support Engineer
Optimizely | EMEA

Allison
Sr. Technical Support Engineer
Optimizely | EMEA
Optimizely
houseofe 04-25-16
 

Re: Create different device views on 1 experiment

Hi Allison,

Thanks for your reply. Am I right in understanding that I should then create 2 expertiments – one targetting desktop/laptop, the other one the setting 'other tablet' for it to show correctly on mobile/tablet visitors' devices?

If that's the right thing to do and I'm setting up the mobile/tablet expertiment view, can I safely drag things around set up the view for these devices? If I go to editor settings and choose the 'Load mobile version of', what view can I edit in for it to fit all the mobile/tablet devices? Or is this not the way to go and should I be going for the other suggestion you mentiond Smiley Happy ?

Thanks.
Level 2
AllisonR 04-25-16
 

Re: Create different device views on 1 experiment

Hi there,

 

If you aren't comfortable using media queries, then your best option is to run a separate test for each breakpoint on your responsive site.

 

So depending on the way your site is set up, you may need to run 3 separate experiments: one for mobile, tablet, and desktop devices (you will be able to tell if this is necessary by previewing each experiment on different devices). You can create variations for each device type by changing the Editor Settings to load the mobile, tablet or desktop version of the page. More information about the Editor Settings is here. The key is to remember that Editor acts as a template, whereas the URL targeting dictates exactly where the experiment will run.

 

Hope this helps!

 

Best,

Allison
Sr. Technical Support Engineer
Optimizely | EMEA

Allison
Sr. Technical Support Engineer
Optimizely | EMEA
Optimizely