Skip to main content

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.

noscript3

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.

Comments

  1. instead of adding an extra div, couldn't you apply the styles directly to the noscript tag itself?

    ReplyDelete
  2. No you can't. Noscript does not accept style parameters within it's tag. You have to use a separate DIV section.

    ReplyDelete
  3. i meant using CSS, like so:

    <:style type="text/css">
    noscript {
    display:block;
    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><:p>Please enable JavaScript to view this content<:/p><:/noscript>

    the only difference i've found between your way and mine is that a display:block is needed to directly style the noscript tag in this instance, as a noscript tag is an inline tag, by default.

    ReplyDelete
  4. @ed: OK, I got it. But I never tried it that way.

    ReplyDelete
  5. Styling the noscript tag directly produces unexpected results in IE7.

    ReplyDelete

Post a Comment

Popular posts from this blog

69 alternatives to the default Facebook profile picture

If you have changed the default Facebook profile picture and uploaded your own, it’s fine. But if not, then why not replace that boring picture of the guy with a wisp of hair sticking out of his head with something different and funny?

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.

How to Record CPU and Memory Usage Over Time in Windows?

Whenever the computer is lagging or some application is taking too long to respond, we usually fire up task manager and look under the Performance tab or under Processes to check on processor utilization or the amount of free memory available. The task manager is ideal for real-time analysis of CPU and memory utilization. It even displays a short history of CPU utilization in the form of a graph. You get a small time-window, about 30 seconds or so, depending on how large the viewing area is.