What Is Unobtrusive JavaScript?

by Ruud Hein December 28th, 2010 

unobtrusive-javascript 

To understand what unobtrusive JavaScript is it's easiest to start with knowing what JavaScript is or does.

Web pages are a static affair. They resemble Word documents but then on the web, displayed in your browser. You don't expect your Word document to have snowflakes falling across it nor would you open Microsoft Word to start playing a game. A document is a document is a document.

That, in short, is what a web page is: static text on a page.

INTRODUCING: JAVASCRIPT

JavaScript is a computer programming language: a set of instructions that can help tell a computer what to do, how to do it and when to do it.

With it you can make animations, games, cool effects, tools… You can turn a web page into a functional calculator or a game.

In other words, JavaScript can turn your static web page into a dynamic affair.

OBTRUSIVE & OBSTRUCTIVE JAVASCRIPT

fail

For years most JavaScript on web pages has been of a very obstructive type: if your computer or web browser doesn't have the JavaScript programming language (or it's turned off for security reasons), the web page's main functionality will not work.

What does that mean?

Well, it could mean that the nice dropdown menu when clicked on … does nothing. Nothing at all.
It could mean that the contact form on your business site cannot be filled out.
It could mean that all kinds of crazy effects and functions your web designer has relied on to get your marketing message across and your product sold … are never seen by a whole bunch of people.

So what's a girl to do? Go with the cool JavaScript but alienate some users … or forget all about it?

Fortunately, these days that is a false dilemma.

INTRODUCING: UNOBTRUSIVE JAVASCRIPT

humbs-up

The idea of unobtrusive JavaScript is to turn old school design on its head: instead of making 100% JavaScript-powered, dynamic web pages … make 100% regular, static web pages and then, almost as an afterthought, add an "also" layer of JavaScript.

The result are web pages that can work 100% in any browser at any time. And those people who have browsers with JavaScript? They get extra stuff: 110%!

This type of design ensures that menu's, forms and hyperlinks on your site work at all times and are prettied up when a browser uses JavaScript.

IT'S COMMON SENSE DESIGN LOGIC

common-sense-design-logic

If you've ever have wanted to use a vending machine that accepter dollar coins but only had 4 quarters you know how unnecessary and illogic some design choices are.

Why make an obstructive, profit-reducing choice? Make the machine so that it accepts a dollar in dollar coins, quarters, cents, dimes, bills — whatever.

Same goes for web pages: why make a page which forces an obstructive, profit-reducing choice upon its visitors when — just as simply — you can have it all?

WHAT UNOBTRUSIVE JAVASCRIPT LOOKS LIKE

GOOD: NO JAVASCRIPT

This is an example of a normal static clickable link on a web page:

image

The part you and I would see on the web page is:

image

BAD: (OBTRUSIVE, OBSTRUCTIVE) JAVASCRIPT

Now the link has been turned from static to dynamic. The dynamic (" do something") part is that it would open the link in a new browser window:

image

Someone with JavaScript will click on it and have a new browser window open up and it will go to the www.bing.com address.

Someone without JavaScript will click on it and nothing will happen. Nothing. At. All. Not even a warning

BETTER: (OBTRUSIVE) JAVASCRIPT

image

Here there is a normal static part of the link and a dynamic, JavaScript part.

The JavaScript is not obstructive: it doesn't take the place or the normal code so that when a user without JavaScript clicks the link, it works. On the other hand, when someone with JavaScript clicks it will execute the JavaScript part and open the link in a new browser window.

Because we can see the JavaScript in the same part where the rest of the things happen we call it obtrusive: it sticks out.

BEST: UNOBTRUSIVE JAVASCRIPT

image

100% unobtrusive JavaScript doesn't happen inline with the rest of the code. Instead, somewhere else in the web document a little bit of code is added which only executes when JavaScript is enabled on a computer. Once it executes it adds all the code it needs to what's already on the page.

