Designing a website for both javascript script support and not support

StackOverflow https://stackoverflow.com/questions/1284899

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?

Was it helpful?

Solution

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

OTHER TIPS

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.

In terms, it is not important to make your site work with JavaScript disabled. People who disable JavaScript are people who want to hack bugs into your site, they don't deserve to navigate it correctly. Don't waste your efforts with them. Everybody know the Web is unsurfable without JavaScript.

The only thing you have to be careful is about your forms: Don't ever trust filters in JavaScript, Always filter it again on server-side, ALWAYS!

Use Progressive Enhancement, study jquery to understand it. It takes some time till you get your head around it. For example your idea:

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

how would you detect if javascript is disabled? not with javascript, obivously...

you're thinking the wrong way round: the most basic version has to be the default version, and then, if you detect more advanced capabilities, you can use them.

Try to avoid separate versions for different bowsers/capabilities for as long as you can. It's so much work to keep all versions in sync and up-do-date.

Some good ressources to get you started:

The best way is to design a page that works adequately without JS. Then add a <script> block at the bottom of the <body> section with code like this:

window.onload = function() {
    // Do DOM manipulations to add JS functionality here.  For instance...
    document.getElementById('someInputField').onchange = function() {
        // Do stuff here that you can't do in HTML, like on-the-fly validation
    }
}

Study the jQuery examples. They show lots of things like this. This is called "unobtrusive JavaScript". Google for that to find more examples.

EDIT: The jQuery version of the above is:

$(document).ready(function() {
    // Do DOM manipulations to add JS functionality here.  For instance...
    $('#someInputField').change(function() {
        // Do stuff here that you can't do in HTML, like on-the-fly validation
   });
});

I added this just to show the lower verbosity of jQuery vs. standard DOM manipulation. There is a minor difference between window.onload and document.ready, discussed in the jQuery docs and tutorials.

What you're aiming for is progressive enhancement. I'd go about this by first designing the site without the JavaScript and, once it works, start adding your JavaScript events via a library such as jQuery so that the behaviour of the site is completely separate from the presentation. This way you can provide a higher level of functionality and polish for those who have JavaScript enabled in their browsers and those who don't.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top