Ioanni Mitsakis February 1st, 2017

Outdated Browser: Free Project Informs Your Visitors About the State of Their Browser

The problem is not as severe as it was several years ago. Nonetheless, even today, too many people are still surfing using an outdated browser. If your website is very up to date in terms of web standards, these people won't be able to enjoy that. So, before they get angry at you, just give them a friendly notification that they are surfing on yesteryear's tech.

Sorry, But Your Browser is Ancient.

Whistleblowers like "Outdated Browser" were everywhere a couple years ago. But none of them looked as good as the one that I'll present to you today. "Outdated Browser" comes in many different languages, as a combination of JavaScript, and CSS. The tool is available for free on Github, under the MIT license, and is free of dependencies. Thus, you can use it as an independent solution. The JavaScript's compressed version only weighs about 3kb. The compressed CSS weighs 1kb. Different languages are included as HTML files. Each of these makes up about 0.3kb. Using it is simple. You need the compressed JS, as well as the CSS, and the folder lang. All required files can be found in the download archive. Set up the package in your webspace, and integrate the files in the head (CSS), and body (JS) of your website, respectively. Right behind the opening body is were you place a Div with the ID outdated. This triggers the JavaScript. The integration and activation of the solution only takes a few minutes. You could adjust the appearance, but as it's already designed in modern flat style, it should already be handsome enough for the most application cases out of the box. Now, if the page is accessed with a modern browser, nothing happens. If a user visits from an outdated browser, a header will give him a friendly notification that there's a newer version for his browser. If the user clicks on the notification, the following, politically correct, overview will be displayed. It's important to know that the solution targets desktop browsers, and can only be used for those. Before you criticize that, you should ask yourself if there are outdated browsers on mobile devices. Not really, right? Okay, maybe if you're still rocking Android 2.01, but if that's the case, web usage is not your biggest problem anyway.

Outdated On All Levels

Those that take a closer look at the JavaScript and CSS will probably throw their hands up in despair. The code truly deserves the label outdated. However, the reason for that is simple, and logical. In order for "Outdated Browser" to work in old browsers, it has to be written for these old fellas. There's no room for modern approaches. "Outdated Browser" is a solution by the Portuguese design agency Buro, and is available for download and participation on Github. Users of self-hosted WordPress installations can directly use the tool as a plugin, making the integration easier. For the sake of completeness, I should mention that there are other ready-made modules, for Ruby, Drupal, Magento, Contao, and Yii2. Featured image by RetroSupply on Unsplash

Ioanni Mitsakis

Ioanni Mitsakis is front-end developer at a major European automotive supplier and responsible for the look & feel of their internal cloud-based apps. As his employer works internationally with distributed teams world-wide, a rock-solid development foundation is what Ioanni aims for. He better should ;-)

Leave a Reply

Your email address will not be published. Required fields are marked *