How to Ask Your Visitors to Upgrade to a Modern Browser

On
Web browser mockupNowadays technology is changing at breathtaking pace. Whether you code your website from scratch or use any content management system, you're bound to introduce such elements in your web design that are not supported by older browsers like IE6-IE11. Still, a large chunk of web traffic still uses these old browsers that breaks your web pages. We cannot force them to upgrade but can surely show them a friendly message to upgrade whenever they visit our website or blog. To do so, one needs a handy mechanism that not only detects the use of legacy browsers but also educates the user about the same. Fortunately, there's are few good tools one can use to ensure traffic using older browsers gets a friendly message to upgrade. This not only helps people see your site in a better browser but also ensure you contribute to making internet users upgrade to newer tools. So, let's get started and see how we can use these excellent and powerful scripts quite easily on our sites to alert visitors about legacy web browsers.

Web browser mockup
Older and outdated web browsers are insecure when shopping online, memory inefficient, and fail to make modern websites work correctly. The simple solution to this problem is to use a modern web browser and that too, the latest version.

Without wasting any time, let's check out some of the best solutions to persuade our visitors to get a modern browser for a great browsing experience each time they land on our website.

1. Browser Update: This is an easy-to-implement solution to remind visitors about outdated browsers. Once activated, an unobtrusive alert is shown to the visitor which also includes update button for the modern web browsers.

Advanced users can customize it completely to suit their needs. To get started, start with the default installation code given below.


<script> 
var $buoop = {notify:{e:-6,f:-4,o:-4,s:-2,c:-4},insecure:true,api:5}; 
function $buo_f(){ 
 var e = document.createElement("script"); 
 e.src = "//browser-update.org/update.min.js"; 
 document.body.appendChild(e);
};
try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
catch(e){window.attachEvent("onload", $buo_f)}
</script>

Insert this code just before the </body> tag. The default implementation has the following features.

  • The alert (whenever required) is displayed at the top of the page.
  • The alert is displayed in both outdated desktop web browsers as well as in mobile web browsers.
  • Following browsers are checked against security issues and outdated versions viz., Microsoft Edge, Firefox, Opera, Safari, and Google Chrome.
Now comes the customization options one can use to fine-tune different aspects of this service.

During the customization and testing phase, you may want the alert to be shown on each page load regardless of the browser state. To make it happen, append #test-bu to the test page URL as shown below.


https://www.yourdomain.tld/demo-page/#test-bu

If you're testing the alert in an outdated web browser, by default, the alert will be shown just once every 24 hours. But, this is not we want during the testing phase.

To make the alert appear on each page load in an outdated web browser, append #ignorecookie-bu to the demo web page as follows.


https://www.yourdomain.tld/demo-page/#ignorecookie-bu

This way, one can easily test and customize all the features. Let's see various customization options.

Configure alert position on the screen - As mentioned earlier, the alert appears at the top of the web page in the form of a horizontal bar. There are two more placement options available for the users viz., bottom and corner.

To change the placement, use style:"corner" or style:"bottom" directives with $buoop variable. Both the examples are shown below.


/* Directive for 'bottom' placement */
var $buoop = {notify:{e:-6,f:-4,o:-4,s:-2,c:-4},insecure:true,style:"bottom",api:5};

/* Directive for 'corner' placement */
var $buoop = {notify:{e:-6,f:-4,o:-4,s:-2,c:-4},insecure:true,style:"corner",api:5};

The corner placement is on the top-right side of the screen. Most users prefer either top or bottom placement of the alert.

Disable alert on mobile browsers - If you do not want these alerts to appear in mobile web browsers, use the mobile:false directive within the $buoop variable. Here's an example of the same.


/* Directive for disabling alerts on 'mobile' web browsers */
var $buoop = {notify:{e:-6,f:-4,o:-4,s:-2,c:-4},insecure:true,mobile:false,api:5};

I'll recommend keeping this option enabled because, with each passing day, mobile internet users are growing at a rapid pace.

Configure outdated web browser versions - This is one of the most important and critical customization settings. It's done through the notify directive within the $buoop variable.

