Do you recall those warning messages telling you your browser is not supported for viewing the website? Here's how you can implement one in less than 5 minutes.
It's a fact that you can't please everyone. Regardless of how much you try it there will always be at least one that does not fall in the charts and you need to find a way to deal with the situation in one way or another.
In a world where Chrome web browser is used by more than 70% of the people when spending time online, Firefox takes second place with only 10% market share leaving the remaining 20% to be split among all the other contenders:
- Safari 5%
- InternetExplorer and Edge 5%
- Opera 2,5%
- and others(UC Browser, Dolphin, Samsung Internet, Android browser) taking up the rest of the space
It's clear that If you make your website fully functional for Chrome and Firefox you've covered more than 80% of the people spending time online. But the numbers change when you're addressing to a certain community and the reasons vary from the region they live in, the operating system they are using and last but not least it is just a matter of habit; I personally had a time when I only used Opera but I can't really remember why and then I switched to Edison (yes I know, never heard of it) just because it was the only one having an interface in my native language at that time.
What is clear is that everyone is free to use the browser of choice regardless of the reasons behind their decision. This puts you in a place where you have to decide how much extra time you're going to spend on making the website compatible with as many browsers as possible; and to make the task even more demanding this is not always under your control because not all browsers support all features.
Yes, Action Form might work on internet Explorer 6 and 7 if you only use Text Box fields; but once you build more complex forms for your website then problems arise narrowing down the browser support. Caniuse.com will usually help you determine with which browser is your application compatible based on the features used; for example, flexbox, a method of positioning elements on the page is only supported in InternetExplorer 10+ and not in older versions as can be seen here. You either don't use flexbox so that the app works on Internet Explorer 8 as well or simply you show a warning message to your users kindly asking them to use Chrome, Firefox or other supported browser in order to have the best experience while using your web application.
The video tutorial we present today shows how easy it is to show a warning message to users based on browser type detection and even on browser version by also suggesting more than one implementation methods:
- MyTokens - detailed in the video
- javascript detection by using an already built library for doing just that (outdatedbrowser.com)
- Redirect Toolkit if you want the verification to be done for all requests coming to your website
You can either inform them of the situation with a simple notification box or you can use a Captive Page built with Redirect Toolkit to provide them detailed information about how to use the website or how to install and use a fully compatible browser.