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?

  • Wouldn’t a mere link do (in the header or footer), without any kind of notification? – unor Jul 25 '16 at 9:35
  • I was thinking of moving the original site to a subdomain such as (old.example.com) and build the new site on the main domain (example.com). Then use a modal window pop up that asks the user whether he/she would like to view old or new site. – Breageside Jul 25 '16 at 9:42
  • 1
    But why not just offering the link to the old site in the header/footer? Users that did know the old site will be aware of the design change and, if they care about it or have an issue with it, look for an announcement or something, and find the link to the old site. And users that didn’t know the old site would have no reason to visit it, as the content is the same. – unor Jul 25 '16 at 10:02
  • Why offer the old site at all? Isn't it going to disappear one day soon? – Rob Jul 25 '16 at 12:05
  • The client would like to keep the old site for nostalgic reasons. – Breageside Jul 26 '16 at 14:20

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;
    // If they've choosen new:
    if( $_SESSION['versionchoice'] == 'new' ){
        echo $loadNewTemplates;
    // otherwise the old:
        echo $loadOldTemplates;


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:

enter image description here

  • 1
    You didn't just use empty paragraphs instead of a margin top did you? That would be downvote worthy ;) – Martijn Jul 25 '16 at 8:28
  • hahaha, yes I did. It's monday morning, I just typed that as quickly as I could just to give him an idea. :D – Josip Ivic Jul 25 '16 at 8:58
  • &nbsp; for life hahaha – Josip Ivic Jul 25 '16 at 8:59
  • 1
    IMO even small examples like this should be done properly. Plenty people on this site don't know good from bad practice. A beginner will just copy/pate this thinking this is OK, which it is not/. – Martijn Jul 25 '16 at 9:28
  • 1
    Still not the prettiest answer on SO, but removed the downvote :) – Martijn Jul 25 '16 at 9:46

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


Then have the model load on the DOM through javascript:

$(document).ready(function () {



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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.