Website Design Tricks With Noscripts - How To Offer Alternatives When JavaScripts Aren't Used

One of the big issue with website design is that of usability. In this particular case, what happens when someone comes to the website and either has JavaScripts turned off, or uses some other technology that can't use it? When that happens it normally becomes as if the JavaScript element simply doesn't exist. The JavaScript element is either ignored as a whole or not loaded in the first place. However, what if there was an alternative, what if you could replace the JavaScript with something to use when it isn't used?

This is where the often unused Noscript comes into play. It is a special code element that just sits dormant until the Script element isn't used or can't be loaded. When that happens, the Noscripts element replaces the unused Scripts one. As an example of this in action, lets look at the SEO In Use Contact Page. You can look at the page if you like, however, we've provided pictures so you don't have to leave this page.

As you can see in the picture above, nothing looks out of the ordinary. Each of the five lines displayed with the (+/-) element has additional information underneath it that's been hidden away by a JavaScripts code. The problem with this is that if JavaScripts is turned off, or can't be run, the page remains this way. No matter what anyone does, they can't "open" these areas up to see the information presented. This defeats the entire point of having a contact page so we need to find an altenative.

This is where the Noscripts come into play. We can add an additional code element under each of these areas so that it displays when JavaScripts are turned off or unused. However, we can also add other elements that were not needed until that point as well. The great thing about Noscripts is that they will run wherever they are on the page. They don't have to be connected to an actual JavaScript code (which is their common usage). Take a look at the same page with the Noscripts element shown.

As you can see there is now a lot of new information on the same page. Under the "Contact SEO In Use" heading there is a quick links bar that wasn't there before. There is also contact information displayed as well as part of a contact form. In actuality there are a total of four contact forms displayed on the page, one after the other (just as with the lines displayed in the first picture).

By being able to use Noscripts to add the quick links bar, we've made it easy for our visitors to get to the specific contact form they want to use without having to scroll down to find it. We've also been able to keep the JavaScript element that we wanted to use to hide everything normally. Without the JavaScripts item our form would look exactly like it does in the Noscripts version all the time. While this may have been more practical, it wasn't what we wanted to do. Plus, we would not be able to use it as an example of Noscripts in action as we are currently doing.

The really cool thing about Noscripts is that there isn't a lot of limits placed on them. You can use Div Tags, forms, text, and just about everything else inside of the Noscripts tags. In that regard it's an amazing tool that allows you to do things a little differently for people who can't, or don't, use JavaScripts. The only thing you can't do with them is hide information to try and get better search results. As soon as you try and do that the Search Engines will know what you're up to. Plus, each person who visits the website that doesn't use JavaScripts will know something's up and that could cost you clients, buyers, etc.

As an added note, if you use a JavaScripts on your website that people need to know about you, can use Noscripts as a way to tell people about it. That's actually their intended purpose. It can be a simple "You Need JavaScripts Enabled To See This Item" message, or an entire alternative to it (as we've just been discussing). Either way, if it matters that the JavaScript isn't working, let people know what's happening with Noscripts.

To actually use the Noscript element it's as easy as putting your code between <noscript> and </noscript> tags. That's really all there is to it, aside from your creativity and imagination.

PS: To see the full Noscripts in action on the SEO In Use Contact Page turn off JavaScripts in your browser settings and refresh the page. How to do that we will leave up to you to find as each different browser does it differently.