DEV Community

Cover image for Why your website should work without JavaScript.

Why your website should work without JavaScript.

Nathaniel on March 17, 2021

Recently I started a site of tools for boardgames players. Simple tools like dice and spinners. I wanted the site to be as accessible as possible....
Collapse
 
akashkava profile image
Akash Kava • Edited

I don't think anybody is actively blocking the JavaScript anymore, those 1% would be some bots trying to browse using chrome/firefox user agents. And some developers trying to test the website for SEO. The cost of making application without JavaScript for 1% users is too high to consider any revenue from them. For such users you can always tell them to download Electron bundled website.

Collapse
 
pclundaahl profile image
Patrick Charles-Lundaahl

Jusr chiming in here: I am that 1%! I actively block JavaScript on plenty of sites. However, I'm probably not your target audience - specifically, I block JS on sites that use it to do annoying things (playing floating videos, popping up mailing list signup forms, powering floating chatbots that ping me constantly, or auto loading comments or images I don't care about). It lets me filter out the noise so I can focus on the content (I also heavily use Firefox's reader mode). If those things are core to your business model or marketing activities, then yeah, you probably don't want to cater to people like me.

Collapse
 
akashkava profile image
Akash Kava

Yes here is the difference, website is what people expect to read, reading and consuming content is one part of website which does not need JavaScript frameworks, but SASS or subscription based business applications where users pay for the service, disabling JavaScript does not work in user's favor. You are competing book with a interactive game.

Thread Thread
 
pclundaahl profile image
Patrick Charles-Lundaahl

Sure, no disagreements there - full-blown webapps requiring JavaScript is obviously reasonable, particularly if it's a paid service that isn't going to be needed in a personal emergency. However, if it's a critical service, I truly think it's only responsible to make sure the app works on low-end devices (insurance, medical, counselling, govt., or anything else that someone might need to access in an emergency).

Thread Thread
 
ziizium profile image
Habdul Hazeez

Yet another +1.

Collapse
 
ziizium profile image
Habdul Hazeez

+1

Collapse
 
shadowfaxrodeo profile image
Nathaniel

That's not the conclusion gov.uk came to. They came up with a way of tracking this number not including bot traffic.. Buzzfeed came to a similar conclusion and decided it was worth their time.

Collapse
 
konung profile image
konung

To be fair Buzzfeed’s 0.8% of traffic is bigger than most websites 100% of traffic, so it does make sense for them to invest significant resources to rebuild / cater to them . If your site gets 1000 visistors per week, and it’s not a pay-per-use, financially there is not incentives to spend 100s of hours to rebuild your website to cater to 10 people per week

Thread Thread
 
shadowfaxrodeo profile image
Nathaniel • Edited

Once you add up all the 0.8% niches everyone belongs to you end up something closer to 100%.

Everyone belongs to a niche at least temporarily. One could argue that there's no point in catering to people on 2g connections, or feature phone users, or the visually or motor impaired. But when you do make your site welcoming to everybody you may find more visitors show up — and you've improved your site not just for those specific people but for everyone.

Honestly I don't think it's harder to build a site this way, we're all just so used to using javascript frameworks that we think in javascript. html and css are way easier.

Thread Thread
 
akashkava profile image
Akash Kava

Again, I think @konung made right point, you must calculate the money lost in such visitors, for BuzzFeed, Youtube and general social media, it makes sense because to offer server side rendering for 0.8% fits in their budget. For lot of small business applications, there is no enough returns to support SSR.

If user cannot even afford to upgrade from 2g to 3g, do you think they will pay for the services you will offer? The calculation is straight forward, for BuzzFeed and social media sites, even 2g user is a target audience because they sell ads and ads are generally targeted to all users for brand awareness.

But for SASS business services or any subscription based services where users will pay to business, non paying users are burden.

Collapse
 
andyharmon profile image
Andy Harmon

Additionally, the Government Digitial Service (and developers across government in the UK, at least) still design their services to be operable and usable without JavaScript. And rightly so - a choice a citizen makes, wether for good reason or not, shouldn't prevent them from accessing public services.

Collapse
 
unsungnovelty profile image
Nikhil • Edited

I too am that 1%. We might be a minority but I hate it when the websites don't work without javascript. Especially if it is your personal website (this is a personal opinion and you can ignore :) ).

While I understand JavaScript have it's genuine use cases, dumping JS like we are doing now is not very great for privacy, security, accessibility and climate!

Every unnecessary computation is bad for climate. Performance not only equals better UX anymore, it means less emissions and better climate. websitecarbon.com is something I recently discovered which roughly calculates the carbon emission of a website.

While websitecarbon.com shouldn't be used as a strict benchmark, it definitely raises the question on how to create less emissions for websites? The answer most often than not is definitely using HTML and CSS without JS unless and until really necessary.

Collapse
 
williamhenderson profile image
William Henderson

Imagine just going onto some modern website from a really old or bad device and it's like "download this 150MB+ piece of software just to view the site"...

Collapse
 
moopet profile image
Ben Sinclair • Edited

Re your accessibility point,

Some people find it easier to navigate the web with javascript switched off. There's less distractions.

for me is more like, this site could be ok, but someone's gone and replaced all the navigation with some custom scripted stuff that doesn't behave like I expect it to, my tab stops are all over the place, and half the links aren't... links. They're div elements someone's attached events to because they think it's clever. I see this a lot.

If you take the extra time to make your JS-powered site run as well as a generic HTML site, that's ok, I guess, but seems a bit pointless.

Say your bakery gets 250 visitors every day. You sell a lot of pies. Life is good. At the same rates we're talking here, you're turning away a wheelchair user three or four times a week. Or even a couple per day, depending which number I picked. But you're not just saying, "sorry, we can't fit your chair through the door, can I bring you something out?", you're blanking them and talking to other people in the queue. You're saying you don't want them in your shop.

The question I'd put to a lot of designers/developers is, "why did you design this to exclude people?"

Collapse
 
pclundaahl profile image
Patrick Charles-Lundaahl

100% all of this. Doubly so if your website offers a crucial service that could ever be important to anyone in a time of need who does not have access to high-powered devices (utilities, phone service providers, hospitals and clinics, emergency services, etc.)

Collapse
 
guitarino profile image
Kirill Shestakov

Seriously, amazing article.

I personally try to make websites work without JS for 2 reasons:

  1. Because, if you can, why not? Firstly, it's a fun challenge. Secondly, it's not necessarily challenging - but definitely requires you to engage at least a few grey cells.

  2. When you build something in an environment-independent or server-side-rendered way, it usually leads to a lot of benefits, such as testability and better architecture, and, hence, better overall development and maintenance experience.

Collapse
 
mareksamec profile image
mareksamec

Thank you for this article! I have to admit, that when I see someone's personal website which has only two subpages and it loads 4MB of javascript I start to twitch :/

My brother is visually impaired and from my experience websites with massive javascript bloat usually produce many issues with accessibility and are rather hard to debug.

Collapse
 
alidhuniya profile image
Ali Hussain Dhuniya

well, how do you fetch data without js(fetch)?

Collapse
 
shadowfaxrodeo profile image
Nathaniel

Well you can still get data from the server, you just have to serve it in a new page. There's some things that will be a nightmare without js, but you can take it far — here's a chat app built with just css and html

Collapse
 
alidhuniya profile image
Ali Hussain Dhuniya

can you elaborate more on this statement(if possible refer me to some demo or articles) " you can still get data from the server, you just have to serve it in a new page" and in your chat app you have used HTML form with POST method not GET method. I don't know why chat app site keeps loading page infinity, the finish time on network tab is not stopping at all. site reload whole webpage whenever I hit submit post, unlike fetch/xmlhttprequest.

Thread Thread
 
shadowfaxrodeo profile image
Nathaniel

Sure, I just mean to say that if js isn't availble you can always use the native html forms to send and receive data. It just requires a page load.

There are other hacky ways of doing a fetch without a refresh or navigating to a new page. I actually sent you the wrong link before, I can't find a live version of the one I meant to send: Github - CSS only chat

...but that's a deliberately ridiculous example.

In reality there are times you just can't do without javascript. In those times, you should have a reasonable fallback. For example, Google Sheets, doesn't work without js. But, if you try to access a sheet with js switched off, you still get to see a static version of the document.

Thread Thread
 
alidhuniya profile image
Ali Hussain Dhuniya

thanks for the clarification

Collapse
 
qm3ster profile image
Mihail Malo

"Make your site work without JS and use JS for progressive enhancement" sounds good on paper, but in real life, implemented perfectly, it just means "Make a worse site for 99% of your audience. Less dynamic, slower to react, not offline-first, not as flexibly executing the designer's vision." It might take equal effort to making a modern site. It might even take somewhat less effort. But to do it without harming the experience of 99% of your users, you'd have to make a whole separate NoJS site. Is that something you have the budget for?

You might say that there are frameworks, even React and Vue-based, that offer server side rendering. That you could offer the same site to be consumed in two ways, "isomorphically". That is, of course, a complete fabrication.

You don't just lose clientside navigation of the outermost pages, at the cost of "merely":

  1. doing the client-authenticated web requests for data from the frontend server
  2. storing client data by session
  3. storing "incomplete" data what would not have touched your infrastructure yet (think multipage "wizard"-style forms)

But you also lose anything that's not a standard HTML5 element. Right click(long press on mobile)? Gone. Draggable lists? Gone. Sortable tables? Gone. 3D object views for your shop? Gone.
Applications for the mobile/touch web hardly use any standard elements at all.

Collapse
 
shadowfaxrodeo profile image
Nathaniel • Edited

I've only just started making things that work without javascript. I learned to code primarily with vue.js. So pretty much everything I've made up til now doesn't work for a lot of people.

What i've learned from building sites without js is that it's actually easier to build and use.

Some things you just can't work without javascript. Of course.

For things that can you should try and make it work. And if you've got something ike a sortable table, then just show a non-sortable table when js is turned off. That'd be the default behaviour of something like nuxt.js the SSR framework built on vue

Here's a site built with nuxt: sumcumo.com/en/path-next-generatio...
It works completely fine without js
Their contact form doesn't work — but it doesn't appear either, it shows their email and social media instead.

Collapse
 
qm3ster profile image
Mihail Malo

Yes, most of the stuff on this non-application purely "business card" website is still accessible without javascript (at a cursory glance, on sumcumo.com/en/company and sumcumo.com/en/products

We bring the Internet success story to the insurance and lottery industry.

and

Managing digital success in the insurance world with SCIP

never appears, and you are left with an almost blank above-the-fold)

But at what cost? On sumcumo.com/en/jobs try scrolling down (with JS on)
When you switch from "products" to "people", there's a strange flash of color.
When you switch from "people" to "jobs" the site jerks sideways (probably a vertical scrollbar issue)
Generally, there is quite a bit of jank. I am not a neurotypical, so I am not going to judge how this affects the usual visitor, but this is one of the sites where I wish less JS (and less CSS animations, if that's what some of them are) was used. It's very distracting from the content.

I understand that NoJS is important here, as this seems to be a B2B product for the financial industry, where security might be ridiculous? Good job addressing that then.

Anyway, for me, good JS is subtle. It replaces native HTML constructs to be more convenient and effective. Which is why it is a lot of extra work, if at all possible, to automatically generate fallbacks from it.
Most NoJS/CSS tour-de-force s aren't like that. They take mediocre documents, and make them "pop" (viciously attack your face).

There is a time and a place for NoJS. But let's not pretend it's a sensible default, or that there aren't serious costs and potentially insurmountable handicaps associated.

Collapse
 
stephenwhitmore profile image
Stephen Whitmore

Serious question: What do you recommend for js apps? Do you stick a bunch of stuff between noscript tags? Do you steer clear of js apps entirely and stick with server-side rendered content? With the prevelance of React, Angular, and Vue there doesn't seem to be a clean way to accommodate both users of "webapps" and those who choose to go without js completely. Is it all one way or the other?

Collapse
 
shadowfaxrodeo profile image
Nathaniel

Depending on the app, the first thing you can do is server-side render it with next.js and nuxt.js for vue. That way at least the static content of the pages is rendered and all the links still work. You can host a server-side only version of Next.js on Netlify (i think).

For dynamic content if it's not too complicated, you can stick all the inputs in a form. Then, if javascript isn't present, the user is redirected to a server-rendered version of the content. That's what i'm doing here. But that's very simple application that rolls dice. If javascript isn't present the dice are rolled on a server. It uses the same code on both the client and server side.

There are some things you just can't do without javascript — for those situations all you can do is leave a polite note in a <noscript> tag explaining what's happened.

But most of the web isn't or shouldn't be like that. It's weird that you can't use twitter without javascript — it's mostly just text.

That's my guess anyway, I'm only just starting to learn about this stuff.

Collapse
 
stephenwhitmore profile image
Stephen Whitmore

I appreciate your detailed response. It's clear from your article and your responses that you've put quite a bit of thought into this topic. I have mixed feelings about it to be honest. On one hand I love the power and capabilities of js and on the other I hate how reliant the web has become on it in recent years. Plus the potential for privacy violation it brings is a huge downside too. I get why many in the FOSS realm hate it.

I'm glad you brought this topic up. It's good to regularly question conventions and expectations otherwise we all fall into the trap of "we do things this way because this is how we do things". It's something I see a lot of in many aspects of life and I hate it.

Collapse
 
lyrod profile image
Lyrod • Edited

Probably the most popular way of disabling javascript is with the browser extension NoScript — it's available on Google Chrome and Firefox and elsewhere too.

Hum, browsers natively support disabling javascript 🤔

Collapse
 
shadowfaxrodeo profile image
Nathaniel • Edited

Yes, but it’s much easier to use an extension that toggles it for you and remembers your preferences for different web sites. As far as I know Firefox and Safari only have on and off, and you have to navigate to the settings page to do that.

Collapse
 
lyrod profile image
Lyrod

Ah yes, indeed

Collapse
 
shadowfaxrodeo profile image
Nathaniel • Edited

If you want to give Lynx a go, and you're on macOS head to your terminal (make sure you've already installed homebrew)

brew install lynx
Enter fullscreen mode Exit fullscreen mode

then

lynx https://missingdice.com/
Enter fullscreen mode Exit fullscreen mode

It's an interesting experience.

Collapse
 
nassirdreffy profile image
Nassir Amakran

Very nice article, thank you ! I made my thoughts aboute that.
Html is for semantic structuring data. Css for styling. Js for interactions...We could use html tricks instead js, but it would be broken some semantic rules of the tag in this context maybe.

What do you think?

Collapse
 
shadowfaxrodeo profile image
Nathaniel

Thanks. I think that’s generally a good idea. But not to be too strict with it.

Sometimes the end result is better when you use in built html functionality, or to style something with JS, or display content using css, e.g. background images.

Different if you’re working with a team. Which I don’t have a lot of experience with.

Collapse
 
beytek profile image
Karim Sabbagh

If you have network issues you can always refresh the page later you know. Also it's not always JS files that don't download fully, sometimes it's CSS files don't load as well, and this too can make the site unusable. So many times I get a page that's only partially loaded, I just refresh it and it works fine. And many times a page auto-refreshes when a file fails to load.
We can't totally throw away all the power that JS gives us today and cater to a few people who actively decided to break their internet experience by blocking Javascript.

From my experience, only sites that want your DATA will cater for the 0.2%. Other sites that sell you products will probably ignore you if you don't have 3g.

Collapse
 
jh3y profile image
Jhey Tompkins

I guess there's a slight caveat here though.

In that, if JavaScript isn't available. I don't believe we should do anything to make things work. For example, using things like the "Checkbox Hack". I've fallen into that trap before 😅

But, I definitely agree with the sentiment. And it's often forgotten how far native controls and a bit of styling can take you 💯

Collapse
 
hasnaindev profile image
Muhammad Hasnain

I think it is time to move on from supporting internet explorer 7 and people that aren't using JavaScript. Of course, it won't run if your JavaScript has issues but that is why we have tools like ESLint and TypeScript to make sure errors do not occur.

If people are still using internet explorer 7 and blocking JavaScript. Good luck to them, they should just leave the internet and start living in a cave for all I could care.

Collapse
 
ziizium profile image
Habdul Hazeez
Collapse
 
nicozerpa profile image
Nico Zerpa (he/him)

You convinced me. Fortunately, my personal website works almost fine without JS, there's still some work to do. Thank you for the article!

Collapse
 
peerreynders profile image
peerreynders
Collapse
 
shadowfaxrodeo profile image
Nathaniel

Yes, I should have added that to the post. Also by the same guy: Why Availability Matters

Collapse
 
lorenzoblog profile image
Lorenzo

Great article!

In Security a typo:

javscript --> Javascript

Collapse
 
shadowfaxrodeo profile image
Nathaniel

Thanks! Sorted.

Collapse
 
srslie profile image
Alice Ruppert

I like the accessibility points and I do actually know people who turn off their JS. How do you still make things interesting and what are those common workarounds you've used with HTML and CSS?

Collapse
 
shadowfaxrodeo profile image
Nathaniel • Edited

You can do some really wild stuff just css — Stephanie Eckles site moderncss.dev blows my mind.

One workaround I did was a css+html dark mode toggle, i wrote a post on it

Collapse
 
pclundaahl profile image
Patrick Charles-Lundaahl

I would guess a lot of this depends on what kind of site/app you are building, and what the value is that it provides to your customers.

I don't know what percentage of people this applies to, but I don't visit websites (or webapps) for their interesting UIs - I visit them for content (in the case of websites), or some concrete value (in the case of apps - Evernote, Google Docs, etc.). In either case, I would prefer the UI do as little as possible. Things like fade-ins, slide-out sidebars and hover-cards are fun to build, but as a user, I would prefer you skip the animation and just show me the content (otherwise it's just increasing the time I have to wait before I can get to the value I'm trying to get to).

Collapse
 
aalphaindia profile image
Pawan Pawar

Interesting thanks

Collapse
 
johnnymccodes profile image
johnnymccodes

but if javascript is disabled, how can the user be blessed by my elite typescript functionality?

Collapse
 
detzam profile image
webstuff

Well basically you could do enough with css, but i hope you learned something out if this exercise.

Collapse
 
heart profile image
Narongrit Kanhanoi

That's why i use typescript
.
.
.
.
Just kidding!