Habdul HazeezIntroduction
The three musketeers of Web development are indeed HTML, CSS, and JavaScript. The way you combine these three amigos can have a significant effect on your web page layout.
Not just the way you combine them, but also the way you actually write them. This means if you are using a feature in CSS or HTML that's not supported in all browsers; What will happen to users that use a browser that does not support the feature you've implemented?
Another scenario is when JavaScript is a core part of your application and you change or modify some page elements with it; What will happen to users who have JavaScript turned off in their browser? Or browse the Web with JavaScript turned off using a browser extension like NoScript?
I decided to find out. Rather than choosing some random sites to test, I handpicked some top websites on the Web today and opened their Home page with JavaScript turned off in my browser using the NoScript browser extension.
Based on the result, I categorize them into three categories namely; The Good, The Bad, and The Ugly.
Let's begin with the good.
The Good
In my research, for a website to be categorized as good that means the home page or at least the website is still usable with JavaScript disabled.
I am pretty sure you are not surprised with this selection. When you have JavaScript turned off in your browser Google redirects you to a mobile version of the page optimized for browsers with no capability to render JavaScript. You will also get the same view when you visit Google's homepage with Opera Mini.
Wikepedia
The online encyclopedia, seriously I was not expecting it to fail and it did not disappoint me. The home page is identical with or without JavaScript enabled in the users' browser.
Netlify
Have you ever heard of that name Netlify? Something tells me you have. There is only one significant difference in their homepage when JavaScript is disabled in the user's browser. Compare the images below and see if you can spot the difference.
The homepage looks solid with JavaScript disabled and almost no noticeable changes compared to when JavaScript is enabled.
Bing
Microsoft search engine is quite awesome with JavaScript disabled. Compared to Google it does not redirect to a no JavaScript version of the site. The least I can say about this is: resilient.
Smashing Magazine
In all reality I did not expect their site to fail without JavaScript and it did not.
Can you spot the difference? Don't worry it's quite minimal.
The Bad
For this page if any part of the web page fails to load it's considered bad.
Yahoo!
When you land on Yahoo!'s homepage with JavaScript disabled, you can only use part of the page, the rest of the page is the skeleton of what's supposed to load but it did not due to unavailability of JavaScript.
Say what? No am not kidding you. Twitter stops in your track if you have a browser with JavaScript disabled. They give you just an option to redirect to their legacy website which is mobile twitter on a desktop.
BBC
One of the most popular news website seemingly fails to load some images on the homepage if the user has JavaScript disabled in their browser.
Reddit's behavior when JavaScript is disabled is similar to Yahoo! Some page content load, other don't.
If you want to access Reddit with JavaScript disabled you can use https://old.reddit.com
The Ugly
For this research, if it's ugly that means most of the homepage content is unusable or totally unavailable without JavaScript.
YouTube
No JavaScript in your browser No videos for you on the desktop version of YouTube. You only get skeleton of page content that failed to load.
ThePracticalDEV
If JavaScript is disabled on DEV, you lose access to the most important information on the page i.e. the blog post.
The purpose of this research is to show that Resilient Web Design wins as shown by Google, Bing, Netlify, and Wikipedia.
Edited October 9, 2020: Grammar fix and deletion of obsolete canonical URL.
