Rich-text Reply

Mobile Editor doesn't recognize responsive design

madbury 01-02-17

Mobile Editor doesn't recognize responsive design

My site uses a responsive stylesheet to display a different header to mobile vs desktop users.  I would like to use Optimizely's mobile editor (in conjunction with Audience segmentation) to run some a/b tests on the responsive design for mobile users.

 

However, the mobile editor doesn't render my site correctly for mobile users.

 

I'm using these directions: "To view pages at widths less than 1000px, you should switch the editor into Mobile Web mode using Options > Editor Settings. You may also use this menu to select which device to simulate when viewing your page." (source: 

https://help.optimizely.com/Build_Campaigns_and_Experiments/Responsive_design_in_Optimizely_Classic)

 

When I create a new experiment and follow those instructions to use the Mobile editor with an Android Phone, the editor helpfully draws the outline of an Android phone, and attempts to render the page within that outline.  However, the page doesn't actually display the site in the way that a user on a mobile phone would see it.  Instead, it displays links and broken images for both the desktop and the mobile site, without CSS styling.

 

 

I use Bootstrap and media queries to implement the responsive design, and it has been live on the site for about 2 years.

 

I'm sure I'm doing something wrong -- can someone point me in the right direction?  Alternately, is there more information I could post to help debug the problem?

 

Thanks,

Chris

Level 2

robertchan 01-03-17
 

Re: Mobile Editor doesn't recognize responsive design

One thing that has helped me in the past has been to follow the instructions in the link you provided and to click save after. After saving, try refreshing your page to see if everything shows up as expected. If not, you might want to consider making changes outside of Optimizely and saving your code in an editor such as Sublime. This is my typical approach which makes everything much better since I don't need to rely on the WYSIWYG at all. Once you're done building the code, copy and paste it into Optimizely's code editor for your experiment's corresponding variant and test it to see that everything functions as expected.
Robert Chan

madbury 01-03-17
 

Re: Mobile Editor doesn't recognize responsive design

Hi Robert,

Thank you for your reply.

>follow the instructions in the link you provided and to click save
As soon as I read that, I thought "Doh! I bet I forgot to click the save button on the editor!". So, I went back in and tried again. Unfortunately, that wasn't the problem. Smiley Sad

>Once you're done building the code, copy and paste it into Optimizely's code editor
Makes sense. If I can't find a way to get my design to render within Optimizely's editor, I'll do that.

Thank you!
-Chris
Level 2
Breana_Eads 01-03-17
 

Re: Mobile Editor doesn't recognize responsive design

When using using the Optimizely editor keep in mind that when you add or replace elements in your site, often styling gets removed from the element.   Classes that dictate responsiveness will likely need to be re-added to the elements that were altered in the experiment when using the editor to make changes.  

 

When previewing the variations of your experiment be sure to look at the styling of the element using the developer tools.  If there is a problem with how an element is being displayed the changes that are affecting that element can be narrowed down using the computed tab under the developer tools.  By clicking on the element that is displaying incorrectly and then clicking the small arrow next to the style that is incorrect for the element you can view all the different styles that affected this element.  In my screen shot below you can see an example of a list of styles that affect line-height of the overlay I clicked on.  The styles with strike through are ones that were over ridden.  This can be a helpful way to find if you are targeting the right element in Optimizely with your styles, or if there is another style sheet interfering with your experiment. 

 

computed tab.png

 

Like @robertchan mentioned, it can be very helpful to use an editor like Sublime to layout your design changes when using something like Bootstrap that depends on classes which can removed or overwritten using the editor.

 

Hope this helps.

Breana Eads
Optimizely
madbury 01-03-17
 

Re: Mobile Editor doesn't recognize responsive design

Hi Breana,

Thank you for the reply.

>when you add or replace elements in your site, often styling gets removed from the element
That makes good sense, although I don't think it explains the problem that I'm running into.

I actually haven't made any changes to either the "a" or "b" variations in the mobile editor. I was just preparing to get started when I ran into this problem. (I just double-checked by pulling up the "edit code" option in the WYSIWYG editor, and there are no changes to the code).

Thank you!
-Chris
Level 2