Principles of Progressive Enhancement

What Progressive Enhancement Is Not

To understand what Progressive Enhancement is, it may be easier to start with what it is not. You may have heard the terms “Progressive Enhancement” and “Graceful Degradation” in respect to web design and front-end website development, but they are not the same things. In fact, they are two solutions that endeavour to solve the same problem from opposite directions. Graceful Degradation was brought over to website design and development from the world of software development. In short, it is the practice of building a website for the most current, state-of-the-art browsers, while ensuring that it still performs its basic functions in older, less advanced browsers; therefore, degrading gracefully. You may be wondering, “what’s wrong with that?” It sounds like a great idea, doesn’t it? After all, you are thinking of the users whose technology is a bit behind and that’s pretty thoughtful! The answer is, there is nothing wrong with it…per se. There’s just a better way to do it, and it’s called Progressive Enhancement.

So, what is Progressive Enhancement then?

Way back in 2003, Steven Champeon coined the term and introduced the concept to designers at SXSW. Unlike its predecessor (Graceful Degradation), Progressive Enhancement focuses on user experience by creating content centered webpages for the least advanced browsers, building style and interactivity upon them, layer by layer, for the benefit of more advanced browsers. This ensures functionality, even in older and less advanced browsers that don’t support as many features. As you can see, the strategies are reversed. You’re starting out with a site that will be accessible and functional in even the lowest common denominator browsers, then in final stages of development, adding more features for the browsers that can handle the technology. In other words, Graceful Degradation concerns itself with the technology first, and Progressive Enhancement brings the focus back to the user. If content is king (and it always is), Progressive Enhancement just makes more sense because it builds style (or presentation) and interactivity (or behavior) around a firm foundation of content, which is the entire reason people visit websites in the first place.

Principles of Progressive Enhancement – Gotta Keep ‘Em Separated!

HTML (Hypertext Markup Language): Content = Foundation

CSS (Cascading Style Sheet): Style = Presentation

JavaScript: Behavior = Interactivity

The goal of Progressive Enhancement is building a website, layer by layer, to provide the best possible user experience. You do this by creating separate files for your HTML, CSS, and JavaScript, then simply linking your CSS file to the <head> tag of your HTML document:

<head>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

</head>

And linking your JavaScript file to the very bottom of the <body> tag (preferably below the rest of your content):

<body>

<!– Content above, JavaScript below –>

<script type=”text/javascript” src=”script.js”></script>

</body>

The first layer of Progressive Enhancement is a solid foundation of HTML that structures your content and allows you to layer your presentation (style) and behavior (interactivity) on top. Utilizing this technique gives you the ability to build a highly functional website across a wide variety of web browsers and devices. The second layer is CSS and it creates the layout, style, and overall presentation of your website. It’s what enables you to display your content in a visually pleasing manner. The third layer adds behavior and interactivity to your site with JavaScript, and can make it a lot of fun for users to visit! See? It’s a pretty simple concept when you break it down. Make it functional first, then add all of the bells and whistles.

This enables you to write very clean, syntactically correct code. Keeping them in separate files not only helps you keep the languages straight in your mind, but also allows for faster loading, as browsers don’t have to parse through and read three different languages in the same file to render the page. It’s just a more logical, organized way to build a website. It also makes it easier to add the layers necessary to create style and interactivity. See how this puts the content at the forefront of the design, making the user the main focus? This is how it should be. Without content and users, what’s the point of having a website in the first place?

You can’t go wrong when you plan your website if content and user experience are always your priorities. After all, why do you have a website in the first place? To display your content; be it information, a service, or a product. Who do you want to visit your site? Targeted users. Why do they visit your site? The content. What will keep them on your website? The design. What keeps them coming back for more, aside from fresh content? The interactivity! Look at your CSS and JavaScript layers as what sets your content apart from other similar websites, and you will never go wrong!

By: Danielle Dandridge