Progressive enhancement is important! Here’s why

Progressive enhancement means that the Website/Web application will work even when JavaScript is not available. But will be enhanced if it is.

Let’s take Angular JS for example. It has been known for the fact that JavaScript is required to use any Angular application.

How does a site build with Angular look like without JavaScript?

Angular JS docs without JavaScript enabled

Exactly like the example here or you’ll be left at the “loading screen” forever.

Angular JS has been around for nearly six years now and I’ve never used it. Why? Because the first time I saw how it does data-bindings it was off the table for me.

There’s no error message. The average user got no clue what’s going on except that it doesn’t work so overall it’s a terrible user experience.

I don’t want to pick on Angular here but I’ve not seen anyone do data-bindings like that before Angular and nowadays this is even a popular style. Dozens of frameworks use it.

It’s 2016, everyone has JavaScript, right?

Which means that as soon as you have something that doesn’t work without JavaScript your loading time will actually increase by the amount it takes to download it and execute it. So your site will be visually complete and interactive earlier when you use progressive enhancement.

Around 1% of the users don’t get JavaScript enhancements!
StackOverflow without JavaScript enabled

There’s still good reason to disable JavaScript and there will always be. See why do people disable JavaScript if you can’t think of any.

How to do it the right way

So even though the user might not be able to use some features of your site if JavaScript is not available at least give him a site that works.

Some of the smartest people I know disable JavaScript for most sites

If you can’t think of any way you could make your site work without JavaScript then think again. Otherwise tell him what features of JavaScript are so essential to you that you can’t live without them. Also show him a Screenshot or a short Video of your site when JavaScript is enabled.

The ad blocker with noscript comparison

If you still can’t see how this is important then think about it this way.

Let’s say you have JavaScript enabled and you’ve got an ad blocker enabled like most users.

A site detects your ad blocker and tells you that you’ve to disable it to use their site. What will you do? Hopefully not disable the ad blocker for this site but try to disable JavaScript and if that won’t work you’ll either climb in there and remove that check or you’ll simply leave the site. Who would ever disable a feature they enabled themselves without a good reason?

If the site would instead just work and replace the space of the blocked ads with information which would assure you that they’ll only display text ads and maybe it’ll even display how much money was earned through ads this month and how much money is needed to keep the servers running and how much money was lost through users that use an ad blocker.

If the user would then like to support this site he could whitelist it at any time.

Give the user a good reason to enable JavaScript

by providing a site that works without it and point out for what features JavaScript would be required for what reasons.

The worst case scenario is that the user just leaves the site because it doesn’t work and you should care about every user!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.