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
<link rel=”stylesheet” type=”text/css” href=”style.css” />
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?
By: Danielle Dandridge
Pragmatic dreamer & founder of d6Collab; online business strategist, coach, & mentor; web designer & front-end developer; WordPress expert; & hurricane in general, known as elle. I empower YOU to build, grow, & SCALE your business using the simplest, most effective & aligned methods, so you can create the time & financial freedom you need to change the world!