Rich-text Reply

Tackling a Full Page Redesign

bryandaniels 10-30-14
Accepted Solution

Tackling a Full Page Redesign

We want to fully redesign a landing page for a client, but we do not have access to their site code. So I guess we will need to build the whole page through Optimizely.

 

What is the best way to tackle this? 

 

Should we markup (create HTML, CSS ,etc) for the new design,  then go to the Optimizely editor,  try to target the highest container, select "edit the HTML element" and then insert our new page HTML?

 

It doesn't look like I can re-write the body tag.

 

How would you go about implementing a full page redesign through Optimizely?

 

Is there anything I should be concerned about, such as flashing upon page load?

Bryan Daniels
Development & Optimization Manager
Vertical Nerve

Re: Tackling a Full Page Redesign

Good Day Bryan!

 

This is a great question and one we get a lot from our customers. How much code is too much to put in the variation code. Ideally the best way to test two different variations of a landing page you woudl want to host the second page at a new URL then create a redirect variation where the user is simply redirected to the new page. However it sounds like this is not possible. 

 

What I would recommend is writing code that first hides the body so something like this as your first line

 

$('body').css({"display":"none"});

 then on the next line insert your html to the body. 

 

$('body').css('<string containing all the html and css for the page minified>');

 Then after you have inserted the HTML display the body again using this code

$('body').css({"display":"block"});

 

By hiding the body first you reduce the risk of flashing. One thing to understand though is by putting all of the HTML and CSS in the variation code for one page you run the risk of making the snippet very large and could effect page load performance on other pages of the site. 

 

I hoep this helps!

Optimizely

Re: Tackling a Full Page Redesign

Thanks Brad. I try to avoid using redirect tests via Optimizely because in the past I noticed I lose my referring source tracking in Google Analytics. This creates a challenge when we test a page that has a combo of organic and paid traffic. (Unless improvements have been made that I am not aware of).

But for this particular test, it would be out of the question.

We will try the second option you mentioned and will be sure to look out for any load performance issues across the site.

Thanks!
Bryan Daniels
Development & Optimization Manager
Vertical Nerve