Progressive Enhancement

To learn more about JavaScript techniques, you can take the JavaScript class

Progressive enhancement is the fundamental base for all front-end development. At its most basic level, it is creating a functional separation between HTML, CSS, and JavaScript.

Progressive enhancement is a layered approach to Web design, where focus is put on content, the user, and accessibility. The first step is keeping your HTML, CSS, and JavaScript separated, but we don’t refer to them as HTML, CSS, and JavaScript. We refer to these three “layers” as structure, presentation, and behavior, probably so the methodology can be accurately applied to other areas beyond the current state of Web design.

Regardless, it is a bottom-up or inside-out building model for a website or application.

You first focus on the content and mark it up with semantic and meaningful HTML. This is the first layer, “structure.” After the content is properly marked up, we can move onto layer two, “presentation.” On the presentation layer, we deal with CSS. The third layer of progressive enhancement, “behavior,” we deal with last.

3_layers

The interesting thing about having these three layers is that they are never intended to touch each other, yet they’re all integrated—as you move up the ladder, the next layer is dependent on the previous. JavaScript needs CSS, and CSS needs HTML. This ordering is set up so you can remove each layer from top to bottom and you never lose the most important aspect of your site: the content.
As long as you keep your layers separate, make your site work with only HTML, pretty it up with CSS, and then smooth out the behavior with JavaScript, you will make sure that your content is always accessible.

Purpose

The purpose of progressive enhancement is to put the importance on content, which makes perfect sense; it’s why people visit your site. Although the main focus is on content, it also takes technology into account. Suppose you’re building a site with progressive enhancement and beautiful JavaScript animations, and users visit your site with JavaScript turned off in their browser. They won’t see any of the JavaScript enhancements you added in with such care, but it shouldn’t matter because you can always peel back the layers and effectively get to the content.

Keeping your layers in separate files will also guarantee that if users were to visit without JavaScript, because it’s in an external file, the users wouldn’t have to waste the bandwidth to download all that code that they won’t be using. So it addresses performance issues as well.

Accessibility

Putting so much emphasis on content makes sure that your content is always accessible, no matter what. When you hear the term accessibility , you probably jump right to thinking about disabled users, and you would be right to assume that, but there is more to it than that. Maybe there’s a slow connection or tight bandwidth, but 9 out of 10 times the content will still be able to render because it will be meaningful and lightweight by not being bogged down with
other layers.

Keeping your HTML clean, meaningful, and semantic will ensure that your content is easily consumable by everything from a constricted bandwidth to a disabled user accessing your site through screen reading software.

Reusability

Keeping all your layers separated raises the reusability factor of your code. You will be able to not only use the same code over and over throughout the same site, but as you move forward in your design career, you’ll be able to reuse code from past projects. If the layer were not separated, a specific line of JavaScript or CSS would be very difficult to locate in a project and reused somewhere else, unless the development conditions were exactly the same—and they never are.

Structure Layer

Everything has meaning and nothing has design.

The first step in progressive enhancement is to lay the content out, structured in a meaningful way with HTML. Headings are marked up as headings creating a hierarchical flow, paragraphs are wrapped in <p> ’s, lists are marked up as lists, and we make sure that the HTML is meaningful without communicating anything about the design.

Presentation Layer

All content must be reachable without CSS.

After your document is laid out in a meaningful structure, you can start accessing that structure with CSS and applying the design. This can be the most important layer in progressive enhancement because of how flexible it is. Knowing CSS will help you write better JavaScript. For performance, you can’t beat the rendering speed of CSS, especially when compared to that of JavaScript, which is notoriously slow to render in a browser.

Knowing all the capabilities of CSS and understanding the separation between presentation and behavior will allow you to offload a lot of heavy JavaScript functions to its more efficient relative, CSS.

Behavior Layer

Everything must be fully functional without JavaScript.

In many cases, JavaScript is nothing more than a luxury. You use it to smooth out interactions, make Ajax calls, slide elements around a page, and modify HTML. It really is another layer in progressive enhancement because by the time you make it to the third layer, your site or application should be fully functional. It needs to work completely before you start layering on the behavior and how you want it to act.

Building for the Future

Adding features to a website or changing the design of a site that has already been built with progressive enhancement can be as easy as cracking open the appropriate layer, making your enhancements and getting out of there. It also helps working on a team where one person can work on the JavaScript while another is playing with the CSS and design. Team members can work independently and ensure that all the work fits together in the end.

Leave a Reply

Your email address will not be published. Required fields are marked *