JavaScript & progressive enhancement

Using CSS to style HTML pages allows us to separate structure (the content) from presentation. Separating structure from presentation reduces page loading times, improves search engine ranking and increases a websites' reach. It also ensures a website is more easily maintained and will ultimately save you time and money.

More recently emerging JavaScript techniques such as 'progressive enhancement', 'Unobtrusive JavaScript' and 'graceful degradation' have added a third layer, the behavioural layer.

The behavioural layer

The behavioral layer is created by placing all Javascript in an external file. The JavaScript is then applied using the DOM. Methods such as getElementsByTagName() allow us attach the JavaScript based on rules set in the external JavaScript file rather than entering JavaScript inline.

Advantages of creating a behavioral layer are as follows:

  • The JavaScript is more maintainable
  • Debugging is simpler

What is JavaScript?

JavaScript has been with us since December 1995 when it was first deployed by the Netscape browser version 2.0b3 (for those who like detail!). It's both a client-side and server-side scripting language.

JavaScript is more commonly and for the purposes of this article a client-side scripting language. It can be used to validate forms, open new browser windows and swap images amongst other things.

Old web technologies

Unfortunately web designers have had a tendency to misuse JavaScript. The additional functionality JavaScript affords developers has often led to websites becoming unusable. JavaScript functionality that could hinder the user experience includes:

  • Pop-up windows
  • Disabling the right mouse button
  • Disabling the back button
  • Scrolling special effects

This was also compounded by the fact that cross-browser support was unreliable at best.

JavaScript is now an established scripting language and browser support is relatively consistent. The hot topic at the moment is called progressive enhancement. This is the technique of using JavaScript to enhance the user experience.

What is progressive enhancement?

Progressively enhancing your site using JavaScript means you should:

  • Ensure a site is functional even if users don't have JavaScript available
  • Only use JavaScript to add new layers of enhanced functionality

Let's use a real world example to illustrate how JavaScript can be used to progressively enhance a site.

Using JavaScript to validate a feedback form.

Initially, as with all forms, validation rules must be applied server-side. If you rely on client-side validation and the client-side script is unavailable you may:

  • Receive poorly formatted data
  • Receive unusable data
  • Be exposed to security breaches

The second step is where we use JavaScript to progressively enhance the form. The form will therefore be validated with client-side JavaScript. Validating the form client side intercepts the form submission client-side and stops users from having to wait for the page to reload if it's been filled out incorrectly.

Extra effort creating a JavaScript behavioral layer means the form can be made more usable. Intercepting the form before it is submitted means the user's experience is improved but without JavaScript available the form is still fully functional.

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

What are you working on?

  • End-to-end customer experience

    Join up your customer touchpoints to deliver the best possible digital experience that is proven to deliver outstanding business results

  • Customer loyalty & retention

    Ensure your brand promises are delivered through your digital channels so that your customers return and bring others with them

  • User experience of digital touchpoints

    Make sure all your customer touchpoints consistently deliver the very best in user experience, design and usability.

  • Online sales & conversion optimisation

    Increase conversion across all your digital channels. Our clients sell more because they reap the benefits of our sales optimisation expertise.

  • Digital strategy

    Get ahead of the competition with a customer-centred digital strategy designed to deliver long-term business success.

  • Application & product design

    Deliver the best experience for your customers with intelligent digital applications tailored to your business goals and customer needs.

  • Mobile & tablet strategy

    Improve your mobile & tablet propositions with innovative, cutting-edge interface designs that work for you and your customers.

Webcredible turns 10

Happy Birthday to us

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320

 

Skip to site navigation