For each browser type, a single alphabetic code is used. For example, e for Internet Explorer/Microsoft Edge, f for Firefox, c for Google Chrome, o for Opera, s for Safari, and so on.

The negative numeric values associated with these browser codes govern how old a web browser version should be to trigger the update alert. For example, a value c:-4 implies that if a site visitor using Google Chrome browser is running a version which is four releases back when compared with the latest version, the alert will be shown to such user.

To make it simpler, suppose if the latest Chrome version is 20 and the visitor is running version 16 or older than that, update alert will automatically appear. Here's an example.


/* Directive for checking 'Chrome' and 'Firefox' outdated browsers */
var $buoop = {notify:{c:-6,f:-4},insecure:true,mobile:false,api:5};

In the example given above, alerts will only appear within Google Chrome and Firefox browsers. All other browsers will be ignored. For Google Chrome, 6 versions back and for Firefox, 4 versions back from the latest version will trigger the update alert.

It's not just the negative values that work with the browser codes. One can also use positive numbers and strings (text in double quotes) with the browser codes to give custom directives.

For example, the f:60 directive imply that visitors who're using Firefox version less than 60 will be alerted. Visitors having version 60 and above will be ignored.

Complete build versions can also be used in the form of a string. For example, if you're using c:"66.0.3359.139" notification directive, the Chrome's build versions older than the one mentioned within the directive will be notified and all the build versions equal to or newer than the specified one will be ignored.

Here's a complete demo for both the examples.


/* Directives using 'positive' number and browser's 'build' version */
var $buoop = {notify:{c:"66.0.3359.139",f:60},insecure:true,mobile:false,api:5};

The default browser notification configuration is good enough for most situations and can be safely used without any modifications.

Customize alert text - The default alert text is good enough for most use cases. In case you're not satisfied with it and want your very own version, here's how to do it.

Once again we'll use the $buoop variable and will add the text:"Add custom HTML text here" directive to it to get a custom message for the alert.

You can use HTML tags for this option which gives you immense flexibility for the customization. It's not just the HTML tags, but three placeholder variables give additional flexibility in crafting a custom alert text copy.

These placeholders are {brow_name} which displays the web browser name with its major version number, {up_but} which is replaced with the update page link tag, and {ignore_but} which is replaced by the ignore button link tag.

Here's a complete example of the same.


/* Use of 'text' directive to customize the alert's text copy */
var $buoop = {notify:{e:-0.01,f:-4},insecure:true,text:"It appears your web browser, <strong>{brow_name}</strong>, is outdated: <a{up_but}>Update</a> or <a{ignore_but}>Ignore</a>.",api:5};

If you're comfortable with both HTML and CSS, the customization possibilities for this alert are endless.

Customize the appearance through CSS code - If you're comfortable with CSS coding, the visual appearance of the alert can be tweaked quite easily as per your preferences.

Following CSS selectors should be used for design customizations.


/* Parent container */
body .buorg { /* Custom CSS code here */ }

/* Alert content container */
body .buorg .buorg-pad { /* Custom CSS code here */ }

/* Primary message in bold (includes current browser version) */
body .buorg .buorg-pad .buorg-mainmsg { /* Custom CSS code here */ }

/* Secondary message explaining the alert's purpose */
body .buorg .buorg-pad .buorg-moremsg { /* Custom CSS code here */ }

/* Parent container for the buttons */
body .buorg .buorg-pad .buorg-buttons { /* Custom CSS code here */ }

/* Browsers' update button */
body .buorg .buorg-pad .buorg-buttons #buorgul { /* Custom CSS code here */ }

/* Ignore button to discard the alert */
body .buorg .buorg-pad .buorg-buttons #buorgig { /* Custom CSS code here */ }

You may note that instead of directly referring the CSS classes and IDs, we're adding specificity to the rules. It's necessary in this case else the default rules will override the user-defined custom CSS rules.

There are many more customization options we've skipped for simplicity's sake. Plugins for the same are also available to ease the integration process.

Though there are several other similar kinds of web browser detection solutions, the one discussed above came out the most flexible and reliable one in our test routines. So, go ahead and try it out, now.