Rich-text Reply

Format inconsistencies across variations, browsers and devices

bonobomind 01-26-17
Accepted Solution

Format inconsistencies across variations, browsers and devices

We are a group of psychologists running an experiment to help a wildlife conservation NGO. We have an legacy accocunt (i.e. free and not Optimizely X), and we don't have any programming background. We found that elements on the page are inconsistent between variations, browsers and devices.


Example 1: the same textbox in one variation will have 16 Helvetica, but in another variation will become 14 Arial.  


Example 2: a textbox in Chrome is narrower than the same textbox in Firefox.

Example 3: a textbox in Chrome in laptop A is narrower than the same textbox in Chrome in laptop B


The degree of inconsistency also varies across devices: In laptop A, it can be perfectly consistent arcoss variations and browsers. But in laptop B, there is only inconsistency in font styles. In laptop C, you might see inconsistency in both textbox sizes and font styles. 


How we created the variations:

We only created variations of the frontpage of the website. We simply changed the content of the textboxs (via cut-and-paste from a docx file). We didn't add new images, or drastically drag elements across the page. If one variation's text is too much for the original size of the textbox, we resized the textbox. We did not use codes to make the variations. And we have disabled compatability mode in the editor, as well as Adblockers/Ghostery. Our experiment was only for laptops. 



We have a few questions:

1. How could there be inconsistency between broswers and devices? Shouldn't the codes underlyign a given page identical between browers and devices??


2. Can we not fix the inconsistency by creating variations through codes in the "edit code" box, instead of through drag-and-drop, move-and-resize etc.?


3. Is the problem caused by excessive use of  "Move and Resize"? 


4. Is the problem caused by the limited functionality of our legacy account? 


We have struggled over this for a couple of months. Any suggestion will be greatly appreciated. Thank you!


RyanC 01-26-17

Re: Format inconsistencies across variations, browsers and devices

Unfortunately this is not up to Optimizely but how your website is programmed, and in your case I highly recommend you get someone who knows javascript, html and css to help with your specific issue.


My answers to your questions:


1. There is so many factors when it comes to design a website, different devices, different browsers, different versions of the browser, different screen resolutions .... etc .... this is why it takes time and skill to design a website that will react the same for all these factors.


2. Yes this is possible using jquery scripting.


3. Optimizely classic records every action you create, so it's best is to create the right action in the first place. 


4. No with the issue you are having. 

The best solution is the simplest.
Experimentation Hero
bonobomind 01-28-17

Re: Format inconsistencies across variations, browsers and devices

Hi Ryan, 


Thanks so much for the tips! Yes, you were right. Some consistencies were due to specific settings of a given laptop, and others were due to Optimizely Classic recording every step in the past. Thanks for pointing out JQuery coding, it worked! And it helped me learn a lot about coding.