For anybody who’s working in web development, there often comes the situation where you have multiple deployments of an application. I my case the normal situation is to have a local working copy, a staging environment and a live environment.

I’m sure I’m not alone in having been in situations where I’ve made an update and then sat refreshing the browser scratching my head as to why the update isn’t showing, only to realise that I’ve been looking at the live version rather than the development version of the app or site.

To avoid this confusion and to avoid the need for checking the address bar when checking edits, I’ve been using different color schemes for each deployment platform. This gives an instant visual indication of which version is being viewed.

In the following example from Ackura PressRoom, I did a quick search and replace in the CSS files for the app to change the standard color code for headings and links. I also switched the logo to add an additional label and to match the color scheme.

Local development copy

Staging environment

Live application

The downside of this is ensuring that the edited css files and images do not get copied when deploying updates. A solution to this would be to use override stylesheets that would be included dynamically acording to the host address for the page.

e.g.

mainstyle.css

h1,h2,a{
 color: #ff0000;
}

localcopy.css

h1,h2,a{
 color: #0000ff !important;
}

Then the header of the page could include something similar to this (pseudo code)

<link rel="stylesheet" href="mainstyle.css"/>
<?php if($hostname=='localhost'){ ?>
    <link rel="stylesheet" href="localcopy.css"/>
<?php } ?>

This technique would give the advantage of having the visual indicator of which environment was being viewed whilst allowing the code to be deployed in its entirety.