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.
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 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
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
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.
How to 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.
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.
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.