What happens when javascript is turned off?

Let me begin this thought by stating I am a pessimist. As stated in previous rambling, this is highly important if you an engineer, you need to think about all the horrible things that can go wrong and then come up with contigency plans. The pessimist can be pleasantly surprised, the optimist will often be disappointed.

A fun game I like to play is "What happens when ... ?". This is a great game of testing hypothetical and preparing yourself for when the hypothetical becomes reality. Now I don't recommend this game if you are working in a nuclear power plant or work with life support systems. In those cases, resist the urge to "see what happens when I push this button".

Today's experiment is, "What happens when javascript is turned off?". Javascript has become part of the holy trinity of the web, mixed with HTML and CSS, you can bake yourself a decent website cake. Today we are going to simulate some sort of failure to load, parse or run the javascript of certain websites.

To play this game, we need to turn javascript off in your browser. I am using MacOS Safari for this and this is simply done in Preferences > Security and uncheck the box labelled "Enable JavaScript". But this can be done in just about any browser, for instance in iOS6 Safari, simply go to Settings > Safari and look for the setting "JavaScript".

 The big kids

Let us look at the results of the big kid websites: Google, Apple, Facebook and Twitter and see what results look like.


So we can see, when Javascript is not present, all the big players still layout just fine. With some minor functionality missing for Twitter and Facebook, but they do give you warning.

What not to do

Never rely on Javascript for layout of your website. I cannot emphasis this enough. If you are doing it right, your HTML should be clean, your layout, colouring and typography should be from your CSS and extra behaviour should come from Javascript.

This leads me to LESS. LESS is a means to template CSS using dynamic variables. The variables can be feed server side through Rhino or Node.js, compiled through a command line tool or dynamically set throught Javascript. I have no complaints about the first two options, in fact, the compilation idea is brilliant, but the Javascript client side method is, for lack of a better term, retarded. It is even stated on the site: "For production and especially if performance is important, we recommend pre-compiling using node or one of the many third party tools.". Now that is good advice, a shame the LESS developers didn't use it on their own website but they give me the perfect argument of why you should not rely on Javascript for the look of your website. Let us look at the LESS site before and after turning Javascript off:


Now you might think it a little unfair I choose this particular technology, and it is slightly, they definitely tell you to compile in the real world. But I have seen this used in the real world in the dynamic form all over the place as well a heap of JQuery plugins doing various layouts. It all smells like wrong to me.

Experiment conclusion

I have ranted on this too much, but part of me believes you can't rant on this too much: keep your layout and behaviour separate and never use Javascript as your layout mechanism. Oh ... and never be afraid to try it on your own work, your website should keep working, looking good and smelling like roses when Javascript is turned off.