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 All About Progressive Enhancement
Source

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

content is king All About Progressive Enhancement
Source

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

presentation All About Progressive Enhancement
Source

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.

Javascript

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 All About Progressive Enhancement
Source

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

serving hands All About Progressive Enhancement
Source

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

modifying All About Progressive Enhancement
Source

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

naming All About Progressive Enhancement
Source

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
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment Rules

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i><q cite=""> <strike> <strong>

Kindly use a valid Name and Email address. Spam or unrelated comments will be deleted

If you are a regular commenter, be sure to check our Comment Contest.