How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement
On Stack Overflow last week, JamHam asked how to apply progressive enhancement in interfaces that seem to require JavaScript. Unfortunately he deleted the question before I could post my response, so I thought I would post it all here for posterity.
I’ve been trying to make my site (a content publishing “web app”) work fully without JavaScript, however, I’ve found myself in situations where I can’t honestly think how I would do some features without it.
For instance:
- I have a form submission page where you change certain settings, and the form changes accordingly.This is alright, I can apply query strings in the url and have some logic in my layout so that certain fields are shown/hidden according to the query string. The thing is, I also need to update a “price” dynamically, according to what fields are filled in, how they are filled in, and some other factors, and I don’t honestly see how I could do that without JavaScript.
- I have a messaging section where I’m using WebSockets (with the help of Socket.io). The UI of the messaging (and of course, the WebSockets) stuff pretty much depends on JavaScript, with ‘messages’ being created as they arrive and appended into DOM and also a form that allows you to quickly look up an user via AJAX so you can send a message easily, among many other things.
I mean, I could probably come up with very complicated solutions for each situation, and obviously the functionality wouldn’t be the same. I’m thinking I might as well just require JavaScript for the whole thing
But it kinda sucks, since I’ve been making everything work without JavaScript, up until this point. And I would like some consistency across the whole site. In these kind of situations, is it acceptable to not support non-js clients? What would you suggest in this case?
My response (which I was drafting when he deleted the question):
First off, I applaud your interest in using progressive enhancement. It will ensure the most users possible have access to your content and will also result in a more robust application overall. As a general guiding principle, look to the past. How did we solve these issues before widespread JavaScript availability? Those “Web 1.0” solutions will still work and can be overtaken by supplanted by your JavaScript solution whenever it is possible to do so.
Every situation is different, but it is even possible to reuse a lot of code in both scenarios.
Now to address your interfaces…
Your Submission Page - I could be wrong, but this sounds like a shopping cart to me (at least in essence). You are on the right track with query parameters, but you could also store info about the cart (and the user’s capabilities) in a session or cookie.
In terms of updating the “cart”, a simple “update” submit button that posts the form and triggers a redirection back to this page with the updated info would be sufficient. And if you need to show or hide fields based on choices made, you simply apply that logic on the server side. You could even have the server generate that same markup into the page, but hidden for situations where JavaScript is available.
Your Messaging App - This can seem like a daunting challenge, but before we had web sockets and even Ajax, we relied on a small form which posts messages to the back end and a running feed of messages being sent from the back-end. One of the most common way to handle this involved frames and a “meta refresh” like this one:
<meta http-equiv="refresh" content="30">
That simple
metatag will make any browser refresh the page every 30 seconds. Now if you put that in aniframeto keep it from causing a refresh of the entire interface, any new messages would be picked up and displayed automatically at that interval (which you should tune to be appropriate for your app).
Once that is in place the page itself could even post to that frame by using the non-standard but well-supported
_targetattribute on theform.
Obviously with JavaScript enabled, you’d probably throw away that
iframe, but the rest of the setup (including the templates for displaying the messages) could certainly be reused with WebSockets.
I hope this helps. Progressive enhancement may seem like a huge challenge, but when you take a few moments to think about how we handled these challenges in the past, the way forward becomes clear.
Webmentions
@AaronGustafson Yeah, I’be actually read this before (& now again). Continuous thread tasks like audio is what I meant.
@AaronGustafson The easiest thing to do seemingly w/ such tasks is for them to be only available when JS is enabled…
How to Apply Progressive Enhancement When JavaScript Seems Like a Requirement aaron-gustafson.com/notebook/how-t… by @AaronGustafson
Best Practices for Progressive Enhancement in Web Design<p>The craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to lessen the complexity, and reduce the potential for error at each stage of the creation process.</p>
Progressive enhancement is such an idea in web design that aims to reduce errors and provide a consistent user experience across the board. The concept has its own Wikipedia page which explains it as a method of fully-accessible content, rendering enhanced features only when supported by the browser.
It’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d like to cover some best practices for progressive enhancement in real-world projects to help designers think more sustainably about their workflow.
1. Understanding Progressive Enhancement
The theory of progressive enhancement recommends to start with a simple website that works in all browsers, making it accessible for every visitor. Then add features whenever possible.
This is the opposite of graceful degradation which includes all features by default, then degrades when something doesn’t work.
Progressive enhancement is better for the overall user experience, because at its core it loads only necessary elements. Every web browser can support text (and usually images). Without any CSS this information will look bland and tasteless, but it’ll be accessible.
This List Apart article argues that progressive enhancement is content-first with styles and dynamic components added later. Content in semantic HTML should be delivered before anything else.
The advanced CSS and JavaScript we use today are widely supported, but if we want to follow the principles of progressive enhancement, they should be considered luxuries.
Here’s a general rundown of the main features of progressive enhancement, that you should take into account:
Technological restraints in front-end development are primarily determined by browser compatibility. Progressive enhancement gets you back to the basics thinking about how the bare-bone simplest webpage might look like. From there, you can plan for more advanced features, like CSS3 properties.
But what about browsers that don’t support modern CSS3? This is where sites like Can I Use come into play. You should decide which features are worth implementing, and make judgements based on the target audience of your website.
2. Subsistence In Stylesheets
Most browsers today support all the basic properties you need. But advanced CSS3 is still a problem for legacy users, and progressive enhancement offers a solution.
Instead of looking for fallback methods to maintain these new features, concern yourself first with proper layout structures.
Write semantic HTML and CSS markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary).
.fixed), and a fluid content area (.fluid). If you delete all CSS, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last.</p>.fluid) appear first in the HTML. This is where progressive enhancement comes into play, and alternate CSS solutions become viable.</p>The two primary goals of your HTML are as follows:
The most straightforward way to achieve these goals is to start from nothing and work up, as most progressive enhancement advocates would recommend it.
If your code looks good with CSS both disabled and enabled, then it offers a reasonable solution for everyone.
It’s also worth considering at what point you drop support for something. Microsoft has already dropped major support for IE6 , so users running that browser may not be worth your time.
But there’s still one big question: if a browser doesn’t support my modern CSS, what should I do?
You simply write code that works without it, and consider the modern CSS as a progressive enhancement. This is the beauty of the progressive enhancement methodology.
You don’t need fallbacks, because you’re basically assuming that nothing is supported by default.
Progressive enhancement methods are about making the site usable even in cases when something isn’t supported—but if it is supported, all the better.
You need to consider how content actually flows without CSS. For example, when I disable CSS on Transmit’s website, the content still flows organically down the page.
3. Handling JavaScript
It’s worth mentioning that each JavaScript issue you may bump into during the development process is tricky and unique. When you build a new project with progressive enhancement, you should list all your required JS-based features, and consider how they could operate without JavaScript.
This will require lots of online research to find valid solutions. Aaron Gustafson wrote a great blog post with solutions to various problems, like replacing Ajax with a meta refresh for content inside an iframe.
Also, when you create JavaScript tabs, it’s a good idea to use anchor links with real ID values. That way, when JavaScript is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on A List Apart that covers a more general overview of how you should think about these problems.
Here’s another example. Let’s say you have a link that loads content dynamically. The
hrefvalue is empty, because everything loads via JavaScript with the preventDefault() method.Instead, it would be wise to set the
hrefproperty to point to a different page where the content could load naturally, but the visitor only sees that page when JavaScript is disabled.Progressive enhancement is about more than JavaScript, but with web development advancing further every year, there’s no doubt that JavaScript plays a significant role.
Operate under the assumption that everything has been disabled, and scale up from there. This might include problems with embedded widgets that are out of your control, the
tagis a viable solution here.Also think about JavaScript features that lack comprehensive browser support. This includes the fetch API, the push API, the arrow function syntax, or even browsers without support for modern libraries like jQuery.
Every feature requires individual testing with an individual solution.
The essence of progressively enhanced JavaScript is to build content that functions without any scripting. This may lead to a rudimentary user experience, but that’s okay as long as the website is usable, and the content is accessible.
If you want to do live testing, you can typically disable CSS and JavaScript in every major browser to see how your website performs. It’s also worth considering using extensions like A-Tester for WCAG compliance.
JavaScript with progressive enhancement is a huge topic. Here are some posts to help you dig deeper:
Where Progressive Enhancement Falls Short
Although progressive enhancement is a brilliant idea for almost every type of modern website, it simply may not be applicable to projects that aim to push the limits of web technology.
For example, this methodology is not a good solution for web applications that function solely on Ajax calls. Is that a good choice for accessibility? No, of course not. But if that were the case most of Codrops’ tutorials wouldn’t even exist. You have to remember the target audience.
A business website probably doesn’t have the audience that cares about flashy new CSS3 perspective properties, but web developers can be the perfect audience for such advanced features.
Progressive enhancement only falls short for web applications that simply don’t care about going back in time. I realize these web applications are few and far between, but developers love progress, and in some cases it can be sensible to forge ahead with new tech leaving the stragglers behind.
I am a proponent of progressive enhancement (or even graceful degradation, your choice) for general web projects. But I also realize it’s not the perfect solution for everything. In fact, there is no perfect solution. It all boils down to audience needs and project goals.
Further Reading
If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s much easier than it seems at first glance, and it all starts with the fundamentals. Most topics surrounding progressive enhancement just require practice and testing. Try out the suggestions from this article, and see what works best for your workflow.
If you want to learn more about progressive enhancement, check out these related posts:
The craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to lessen the complexity, andreduce the potential for error at each stage of the creation process.
Progressive enhancement is such an idea in web design that aims to reduce errors and provide a consistent user experience across the board. The concept has its own Wikipedia page which explains it as a method of fully-accessible content, rendering enhanced features only when supported by the browser.
It’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d like to cover some best practices for progressive enhancement in real-world projects to help designers think more sustainably about their workflow.
1. Understanding Progressive Enhancement
The theory of progressive enhancement recommends to start with a simple website that works in all browsers, making it accessible for every visitor. Then add features whenever possible.
This is the opposite of graceful degradation which includes all features by default, then degrades when something doesn’t work.
Progressive enhancement is better for the overall user experience, because at its core it loads only necessary elements. Every web browser can support text (and usually images). Without any CSS this information will look bland and tasteless, but it’ll be accessible.
This List Apart article argues that progressive enhancement is content-first withstyles and dynamic components added later. Content in semantic HTML should be delivered before anything else.
The advanced CSS and JavaScript we use today are widely supported, but if we want to follow the principles of progressive enhancement, they should be considered luxuries.
Here’s a general rundown of the main features of progressive enhancement, that you should take into account:
Technological restraints in front-end development are primarily determined by browser compatibility. Progressive enhancement gets you back to the basics thinking about how the bare-bone simplest webpage might look like. From there, you can plan for more advanced features, like CSS3 properties.
But what about browsers that don’t support modern CSS3? This is where sites like Can I Use come into play. You should decide which features are worth implementing, and make judgements based on the target audience of your website.
2. Subsistence In Stylesheets
Most browsers today support all the basic properties you need. But advanced CSS3 is still a problem for legacy users, and progressive enhancement offers a solution.
Instead of looking for fallback methods to maintain these new features, concern yourself first with proper layout structures.
Write semantic HTML and CSS markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary).
Take for example this JSFiddle that uses floats with two sidebars (
.fixed), and a fluid content area (.fluid). If you delete all CSS, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last.Some developers would prefer to have the content column (
.fluid) appear first in the HTML. This is where progressive enhancement comes into play, andalternate CSS solutions become viable.The two primary goals of your HTML are as follows:
The most straightforward way to achieve these goals is to start from nothingand work up, as most progressive enhancement advocates would recommend it.
If your code looks good with CSS both disabled and enabled, then it offers a reasonable solution for everyone.
It’s also worth considering at what point you drop support for something. Microsoft has already dropped major support for IE6 , so users running that browser may not be worth your time.
But there’s still one big question: if a browser doesn’t support my modern CSS, what should I do?
You simply write code that works without it, and consider the modern CSS as a progressive enhancement. This is the beauty of the progressive enhancement methodology.
You don’t need fallbacks, because you’re basically assuming that nothing is supported by default.
Progressive enhancement methods are about making the site usable even in cases when something isn’t supported—but if it is supported, all the better.
You need to consider how content actually flows without CSS. For example, when I disable CSS on Transmit’s website, the content still flows organically down the page.
Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… but it works.
3. Handling JavaScript
It’s worth mentioning that each JavaScript issue you may bump into during the development process is tricky and unique. When you build a new project with progressive enhancement, you should list all your required JS-based features, and consider how they could operate without JavaScript.
This will require lots of online research to find valid solutions. Aaron Gustafson wrote a great blog post with solutions to various problems, like replacing Ajax with a meta refresh for content inside an iframe.
Also, when you create JavaScript tabs, it’s a good idea to use anchor links with real ID values. That way, when JavaScript is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on A List Apartthat covers a more general overview of how you should think about these problems.
Here’s another example. Let’s say you have a link that loads content dynamically. The
hrefvalue is empty, because everything loads via JavaScript with thepreventDefault() method.Instead, it would be wise to set the
hrefproperty to point to a different pagewhere the content could load naturally, but the visitor only sees that page when JavaScript is disabled.Progressive enhancement is about more than JavaScript, but with web development advancing further every year, there’s no doubt that JavaScript plays a significant role.
Operate under the assumption that everything has been disabled, and scale up from there. This might include problems with embedded widgets that are out of your control, the
<noscript> tagis a viable solution here.Also think about JavaScript features that lack comprehensive browser support. This includes the fetch API, the push API, the arrow function syntax, or even browsers without support for modern libraries like jQuery.
Every feature requires individual testing with an individual solution.
The essence of progressively enhanced JavaScript is to build content that functions without any scripting. This may lead to a rudimentary user experience, but that’s okay as long as the website is usable, and the content is accessible.
If you want to do live testing, you can typically disable CSS and JavaScript in every major browser to see how your website performs. It’s also worth considering using extensions like A-Tester for WCAG compliance.
JavaScript with progressive enhancement is a huge topic. Here are some posts to help you dig deeper:
Where Progressive Enhancement Falls Short
Although progressive enhancement is a brilliant idea for almost every type of modern website, it simply may not be applicable to projects that aim to push the limits of web technology.
For example, this methodology is not a good solution for web applications that function solely on Ajax calls. Is that a good choice for accessibility? No, of course not. But if that were the case most of Codrops’ tutorials wouldn’t even exist. You have to remember the target audience.
A business website probably doesn’t have the audience that cares about flashy new CSS3 perspective properties, but web developers can be the perfect audience for such advanced features.
Progressive enhancement only falls short for web applications that simply don’t care about going back in time. I realize these web applications are few and far between, but developers love progress, and in some cases it can be sensible to forge ahead with new tech leaving the stragglers behind.
I am a proponent of progressive enhancement (or even graceful degradation, your choice) for general web projects. But I also realize it’s not the perfect solution for everything. In fact, there is no perfect solution. It all boils down to audience needs and project goals.
Further Reading
If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s much easier than it seems at first glance, and it all starts with the fundamentals. Most topics surrounding progressive enhancement just require practice and testing. Try out the suggestions from this article, and see what works best for your workflow.Written by Jake Rocheleau
Did you find this article helpful? Don’t forget to drop your feedback in the comments section below. Suggest for you:
☞ Hands on Sketch 3 Training – Website Design
☞ Learning Dynamic Website Design – PHP MySQL and JavaScript
☞ HTML CSS How to Create a Website from Scratch
☞ Build a Responsive Website with HTML5, CSS3 and Bootstrap 4
☞ Build Responsive Website Using HTML5, CSS3, JS And Bootstrap
Share this:
Like this:
Like Loading…
The craft of building websites is incredibly complex with many fast-changing parts. The goal of the web design community is to lessen the complexity, andreduce the potential for error at each stage of the creation process.
Progressive enhancement is such an idea in web design that aims to reduce errors and provide a consistent user experience across the board. The concept has its own Wikipedia page which explains it as a method of fully-accessible content, rendering enhanced features only when supported by the browser.
It’s easy to understand progressive enhancement, but not as easy to apply it directly to your design work. I’d like to cover some best practices for progressive enhancement in real-world projects to help designers think more sustainably about their workflow.
1. Understanding Progressive Enhancement
The theory of progressive enhancement recommends to start with a simple website that works in all browsers, making it accessible for every visitor. Then add features whenever possible.
This is the opposite of graceful degradation which includes all features by default, then degrades when something doesn’t work.
Progressive enhancement is better for the overall user experience, because at its core it loads only necessary elements. Every web browser can support text (and usually images). Without any CSS this information will look bland and tasteless, but it’ll be accessible.
This List Apart article argues that progressive enhancement is content-first withstyles and dynamic components added later. Content in semantic HTML should be delivered before anything else.
The advanced CSS and JavaScript we use today are widely supported, but if we want to follow the principles of progressive enhancement, they should be considered luxuries.
Here’s a general rundown of the main features of progressive enhancement, that you should take into account:
Technological restraints in front-end development are primarily determined by browser compatibility. Progressive enhancement gets you back to the basics thinking about how the bare-bone simplest webpage might look like. From there, you can plan for more advanced features, like CSS3 properties.
But what about browsers that don’t support modern CSS3? This is where sites like Can I Use come into play. You should decide which features are worth implementing, and make judgements based on the target audience of your website.
2. Subsistence In Stylesheets
Most browsers today support all the basic properties you need. But advanced CSS3 is still a problem for legacy users, and progressive enhancement offers a solution.
Instead of looking for fallback methods to maintain these new features, concern yourself first with proper layout structures.
Write semantic HTML and CSS markup that works in as many active browsers as possible (support for ancient browsers like IE5 support isn’t necessary).
Take for example this JSFiddle that uses floats with two sidebars (
.fixed), and a fluid content area (.fluid). If you delete all CSS, and rerun the code you’ll notice everything stacks up nicely with the first column, then second, and finally the last.Some developers would prefer to have the content column (
.fluid) appear first in the HTML. This is where progressive enhancement comes into play, andalternate CSS solutions become viable.The two primary goals of your HTML are as follows:
The most straightforward way to achieve these goals is to start from nothingand work up, as most progressive enhancement advocates would recommend it.
If your code looks good with CSS both disabled and enabled, then it offers a reasonable solution for everyone.
It’s also worth considering at what point you drop support for something. Microsoft has already dropped major support for IE6 , so users running that browser may not be worth your time.
But there’s still one big question: if a browser doesn’t support my modern CSS, what should I do?
You simply write code that works without it, and consider the modern CSS as a progressive enhancement. This is the beauty of the progressive enhancement methodology.
You don’t need fallbacks, because you’re basically assuming that nothing is supported by default.
Progressive enhancement methods are about making the site usable even in cases when something isn’t supported—but if it is supported, all the better.
You need to consider how content actually flows without CSS. For example, when I disable CSS on Transmit’s website, the content still flows organically down the page.
Yes, it’s ugly, and yes, it feels like we’ve lost twenty years of progress… but it works.
3. Handling JavaScript
It’s worth mentioning that each JavaScript issue you may bump into during the development process is tricky and unique. When you build a new project with progressive enhancement, you should list all your required JS-based features, and consider how they could operate without JavaScript.
This will require lots of online research to find valid solutions. Aaron Gustafson wrote a great blog post with solutions to various problems, like replacing Ajax with a meta refresh for content inside an iframe.
Also, when you create JavaScript tabs, it’s a good idea to use anchor links with real ID values. That way, when JavaScript is disabled, you can still have the tabs visible and accessible by anchor value. Aaron wrote another piece on A List Apartthat covers a more general overview of how you should think about these problems.
Here’s another example. Let’s say you have a link that loads content dynamically. The
hrefvalue is empty, because everything loads via JavaScript with thepreventDefault() method.Instead, it would be wise to set the
hrefproperty to point to a different pagewhere the content could load naturally, but the visitor only sees that page when JavaScript is disabled.Progressive enhancement is about more than JavaScript, but with web development advancing further every year, there’s no doubt that JavaScript plays a significant role.
Operate under the assumption that everything has been disabled, and scale up from there. This might include problems with embedded widgets that are out of your control, the
<noscript> tagis a viable solution here.Also think about JavaScript features that lack comprehensive browser support. This includes the fetch API, the push API, the arrow function syntax, or even browsers without support for modern libraries like jQuery.
Every feature requires individual testing with an individual solution.
The essence of progressively enhanced JavaScript is to build content that functions without any scripting. This may lead to a rudimentary user experience, but that’s okay as long as the website is usable, and the content is accessible.
If you want to do live testing, you can typically disable CSS and JavaScript in every major browser to see how your website performs. It’s also worth considering using extensions like A-Tester for WCAG compliance.
JavaScript with progressive enhancement is a huge topic. Here are some posts to help you dig deeper:
Where Progressive Enhancement Falls Short
Although progressive enhancement is a brilliant idea for almost every type of modern website, it simply may not be applicable to projects that aim to push the limits of web technology.
For example, this methodology is not a good solution for web applications that function solely on Ajax calls. Is that a good choice for accessibility? No, of course not. But if that were the case most of Codrops’ tutorials wouldn’t even exist. You have to remember the target audience.
A business website probably doesn’t have the audience that cares about flashy new CSS3 perspective properties, but web developers can be the perfect audience for such advanced features.
Progressive enhancement only falls short for web applications that simply don’t care about going back in time. I realize these web applications are few and far between, but developers love progress, and in some cases it can be sensible to forge ahead with new tech leaving the stragglers behind.
I am a proponent of progressive enhancement (or even graceful degradation, your choice) for general web projects. But I also realize it’s not the perfect solution for everything. In fact, there is no perfect solution. It all boils down to audience needs and project goals.
Further Reading
If you’re constantly building web projects, you should consider applying progressive enhancement to your workflow. It’s much easier than it seems at first glance, and it all starts with the fundamentals. Most topics surrounding progressive enhancement just require practice and testing. Try out the suggestions from this article, and see what works best for your workflow.Written by Jake Rocheleau
Did you find this article helpful? Don’t forget to drop your feedback in the comments section below. Suggest for you:
☞ Hands on Sketch 3 Training – Website Design
☞ CSS3 Introduction web Building Blocks Fundamentals
☞ Web Design For Grandmothers With Html
☞ CSS3 Gradients for Web Designers
☞ Learn Responsive Web Development from Scratch
Share this:
Like this:
Like Loading…
Likes
Shares