What is Progressive Enhancement and Why it’s Important

By: Abby Buck

What is Progressive Enhancement?

Progressive Enhancement (PE) is a strategy in web design and development that puts emphasis on web content first. This strategy involves separating the presentation semantics from the content. This is done by focuses on the content of a website first. It then adds “layers”. Think of these web technologies as being in layers, with HTML as the first layer, CSS being the second, and JavaScript being the third. Only after all the content has been implemented then CSS can be added and it has to be on a separate layer. This means when building your websites each layer: HTML, CSS, JavaScript, etc. are all marked up separately in their own documents then linked together in the head of the HTML. It is important to remember to do each layer one at a time. You should not be marking up your HTML and CSS at the same time. 

Let me break down each layer a bit more. The first layer is HTML (Hypertext Markup Language) it’s clean and semantically marked up it allows text-based, speech-based, antiquated, and robotic user-agents to navigate the content of your website properly. The second is the styling layer CSS (Cascading Stylesheets). It is a style sheet language used for describing the presentation of a document written in HTML it also allows visual-based user-agents to display or alter the visual representation of your website’s content. The third layer is focused on the behavior of your site it is accomplished through JavaScript and other client-side technologies that deal with site interactivity, such as Flash or Java applets. This enhances the site with rich, interactive features on web browsers which allows user-agents that are capable of using it to provide your users with enhanced usability.

Why is it important to build Progesively Enhanced Sites?

Pragmatically implementing the separation of the markup, styling, and behavioral layers will give you many advantages in your websites. Some of the advantages include a strong foundation, an accessible site, portability, modularity, and all-around better site performance.

It is essential to have a strong foundation in all sites you create. To have a strong foundation you have to focus on using only the very basic web technologies before presenting some of the very complex features you achieve this by simply building progressively enhanced sites. When PE is implemented you have the foundation to back your complex features to make sure they work.

Accessibility of websites is one of the most significant reasons for the separation of the three layers. Accessibility is about supporting all people who use the web, no matter what browsing technology they use. Pages built with the PE strategy make sure necessary content is always accessible for the search engine spider and is ready to be indexed it also avoids any dynamic content rendering that may hinder the spider crawling your content. Progressive enhancement’s emphasis on layer separation, universal design, and semantic markup allows old browsers, modern browsers, search engine crawlers, and screen readers all access the content; which is the most crucial part of your site if your site is progressively enhanced you know that all will have the capability to use your site.

Portability is another benefit to a PE site. By focusing on the content than adding the next two layers one at a time and separately your website will work across different browsers that are old or new along with different devices such as computer screens and mobile devices.

Modularity is a good advantage of a PE site because it allows several people to work on their specific skill set such as the front end, the design, and also server-side scripting without anything being entangled together. Layer separation also makes a website easier to maintain. If modifications need to be made in the presentational layer, then you can do so without having to deal with the markup and behavioral layer.

PE developed sites will perform overall better than sites that are not progressively enhanced. For example, your site will perform better by loading and executing stylesheets and scripts at the right moment in an HTML document, you can optimize rendering sequence, which in turn makes the web page feel more responsive. For instance, the user should first see the (styled) content. Putting a script (too) early in the HTML document will block the rendering of the content below it until the script is loaded. By decoupling the JavaScript layer from the CSS and HTML layer, we can more easily pick where we load our scripts; for example, we can load it after the stylesheet has been downloaded.

Conclusion

In this line of work things are always changing, accordingly, we need to make sure our websites are progressively enhanced if they are we can use new features that come out and make sure our sites are accessible to everyone who uses them.

Works Cited

• freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/
• http://smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/
• https://www.webfx.com/blog/web-design/progressive-enhancement/
• https://alistapart.com/article/understandingprogressiveenhancement/