TIP: Remind the user they’re working in production!
This has now come up more than once in my career, so I thought I would share.
A common practice is to have different instances of the same web-based software running in your dev, stage, test, and production environments. You test changes in dev, and on occasion you press the big scary button in prod. The problem is, of course, these sites look very much the same from browser tab to browser tab and it is possible to run the wrong thing in the wrong time in the wrong environment.
So, a fix I concocted about twenty years ago, and again recently, is to skin in a background tile to a production environment, that cautions a user that they’re in production. The design is “very light red” to replace a white background, but also the word “prod” in a slightly darker color, to add a bit of emphasis, and to ensure compatibility with our color blind friends.
Tile the phrase “prod” in a stagger across the background of a sensitive web site to instill caution.
Upload the file, and add this to the site’s CSS:
BODY { background-color: #ffdddd; background-image: url(“/images/prod.png”); background-attachment: fixed; }
And, you are done! You can see a “demo” on this blog entry. Thanks to Google Gemini for telling me how to slide CSS declarations in via HTML from within a document body using JavaScript. I hate AI so it is a nice little thrill when it provides actual value.
The background-attachment: fixed cause the background to not scroll in the viewport. I think this makes it more noticeable and also allows the user to scroll past potential readability issues triggered by the background graphic.
