Designing a website for both javascript script support and not support

Question

Okay i know that it's important for your website to work fine with javascript disabled.

In my opinion one way to start thinking about how to design such websites is to detect javascript at the homepage and if it's not enabled redirect to another version of website that does not javascript code and works with pure html (like gmail)

Another method that i have in mind is that for example think of a X (close button) on a dialog box on a webpage. What if pressing the X without any javascript interference lead to sending a request to the server and in the server side we hide that dialog next time we are rendering the page, And also we bind a javascript function to onclick of the link and in case of the javascript enabled it will hide the dialog instantly.

What do you think of this? How would you design a website to support both?

Answer 1

One way to deal with this is to :

• First, create the site, without any javascript
• Then, when every works, add javascript enhancements where suitable

This way, if JS is disabled, the "first" version of the site still works.

You can do exactly the same with CSS, naturally -- there is even one "CSS Naked Day" each day, showing what websites look like without CSS ^^

One example ?

• You have a standard HTML form, that POSTs data to your server when submitted, and the re-creation of the page by the server displays a message like "thanks for subscriving"
• You then add some JS + Ajax stuff : instead of reloading the whole page while submitting the form, you do an Ajax request, that only send the data ; and, in return, it displays "thanks for subscribing" without reloading the page

In this case, if javascript is disabled, the first "standard" way of doing things still works.

This is (part of) what is called Progressive enhancement

Answer 2

The usual method is what's called progressive enhancement.

Basically you take a simple HTML website, with regular forms.
The next enhancement is CSS - you make it look good.
Then you can enhance it further with Javascript - you can add or remove elements, add effects and so on.

The basic HTML is always there for old browsers (or those with script blockers, for example).

For example a form to post a comment might look like this:

<form action="post-comment.php" method="post" id="myForm">
<input type="text" name="comment">
</form>

Then you can enhance it with javascript to make it AJAXy

$('#myForm').submit(...);

Ideally the AJAX callback should use the same code as post-comment.php - either by calling the same file or via include, then you don't have to duplicate code.