Skip to main content
September 30, 2013

Progressive Enhancement – Focusing on Javascript

Jacob Emerick

More big programming words-

Progressive enhancement is one of those cool phrases that often gets thrown around in (front-end) programming circles these days. It’s a broad term for building applications the ‘smart way’ – a strategy that emphasizes accessibility, semantics and layered technologies. The idea is to build something that everyone can use, regardless of their browser or platform or connection, and then add modern features to the devices that can handle those features.

There’s more than adding functionality at play here, though. Utilizing progressive enhancement methodologies can help prepare for when bad things happen. A great example of this can be seen with Javascript, a front-end language that many websites use for animations, dynamic pieces, validation, analytics and more. A website built with progressive enhancement in mind should degrade gracefully if Javascript fails or is otherwise unable to execute, still allowing the user to engage with the content and perform tasks. Otherwise, the user will be left with a useless page and no reason to stay.

 

So what happens with things fall apart? Here are some examples.

Google Analytics Fail

A huge chunk of websites use Google Analytics to collect visitor information and behavior. This allows them to easily run and view reports on relevant metrics by plopping a simple few lines of code on each page. If there’s a severe error, though, the code may not trigger and the hit won’t count. This probably won’t effect the end user but it may skew business decisions.

Dynamic Content

One feature that a website can implement is dynamic content areas, content loading via AJAX requests after the initial page load. Some examples of this include the infinite scrolling pattern (when more results load when you are at the bottom of the page) and pop-up photo galleries. If this is the only way that the user can access the extra content, and Javascript fails, than the user can’t access the content.

Drop-Down Navigation

To be fair, drop-down navigation can be implemented with CSS-only solutions. However, in order to get some of the more complex interactions and cool animations a developer may opt for a Javascript option. When the script fails, though, there’s a good chance a user will not be able to visit a majority of the pages on the site.

Enhanced Responsive Behavior

There are a few scripts and patterns out there that lean on Javascript to perform responsive-related tasks. These include shiv (for cross-browser HTML5 support), some grid frameworks, and the well-used ‘collapse a menu to an expandable button’ pattern. If there’s an error, though, then all that work for a responsive site may not work and the user will not be able to use the application.

 

So, when would any of this occur? How would Javascript fail? Fairly easily, actually. Most scripts are written so they depend on each other, and any single one of them having an error or failing to load may cause the entire system to fall like a house of cards. If a website uses a Content Delivery Network (CDN) to speed up its performance, the chance of not finding everything increases, since the dependency is spread across multiple points of failure.

The other, most obvious, place where the front-end can be hampered is load time. Mobile users are expecting snappy behavior and are not patient enough to let megabytes of scripts and assets to download. If the page takes too long to load and be ready for interaction the user may leave. Also, of course, some people just do not have Javascript enabled on their device or may not be able to use all the features that modern browsers have.

Progressive enhancement is a valuable strategy to use during the development process, especially if the application should be widely available across many devices. Making sure that the front-end can be accessed and functional for all users, even when errors crop up during the page render, is an important concern to have during the development and planning process of any modern website!

Note … Some great visual examples of progressive enhancement (and failures) can be seen here: http://sighjavascript.tumblr.com/