Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:17Length:2.6 hours
  • Overview
  • Transcript

2.5 Detect and Respond: Problem Browsers

Sometimes there are certain “problem browsers” that can’t be catered for if you’re using particular technologies in your projects. Learn how to detect and respond to browsers you’ve elected not to provide support for.

2.5 Detect and Respond: Problem Browsers

Hello, and welcome to another lesson in bomb-proof web design. Next up, we are going to look at what you can do about browsers that you've decided to completely rule out. That you are just not going to support these browsers at all. So typically, you would look at particular features. That might not be supported in a browser. So for example, if rounded corners aren't supported, than you'll look for that specific feature, and then you provide a fall back just for that feature. However, there might be some cases where you've decided to use technology that is so integral to your site that there's really no way that you could accommodate someone who doesn't have a browser that supports those technologies. So, web components and Flexbox are the real standouts there. Even if you're using a polyfill, with web components, you're only gonna be able to cater to people who are using IE9 or higher, and you won't be able to cater at all to people who are using Opera Mini. And if you decide to use Flexbox for your layouts, they are IE10 only, again even with polyfills, and they also don't work in Opera Mini. So for that reason, you might decide that you just don't want to offer support at all for any of these browsers. And the other consideration is IE6. Now that's a browser that is so old, it's not even supported by Microsoft anymore. However, as you saw when we were looking at stats in a previous video, it does seem that there are still a small number of people out there who are using it. Because it is so old, it supports almost nothing of up-to-date technology. You don't want to be trying to deal with supporting IE6 this late in the game. However there's no reason that you can't put a notice up for IE6 users just to prompt them to go and upgrade their browser and to let them know that they're not going to be able to interact with your site. So what do you do about visitors who are on these browsers who come to your site? There are a couple of simple techniques, and I'll show them to you now. Okay, we'll start with handling all the versions of IE. So if you are going to be ruling out support for all the versions of IE, that's probably going to mean IE9 or older. So what you can do is grab these conditional tags and use them to wrap a message that's designed to communicate with people on these older browsers. So I'm just going to grab that, and put that right at the top of this simple web page that we saw earlier. So what that will do is show the contents Of this message only to people who are on IE9 or lower. Anyone who is on IE9 or lower will see this. You can put anything you like in this message. It can be whatever you think will best suit the audience of this particular website. In this simple demonstration, I'm just suggesting to people to upgrade their version of IE with a link to where they can go, or to switch to another browser. Now that links over to browsehappy.com, and browsehappy.com will give people some really easy, digestible information on which other browsers they might like to choose from. Now if you do want to support IE9 or 8 or 7, if perhaps IE6 is the only browser that you are not going to be supporting, then all you have to do is change that 9 in the opening tag of the code that we added to whatever browser it is you are not supporting. So if you will be handling everything from IE7 and up, and you're just going to let IE6 users know that they'll need to upgrade. Then all you'll have to do is change that 9 to a 6, and you're good to go. Next up, we will have a look at how you can deal with Opera Mini. With Opera Mini, what we're actually going to use is a piece of JavaScript. This JavaScript here, which we will put in the bottom of the page. Just above the closing body tag. Now what this does, is it checks on something called the user agent string. So, basically what it does, is it asks the browser, are you Opera Mini? and if it is, it will set this little variable we have here, isOperaMini, to true. Then what we can do is say well, if isOperaMini, then execute this line of code here. The second part of the equation is to create another message, just like we did for IE, which we'll also add to the top of the page. And what we've done is create a message that's designed for Opera Mini users, and to start with, we've set it to display none. So by default, this little message is going to be hidden. This where it interacts with the JavaScript that we just added. We use jQuery to show that message only if the user is on an Opera Mini browser. So if we have a look at the Opera Mini emulator, you'll see how this works in action. So here we go, sorry but this website does not support Opera Mini. Please switch to another browser such as Opera for Android, Chrome, Firefox, or Safari. Now you can't really give people direct links to these browsers because you don't know what operating system they're going to be on. You don't know. There's a lot more moving parts with a mobile device, so it's better for them to just make another selection from whichever app store they need to download browsers from. Now, again, you can put anything you want inside these messages. I've just gone with a red band across the top of the side, but you might also prefer to do something that obscures the whole site. So whatever features are broken because of the person having a browser that doesn't support what you're doing. They're not going to see half operational websites, they're just going to see your message letting them know that they need to switch to another browser to use your website. Next up is the final step in detecting and responding to unsupported setups. And that is incorporating the brilliant Modernizr script into your projects.

Back to the top