All About Progressive Enhancement

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.

Progressive Enhancement (PE)

Also known as “Layered Semantic MarkUp” is a technique in web development where the content is loaded in different layers so that if a layer fails to be accessed by someone the content is provided by the next layer. This new strategy is considered to replace the traditional way of loading content on a website which is known as “Graceful Degradation” where the designers used to create web pages for the latest browsers that would also work well in older versions of browser software. The problem with Graceful Degradation was that it was supposed to allow the page to remain presentable even if certain technologies assumed by the design were not present.

browser wars

The idea behind progressive enhancement is to replace the older version and to provide the end users with a facility to upgrade directly. Whereas PE provides you with browsing devices which are capable in extra functionality and where visual improvements are needed. Graceful degradation attempts to improve accessibility without reducing user friendliness, while Progressive Enhancement enhances the user friendliness without reducing the accessibility. This article will provide you with a guideline on how to use Progressive Enhancement while building your website:

Benefits Of PE:

As the sites built with progressive enhancement can be easily incorporated in mobile version therefore, mobile browsers are most likely to benefit from it. Mobile browsers which don’t support CSS or Javascript, they can also display the content for your site.

As you know a web developer is unaware whether the visitor’s browser supports images, colors, scripts or CSS, therefore, while using PE the upper layers are not required in order to have access to the content on the site.

The light MarkUp principle makes it easier for tools that read content aloud to find that content.
As the basic content is always available for search engine optimizers, pages built with PE methods avoid problems that may hinder search engine indexing.

The visitors are always able to see your content in progressive enhancement as its main focus is on presentation of content and then on scripting.

Focus Should Be On Content

browser wars

Whatever your goals are regarding your website but one thing which should always be remembered is that content and its structure should be given the primary importance. With a well structured, HTML semantic content you can have a good time when you start designing your website. A preplanned HTML allows you to make your content’s accessibility to various SEO and mobile browsers.

To start with the header is always considered good make a main navigation which should follow your content and then if you want, you can give some additional information or links followed by footer information.

It’s Time For Presentation

time for presentation

Once you are finished with your content structure, the next task is presentation. There are several browsers including the mobile browsers which also support CSS. Therefore, your focus should be to enhance the level of content and to make it easier and accessible for your users. However, you can also use more than one layer of CSS enhancement but make sure that your style matches modern browsers. Include your typography, color scheme and other layouts within this layer and try to add another layer above it which can take advantage of more advanced properties that might not be supported by every browser but will surely add to user’s experience regarding browsers which include support.


As we all know that Javascript plays a crucial role in making a website a delightful experience for your users. With the advent of Ajax the whole online industry has got a new way to define its tasks. But it is very important that your website should be able to run without Javascript. For this, try to provide HTML or server-side scripting alternatives. However, most of the web users have Javascript enabled in their browsers but there are still some mobile browsers who do not have a good support for Javascript.

How to implement it?

implement it

You can find the strategies on how to successfully implement Progressive Enhancement and give your website a much needed important thing, “content”.

Try to start with the lowest common denominator as your baseline.

Make a perfect design for semantics and structure of content.

Add only those features which are suitable for your baseline devices.

Add layout MarkUp and stylesheets for structural layout.

Add all scripts, CSS and hover etc.

Define style for modern graphical browsers.

After your CSS is coded and tested, try to add any client side scripting and make sure that your site is able to function without Javascript. Make sure to test your site and that too without the scripting, just to make sure that it functions properly as you expected.

Serving Your Clients


It is easy to implement Progressive Enhancement when you are doing it for your personal site, but when it comes to deal with clients, it may turn out to be little awkward. Try to convince your clients by telling them the benefits of progressive enhancement that it is fast and cost effective as well and their visitors will be able to access it as far as the content is available.

Modifying Progressively Enhanced Sites


Until here you were told; how to develop a new website by using progressive enhancement, but what if you want to modify a existing PE website. First of all it should be clear to you that if you want to modify a website; it can be modified up to a limited extent. As it will be costly also, therefore, it is advisable to rebuild the site from the scratch instead of wasting your time and money in modifying it.

Naming Conventions


This is another important process to be considered that when you start naming the IDs and classes for your content, use names which can describe the purpose of the content and should focus on the need of the role which it will play in your website. Naming the content according to its purpose provides a logically described hook for applying both safe and enhanced styles. You can also change the visual designs within a single development cycle.

Sharing is Caring
  • PixelCrayons

    Thanks a lot for making us a part of your blog!

    • SloDive

      You deserve it buddy. Thanks for you constant support.

  • Dale

    This site could use a few more ads. I didn’t have to scroll down far enough before I got to the actual article.

  • Sinbad Konick

    That’s a great article on progressive enhancement Jenny @Warner you done a fabulous job…

  • Jai

    Well discussed topic here. Thanks for sharing this insightful post. ^^

  • Satya Thakur

    With the advent of many browsers in the recent years, its been very difficult for the web designers to make a website which works perfect with all of them. Hence progressive enhancements is now a necessity.