FREELessons: 17Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Detect and Respond: No JavaScript

Once you’ve decided what types of support you’ll offer, how do you know what aspects of that support to deploy when a visitor comes to your site? Learn how to detect various setups so you can respond to them according to plan. We'll start with what to do when a user has no functional JavaScript.

2.4 Detect and Respond: No JavaScript

Hi, welcome to BombProof Web Design. In this lesson, you're going to start learning how to detect and respond to incompatibilities, beginning with situations where Java Script is disabled. Once you've decided which technologies you will and won't be using, the next thing you have to do is start responding to unsupported setups. The place that you're going to need to put your first focus. Is on anything that completely breaks the functionality of your site. The easiest one of those to deal with is if you have a site that is going to depend on JavaScript. For example, if you've used web components or if you're using client side rendering. This is actually fairly easy to deal with people that don't have JavaScript enabled. Remember as we talked about in our previous video, even if you don't think that there's going to be very many people that have deliberately disabled JavaScript it doesn't mean that you shouldn't Cater to situations where JavaScript hasn't worked for one reason or another. There's all kinds of new devices coming out. There's gonna be all kinds of new scenarios and you just never know. And because it is quite easy to deal with JavaScript not working, there's really no reason that you shouldn't have something in place. Let's have a look at an example of how easy this is to handle. On the right side of the screen here, we have a site that has been rendered in the client. So I am using a script called Handlebars that completely takes care of all of the content rendering right here in place. So you can see on the left here, I have a little template. And I'm populating that with content on the fly as a visitor reaches the location. This is all dependent on JavaScript. So what you can do when you wanna find out how your site is going to look without JavaScript. Is you grab this excellent little extension called quick JavaScript switcher for Chrome. So I'll include a link to that below the video. With that extension installed, you can just click this little button and it will turn off JavaScript. So, as you can see, in this example, when there is no JavaScript you have absolutely no content. So, if something has gone wrong, whatever the reason, the visitor that doesn't have functional JavaScript is going to get absolutely nothing on the page and have no idea what's going on. And there's no need for that to happen because it is very easy to create a fall back. So over here in. Let me show you how simple this is to deal with. What we need to do is include a NoScript tag. NoScript And then just include a little message here for visitors. Sorry, that you need JavaScript. So now if we save this out Now when there's no JavaScript in place, if there's no JavaScript operating, the user actually gets an idea of why they're not seeing anything on the page and you can also use a little bit of formatting on this. So, just to give you a bit of a further example Here we've put a class around this content and a little bit of extra formatting. So there you go. Very, very simple, but this way you make sure you do have all your bases covered. And then if I renable JavaScript, there you can see that the full content is in place. In the next lesson you'll learn what to do in response to visits from browsers that you've decided to have a zero support policy for.

Back to the top