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. Figure: shows the different layers of Web design.
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 would not have to waste the bandwidth to
download all that code that they won't be using. So it addresses performance issues as well.
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.
EmoticonEmoticon