DOES IT MATTER?

On average 2% of people online have JavaScript disabled. In some markets that can be much higher, in some lower. Certain B2B markets have much less JavaScript-enabled people as IT departments sometimes disable JavaScript to better secure a company's intranet.

If right now you have obtrusive JavaScript you can calculate the ROI of investing in unobtrusive JavaScript to see if it makes sense to go after it right now.

If not, simply add the requirement "unobtrusive JavaScript" to your spec sheet.

IS NOT HAVING UNOBTRUSIVE JAVASCRIPT BAD FOR SEO?

Not necessarily.

On a purely technical level search engines are much better then they used to be at reading and following links that are stuffed away in JavaScript. Still, given that we don't have to choose one or the other we prefer a "better safe than sorry" policy if the ROI for modifying JavaScript is there.

On an indirect level, potentially ticking people off and have them talk about a negative, limited experience they had on your site is not something we like to see. Like Google, we don't believe that any publicity is good publicity.

From a user perspective we have to be honest: as long as the use of JavaScript on your site isn't obstructive, it's "good enough". But good enough can be better " and squeezing every ounce of traffic you have on a site for what it's worth is best.

Of course, if youre starting from scratch, using an outdated way of implementing JavaScript is just not needed: your money should buy you the best.

WHO DO I ASK ABOUT THIS?

When looking at an existing site you can ask the person responsible for your site (your webmaster or web design company) or test for yourself (see below)

Unobtrusive JavaScript is a web design requirement. It should be included on the requirements spec sheet for your web site.

When talking with the people responsible for making your web site you make the requirement know by stating: "where JavaScript is used we want it to be unobtrusive JavaScript".

Good web developers/designers will know what this means. If they don't seem to be sure or you're not sure you're getting your message across you can send them a link to Operation Cleanout in process or have them read this article.

HOW CAN I TEST IF MY SITE RELIES ON JAVASCRIPT?

Temporarily disable JavaScript in your browser.

Then visit and browse through your web site, taking notes of what works and doesn't work. Try executing common tasks: if yours is a shopping site, try the buying process; if you invite prospects to contact you, try submitting your contact form.

Ruud Hein

My paid passion at Search Engine People sees me applying my passions and knowledge to a wide array of problems, ones I usually experience as challenges. People who know me know I love coffee.

Ruud Hein

You May Also Like

5 Responses to “What Is Unobtrusive JavaScript?”

  1. Kris Scheben-Edey says:

    Great article, and continuation of posts on Javascript. While human visitors with Javascript disabled might be slim, the search spiders certainly give us the additional motivation to make an unobtrusive design.

    One neat trick that can be use is the "noscript" tag, which allows you to write a separate portion of code displayed in place of a "script" (used for javascript) element, should the user have it disabled. This allows for visual functionality in Javascript, while also presenting an unobtrusive and search friendly version of the page to users with Javascript disabled.

    Great series Ruud, Javascript cannot be ignored!

    • Ruud Hein says:

      Thanks Kris.

      I like the noscript tag but as it's been abused quite a bit over the years I wouldn't rely on it.

      Thanks for stopping by and the kind words!

  2. How is the graphic example unobtrusive JavaScript when the
    links don't work with JavaScript turned off? Isn't that the mark of
    obtrusive JavaScript? .-= Cathy Reisenwitz recently posted: Blogger
    outreach link building update- Part 2- the reactions

    =-.

    • Ruud Hein says:

      Thanks for asking, Cathy, and thanks for taking the time to clarify your question via email.

      When you visit unobtrusify.com (the site linked to via the graphic at the top of the post) with JavaScript turned on clicking sections has text slide out. Turn off JavaScript and refresh the page and that text is visible by default.

      In other words, the JavaScript people get the coolest experience but the non-JavaScript people don't miss any information.

      Hope that answers your question!

  3. [...] What Is Unobtrusive JavaScript? (searchenginepeople.com) [...]