Choose to enter "Old Site" or "New Site" upon arrival

Question

I am looking for the best way to have run two websites versions side-by-side. The original "Old Site" and the updated "New Site".

When arriving on a page the user should get an option of either browsing the "Old Site" or go to the "New Site". This option can be in the form of a modal windows pop-up etc. The structure and content of these two sites will be the same, the only difference will be the layout and style. The option should pop up when landing on any page of the site.

What is the most elegant way of achieving this?

Answer 1

As this can change per site, depending on how your site is build now, I can't give an exact answer. I can provide an example:

// Check if your visitor has made a choice, if not, give them the choice:
if( !isset($_SESSION['versionchoice']) ){
    echo $pageWithChoiceThatSetsSession;
    exit;
}
else{
    // If they've choosen new:
    if( $_SESSION['versionchoice'] == 'new' ){
        echo $loadNewTemplates;
    }
    // otherwise the old:
    else{
        echo $loadOldTemplates;
    }

}

Answer 2

I'd put a .html file with link and image from new site, and with link and image from old site. But, depends on what are you using, if you are using some CMS, there's numerous plugins for this.

This crossed my mind when I've read the question. Maybe it's not a solution you are looking for, but, maybe I'll give you an idea what to do. (It took me few seconds just so you can have it visualized)

<p><img style="display: block; margin-top:75px; margin-left: auto; margin-right: auto;" src="http://www.hiphomeschoolmoms.com/wp-content/uploads/2011/07/250x250-sample.png" alt="" width="250" height="250" />&nbsp; &nbsp;</p>

<p><img style="display: block; margin-top:50px; margin-left: auto; margin-right: auto;" src="http://www.hiphomeschoolmoms.com/wp-content/uploads/2011/07/250x250-sample.png" alt="" width="250" height="250" /></p>

and it looks like this:

Answer 3

You can use Bootstrap to implement this easily and with a "modern" look:

https://v4-alpha.getbootstrap.com/components/modal/

Then have the model load on the DOM through javascript:

$(document).ready(function () {

$('#yourmodalid').modal('show');

});

If you put that into a PHP page, you can simply require_once the PHP page on both site indexes and you're done.