JavaScript is a powerful language which brings websites to life with interactivity, until that dreaded moment when JavaScript is disabled in the browser, out of the blue. In this quick tip we’ll look at providing fallbacks with the <noscript> element.
No JavaScript
Users might disable JavaScript for a number of reasons. They might be doing so to cope with bandwidth constraints, to save their phone battery life, perhaps for privacy so they won’t be tracked with analytical scripts. A handful of people even install browser extensions like NoScript to prevent the browser from running JavaScript. Suffice it to say, if JavaScript is disabled, many websites and apps fail to function; if not completely, then partially.
Let’s look at some examples.
Tip: For the purposes of this tutorial I’m going to use Quick JavaScript Switcher, a handy extension for Chrome which allows me to toggle JavaScript in single click.
WordPress.com
The new WordPress.com post editor is highly dependent on JavaScript. As you can see from the following screenshot, it displays nothing but the “W” WordPress logo when JavaScript is disabled. Assuming the majority of WordPress users might be non-tech-savvy, they’d probably be unaware of what is happening.
Trello
Trello, a project management webapp, is highly dependent on JavaScript. Unlike WordPress.com, however, Trello kindly tells us with a simple warning:
Facebook handles this situation even better. It displays a notification, tells users what’s happening, and provides several courses of action with the logout and refresh button, and the option to resort to the mobile-optimized version. These are all presented with familiar Facebook visual branding.
NewYorkTimes
Some sites may use JavaScript only partially, such as blogs and news sites. When using NewYorkTimes, for example, you will find a couple of blank spots when JavaScript is turned off. The search icons which accompany the Search and the Sections links disappear, as seen below.
This is graceful degradation (users may not even notice), highlighting that it’s wise to deliver the best possible experience when JavaScript is turned off.
Using the “noscript” Element
How we provide fallback will largely depend on how we deploy JavaScript on our websites, but the noscript element will come in handy in many instances. As the name implies, we can use noscript to render alternate content. Anything within <noscript></noscript> tags will render only when JavaScript is disabled.
To serve as an example I built a demo page. This demo replicates the blurred image loading effect as seen on Medium. The images and the blur effect are both delivered through JavaScript, so guess what happens when we turn off JavaScript?
The images will not be loaded.
To display these images, we can wrap them in noscript elements as well as wrapping the style declarations, addressing the positioning issues.
<head>
<noscript>
<style>
figure noscript {
top: 0;
left: 0;
position: absolute;
}
</style>
</noscript>
</head>
...
<figure>
<img src="http://webdesign.tutsplus.com/img/img-small-1.jpg"
width="30"
height="20"
class="img-small"
alt=""
data-large="img/img-large-1.jpeg"
data-large-width="1280"
data-large-height="853">
<canvas></canvas>
<figcaption>Lorem ipsum dolor sit amet.</figcaption>
<!-- fallback image -->
<noscript><img src="img/img-large-1.jpeg" height="600" width="900"></noscript>
</figure>
We can also use the noscript element to notify users about JavaScript being turned off—similar to what Facebook and Trello do. Additionally, we can add a reference link to help our users turn on JavaScript.
Wrap Up
Providing noscript as a fallback is a useful way of telling website users that, without JavaScript, things may not necessarily function 100%. But let’s not forget that your priority should be in making sure a lack of JavaScript (or CDN, or any one of a wealth of other dependencies) doesn’t break the user’s experience. Thanks to Christian Heilmann for making sure that message was conveyed.