How do I make my UI 'degrade gracefully' with Javascript disabled?

Question

I've read in multiple posts on SO that if users have Javascript disabled, ideally your page should 'degrade gracefully'. I'm not sure in general what types of things should be done to make this happen.

I have a blob of HTML for configuring a 'schedule'. Depending on the value of a select box, different fields are shown.

<select name="schedule.frequency"
    id="schedule.frequency" 
    onChange='updateScheduleFields()' >
        <option value="Manual">Run Manually</option>
        <option value="Monthly">Monthly</option>
        <option value="Weekly">Weekly</option>
        <option value="Daily">Daily</option>
        <option value="Hourly">Hourly</option>
</select>

When the select is updated, I hide the fields that are shown so that things like 'day of the week' or 'days of the month' aren't shown when it's inappropriate. I'm not really sure how to make this degrade gracefully without Javascript, because as stated, some of the fields are just completely inappropriate for various schedule types.

My question is: In general, how would I make something that disables/hides inappropriate fields or does some pre/post processing degrade properly without Javascript?

I'd also be interested in specific sites that I could look at that handle this type of degradation well?

Answer 1

The basic idea is that you have a standard (non-js) way of doing something, and then you add JavaScript to override that default behaviour.

In your case, you have a select, so the non-js behaviour would be that when you select an option, you submit a form which loads a new version of the page with different fields shown.

Your JavaScript (if enabled) will hide the submit button and do the updating in-place.

The preferred way of thinking about it is progressive enhancement, and it's much easier to achieve that way round. Make your page work as barebones HTML, then progressively enhance it with CSS and JavaScript. Then you never have to work out if it will degrade gracefully.

It's easier to do progressive enhancement if your JavaScript and CSS are in separate files rather than inline. With an Ajax library like jQuery*, you can select elements with CSS selectors in order to add behaviour to those elements. In your case, you'd do $('#schedule_frequency').change(updateScheduleFields) (I don't think you should have a period in your id).

* Disclaimer: It is possible to select HTML elements in JavaScript without a library, and Ajax libraries other than jQuery exist.

Answer 2

When you think about sites degrading gracefully, think about how you would use the site without any javascript. Then use javascript and the onload/ready hook to change elements of your site into what you originally wanted with javascript. This way, if javascript is disabled, the site works. If it is enabled, the setup javascript will run and transform the page.

Usually this means having an extra "submit" button that your setup javascript hides or something like that.

Answer 3

What I would do in this case is have a "Next" button below the drop-down list that posts the selection to the server. Then you would need server-side logic to show/hide the fields. I usually would get it working this way first, and then go back and add Javascript flair to hide the button and prevent the round-trip.

Answer 4

I believe the short answer is that you won't be doing those types of things. Run-time modification to the rendered page is achieved via JavaScript - when it is disabled you don't get to use those kinds of effects.

Additionally, you won't be doing pre-post processing without JavaScript. You'll need to implement your checking / testing in the back end.