Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:12Length:1.5 hours
Wordpress thing to check 400x277
  • Overview
  • Transcript

2.5 Preparing for “No JavaScript”

JavaScript is used by just about every WordPress theme to add polish and extra functionality. But your site visitors won’t necessarily have JavaScript enabled or allowed in their browser. In this lesson, we’ll go through checking that your theme is ready for visitors with no JavaScript.

Related Links

2.5 Preparing for “No JavaScript”

Hey, welcome back to WordPress themes, things to check before you buy. In this lesson, we're gonna be talking about how to make sure a theme that you're interested in can cope if there's no JavaScript active in a vistor's browser. If you've never heard of JavaScript before, basically, it's a scripting language that gets executed by the browser that can be used to add extra functionality to a theme. So for example, it might be used to power a slideshow, or it might be used to load fonts or create animated effects. There's all different kinds of things you can do with JavaScript, and most themes will use Java Script in some way, shape, or form. But there's always gonna be a percentage of your users who don't allow JavaScript to execute in their browser for one reason or another. They may be blocking JavaScript out of security concerns, they might be blocking JavaScript, because they're tired of JavaScript powered advertisements. Their workplace might not allow them to run JavaScript, or some JavaScript might just fail to load or function for some type of unknown reason. So it's always a good idea to make sure that your theme either can still function without JavaScript. Or if it really, really depends on JavaScript, that it'll at least display some type of message to a user, letting them know that JavaScript is required in order to view a theme. I'm gonna give you a little example of how much difference it can make when JavaScript is or isn't active on a particular site. This here is not WordPress, so it's a little bit beside the point, but it's a good example for our purposes. This is Discourse, which is a type of forum that's run and it's primarily powered by JavaScript. You can see that we've got all of the different conversation topics that are going on in this forum. That if I disable JavaScript, have a look at how different it looks. So now that looks totally different, the layout's totally changed, and it looks like a completely different website. And what's important to note, though, is that you can still see all of the content. So this is actually a good way to handle JavaScript not being active, in a theme that uses a lot of JavaScript. The main thing is that you should want to make sure that the content is still accessible for people who are visiting your site. So how can you check if a theme that you're interested in buying copes well without JavaScript? Well, the way to do it is to get yourself an extension that lets you toggle JavaScript on and off in your browser. And this is one that you can use in the Chrome web browser, Quick JavaScript Switcher. And I'll include a link to this extension in the notes below this video, so you can install it and try it out yourself, it's free of charge. And what this will do is add a little toggle up here in your toolbar. All you need to do is hit this toggle, and that will turn off JavaScript in the browser. Hit it again, it'll turn JavaScript back on. So let's have a look at a couple of themes, and we'll see how well they cope without JavaScript. So this theme actually uses a fair amount of JavaScript. But let's find out what happens when we turn that JavaScript off. All right, so now that's refreshed, that has made this little dimmer sidebar pop out, because that's powered by JavaScript. However, that's not gonna be present in the live theme when you're actually using it, so we can just ignore this. One of the things that we wanna check on is making sure that the menu system is still accessible. Sometimes developers will create JavaScript-powered drop-downs, but those drop-downs can't be accessed when JavaScript is off. But if we hover over the menu items here, we can see that we do have this drop-down appearing, even though JavaScript is off, so that's all good, that's perfectly fine. Another thing that can happen sometimes is, if you have a slider up in this area here, when JavaScript gets turned off, you might see all of the slides stacked one on top of the other. But that's also not happened here, that's behaving just fine. And we can just scroll through and have a look, and we can see here that everything looks just fine. So nothing is broken there, and nothing looks drastically different. All of the content is still accessible, and that's exactly what we want. Now let's look at another example, this is a particularly interesting example. Because you can see in this URL here, we see layout is powered by Masonry. And Masonry is something that's written in JavaScript that helps arrange all of the columns on a page. See you can see how we've got all of these sort of tiles in these columns, and each one of them is arranged, as the name suggestions, like masonry tiles. So this layout is really heavily powered by JavaScript, so then the question is, what happens when we turn JavaScript off? Does the content remain accessible, even though JavaScript is being used so heavily? Well, let's take a look. All right, so now we'll scroll down, and we're doing just fine, so we've still got all our content here. The only thing that we're missing is it's not able to piece these tiles together masonry style. But all the content is still accessible, and that's what really counts. It doesn't matter too much if there are some imperfections, unless it's something that really is a bother to you, and you don't want to have as part of your site. But all of the content is accessible, so that is requirement number one. And you can also see that even though we have a slider up here when JavaScript is active, it hasn't broken anything that JavaScript is not active. The only thing that's maybe a little wacky is this loading bar is still going, even though there's no slideshow actually running. Something to bear in mind is, people who do deliberately disable JavaScript in their browser, they're used to things being not necessarily 100% right. So they're not gonna be expecting slideshows to be running like they would if they were running JavaScript, so you don't have to worry about being too fussy. As long as everything still remains accessible, that navigation remains accessible, and that nothing is completely out the window. Another thing that you wanna do as part of these types of tests is use that mobile emulation mode that we used earlier. Sometimes people will use JavaScript to handle transitioning their site from one layout to another. And doing things like triggering a mobile version of a menu, for example. So I'm gonna open up the web developer tools with Ctrl+Shift+I. And I'm actually just gonna get this out of the way so you can see a bit more clearly. And we'll make this emulate an iPad Pro. So now we can see that it's still totally accessible to get into the menus. Gonna take that back, and everything is still looking just fine. So these are the things to look for, you want to check out how everything behaves without JavaScript in both normal desktop mode and in mobile emulation mode as well. The best possible result is that it looks and behaves exactly the same as it does without JavaScript. If you can't have that, then the next best thing is to make sure that the content is still accessible, including navigation. And then, in the event that those two things fail, then the third best thing is to at least have a message letting users know that things don't function, because the site requires JavaScript. And this is one of those things where how important this is for your project is really up to you. A lot of people feel that the percentage of users that don't have JavaScript active is small enough that they're not willing to put a lot of time into making sure that the Node JS functionality is top tier. A lot of it will come down to who you think your audience is. So if you think you've got a lot of people in your audience who are likely to be blocking JavaScript, because, for example, they are security conscious or they're more inclined to be trying to shut down any JavaScript powered ads. Then this is definitely something that you would wanna put a bit more thought into. You don't think that you're going to have a huge number of people looking at your site without JavaScript, then just make sure that it just gets across the line. That it just has basic functionality in the event of JavaScript failure. So next up, we're gonna take a look at some WordPress specific things that you should check on in a theme that you're considering buying. WordPress has its own set of requirements, it has its own organization. And a good WordPress theme developer will be closely acquainted with all of these different aspects of WordPress. And they will have built out a theme to accommodate these different aspects. So we're gonna go through a little list of some WordPress specific things you should check and make sure are present in your theme. So we're gonna do that in the next lesson, I'll see you there.

Back to the top
Continue watching with Elements