Add style to your Noscript messages

While most users keep Javascript enabled on their browsers, there is a section of Internet surfers who prefer to keep them off. This is either to speed up page loading, or get rid of ads or avoid malicious scripts that might be present on web pages. The noscript tag is used to provide an alternate content for such users or browsers that doesn’t support scripting. Contents within the noscript tag remain hidden under normal circumstances but show up whenever the page couldn’t detect scripting in the browser.

Why you should use the Noscript tag?

If your website is capable of displaying all of it’s content without relying on Javascript, then good for you. On the other hand, if you use scripts to generate contents on your pages or layout elements – menus, tabbed interface etc - then you should be using noscript.

Though most visitors keep scripting disabled by choice, they might not be aware of the functionality they are missing because of it, particularly if you make heavy use scripts. They might not see your jQuery driven menus or Javascript tabs and never bother to find out whether your site has any menu or not. Not only your efforts in designing goes to waste, you fail to keep those visitors on your site because with the absence of navigating menus and missing contents they leave sooner than you would want to. An error or alert message is essential to make your visitors aware of their crippled browser and guide them to make proper decisions.

Why you should use styling in error messages?

Webmasters often use the noscript tag to deliver alert messages. But most webmasters use no styling. They simply put their message between the tags, something like this:

<noscript>Please enable Javascript to view this content</noscript>

Approximately 5% of your visitors see this message. You take so much effort to design your site and yet leave a bland message for 5% of your visitors to see?

A stylized alert message not only helps to catch the visitor’s attention, but an eye catching design and a clever message might even tempt the user to enable Javascript and reload the page to see how the page actually looks.

Besides, some designers waste a lot of effort in designing creative Error 404 pages, even though a visitor rarely see it. Why not design creative noscript messages?

How to create a stylish error message?

You can use CSS to style your noscript messages, but remember not to go overboard other wise it can create validation error. Here is an example of a simple code you can use to deliver noscript alert messages.

<style type="text/css">
.noscript-message {
background:#FCE9C0 url(/alerticon.png) left no-repeat;
background-position: 15px; 
border-top:2px solid #DBAC48;
border-bottom:2px solid #DBAC48;
padding: 15px 10px 15px 50px;
}
</style>

<noscript><div class="noscript-message"><p>Please enable JavaScript to view this content</p></div></noscript>

When rendered, it looks like this

Please enable JavaScript to view this content

Looks lot better than a simple statement. You can also design a message on an image and load the image instead. That way you don’t have to limit yourself to CSS and worry about validation error. I use this method. A visitor with Javascript disabled on this site sees the following image.

Like those funny error 404 pages, noscript is a way to add some humor to your site – surprise and tickle your visitors with creative and funny messages.