Rich-text Reply

Mobile View Screwed Up

WordsThatClick 02-19-16
Accepted Solution

Mobile View Screwed Up

Hi there,

 

I am hoping someone can help me out or point me in the right diretion. We've implemented our first test and it comes out fine on the desktop, but on mobile, the website is messed up (headlines & sub-headlines not where they should be, spacing, buttons in random places, etc.).

 

How can we correct this? I tried to edit just the mobile only site, but then it affected the desktop. 

 

Unfortunately too, I am not a super tech person, so couldn't go in an play with the code. 

 

Any insight or help is appreciated. 

 

Thank you

JDahlinANF 02-19-16
 

Re: Mobile View Screwed Up

[ Edited ]

Set up a Custom Audience that is "mobile only" (or "not mobile", depending on which direction you are going) and add it to the experiment.

Here is a link to a help article on how to set up a "Device Type" custom audience.
https://help.optimizely.com/hc/en-us/articles/201876450?flash_digest=9ea180643d7fa58e23a06f078d9e027...

 

If you have a responsive website that works on desktop and on mobile, and are having trouble coding a singular experiment that affects each dispaly differently, you will probably need a developer-type to address the issue, or, set up two experiments where one targets "mobile only" and the other targets "only not-mobile".  Since these Custom Audiences are mutually exclusive, you can run them both on the same pages at the same time and a user will only ever only be in one of them.  The downside is that this will make measuring the impact of the experiment across all devices more difficult.

Re: Mobile View Screwed Up

Hey There,

Thanks for link, but no, not what I was looking for. I'll try to explain again...

Let's say you set up an experiment (the "B" in an "A/B" split test). The desktop version of "B" is fine and works as it should (i.e. it looks like a normal website with proper layout, etc. Things are where they should be).

However, when you toggle over to the "B" version on a mobile phone, it looks (visually) like one threw the elements at a wall and things stuck in random places. As in - text doesn't line up, text is too big for screen, call to action buttons overlay text, page sections are not proportionate to text, etc.

So nothing to do with audiences, etc., but visually, the desktop version is (for lack of better words) messed up. Or said another way too, the "B" version is not optimized for mobile.

Here's the site link. Try on your mobile phone:

www.propertiesforcash.com/?optimizely_x4978340076=1

So my question would be how to make the mobile version visually appealing and work as it should work on a mobile phone?

Thank you

Re: Mobile View Screwed Up

Oops NAP0LEON,

I just got the rest of your thread (it only showed up to the link before).

Hmm... definitely more than I wanted to take on. We'll have to dig in. Thanks for link.
JDahlinANF 02-19-16
 

Re: Mobile View Screwed Up

Sorry 'bout that - I edited the reply and added a bunch more information.

 

FWIW - it is not uncommon to run desktop and mobile experiments separately.  The CSS for the two experineces is usually so different, that it is impossible for the WYSIWIG editor to handle *both* of them at the same time, and even as a coder, it can be difficult to create one set of code that works well in both versions,  For that reason, we *always* run our Desktop and Mobile experiments separately (we have 2 Optimizely projects - one for "desktop" and one for "not desktop".  The same thing can be accomplished by setting up mutually exclusive Custom Audiences based on device type.)

 

It may sound like "more than you wanted to take on", but it's not too difficult to create.

1- Set up one Audience for "any-mobile-device".

2- Set up one Audience for "not any-mobile-device" (aka Desktop).

3- Add the "Desktop" audience to your existing experiment and append " - desktop" to the name of the experiment

4- Duplicate your experiment, swap the "Desktop" audience for the "Mobile" audience (and rename the experiment appropriately).  Now change the editor to display "mobile device" and edit it until you are happy with the results.  Once satisfied, start your new experiment.

 

Step 1 through 3 should take about 30 minutes.

 

Steps 1 and 2 only need to be done once.

Whenever you have an experiment that can be the same across all devices, you won't need to add a custom audience.

Re: Mobile View Screwed Up

Awesome and thank you Napoleon.

We'll give it a try. Super appreciate the thoughtful & insightful explanation.