Progressive Enhancement: An Absolute Steer to Boom in Web Designing

With an increasingly mounting assortment of browsing circumstances and platform, the strategy of progressive enhancement has become a hot topic of discussion to be focused upon. Since long years, web designers have been using “graceful degradation” principles in web design which let them to design for the newest and best browsers without completely alienating those using older browser versions.

But nowadays it has been successfully replaced with the technique of Progressive Enhancement which in contrast to the “graceful degradation”, provides better option and which rather than focusing on browser technologies and support, focuses on content and enables everybody to access the content from every browsers whether obsolete or modern.

Actually, Progressive enhancement is the technique of building websites with strong foundations so that it must be accessible to the wide range of browsing situations ranging from mobile devices and net-books, to desktops and screen-readers. Today, in this post, we are detailing the concepts of Progressive Enhancement including its introduction, its role in web designing, advantages and how to implement it in web designing and so on and so forth. Check this post throughout and find how the strategy of Progressive Enhancement can be useful for your website. Let’s start with the introduction to the Progressive Enhancement.

 

Progressive Enhancement

Introduction to Progressive Enhancement

Progressive enhancement is a strategy for web design which uses web technologies in a layered fashion and emphasizes accessibility, semantic HTML markup, and external style sheet and scripting technologies. It allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection by providing those with better bandwidth, more advanced browser software or more experienced and enhanced version of the page. Progressive enhancement is an innovative technique of designing web pages so that a user agent must support more features and the web page will also have more features. Just opposite to the design strategy “graceful degradation” that builds pages for the most modern browsers first and then converts them to work with less functional browsers.

We are living in the Web dominated world and the existence of web browsers has been around as long as the Web. Being a web developer or designer, have you ever thought that the content of the website which you are developing or designing must also be read by those who are still using old browsers having no advance features as possessed by the modern browsers. It is here where the strategy of Progressive Enhancement becomes handy to use. Progressive enhancement is a strategy of handling web page design for different browsers and allowing everybody to access the basic content of any webpage on any browsers; no matter the browser is modern or old one.

In simple and precise terms, progressive enhancement is the separation of HTML, CSS and JavaScript. Now you must be thinking how? Let us think of these web technologies as being in layers, assuming HTML as the first layer, CSS being the second, and JavaScript and many other client-side technologies that deal with site interactivity, such as Flash or Java applets as being the third layer. It will become clear from the figure given below:

Progressive Enhancement

The strategy of progressive enhancement says that by compartmentalizing these website components, designers or developers can more easily allow their sites to retain the ability to become enhanced depending on the web browser’s capabilities. Now, here one question arises that how would the designers or developers pragmatically carry out progressive enhancement? Let us explore it below.

How would we pragmatically carry out progressive enhancement?

One can pragmatically carry progressive enhancement in the following order as discussed below:

⇒Markup : Start out with semantic and well-structured HTML for flexibility and interoperability.
⇒Styling : Progressively enhance the look-and-feel of a design by adding support for browsers with greater features (e.g. WebKit browsers, IE9, Firefox and mobile browsers).
⇒Behavior : Enhance the site with rich, interactive features on web browsers with JavaScript.

Progressive Enhancement

Benefits of Applying Progressive Enhancement Techniques

As explained above about the technique of pragmatic implementation of progressive enhancement, it should be noted in mind that that pragmatically implementing the separation of the markup, styling, and behavioral layers offers as many benefits in your site projects as you expect. These are some of the benefits of implementing the technique of progressive enhancement:

⇒Accessibility– Content is within reach to all visitors.
⇒Portability– It signify for cross-browser and cross-device support.
⇒Modularity– Having decoupled components with smart boundaries makes site builds easier and more fault-tolerant.
⇒Site Performance– Improvements in terms of (perceived) page loading times (which affects usability) is more readily implemented.

Other Benefits of Progressive Enhancement

As you have gone through the above mentioned benefits of progressive enhancement right now, but you should note that these are not the limits. It is not like that implementing the concept of progressive enhancement gives only the enriched user experience but also beyond this, sites built with progressive enhancement are generally easier to maintain than other sites. Also, since the basic content and functionality is kept completely separate from the visual elements of the page, hence making any changes or modification to the appearance of the site leave no effect on the functionality as well as content of the site. Due to this, re-theming the site becomes much easier; what you need to change is only your CSS files. Also, if you are implementing the concept of Progressive enhancement ion your site building, then it will also help you in raising visitors traffic as it will allow those person too, who are using an outdated or obsolete browser, to view your site’s content.

Who Benefits from Progressive Enhancement?

Generally people have misunderstandings that progressive enhancement can only be beneficial for those users who are using outdated browsers; but this is not true. It’s true that those users using obsolete browsers are benefitted but besides them, other users also get benefit of this. The perfect example of this is the Mobile browsers that are the most likely to take full advantage of progressive enhancement. Mobile browsers don’t support CSS or JavaScript but the use of Progressive Enhancement strategy in your site can still display the content of your site. Also, sites built with progressive enhancement strategy can more easily incorporate a mobile version. Since, the foundation HTML will work regardless of the CSS layered on top of it, mobile browsers doesn’t require a separate style-sheet for itself. The use of Progressive Enhancement also makes your site SEO friendly and hence raises you rankings in the search engines.

Best Practices While Implementing Progressive Enhancement

Unlike graceful degradation, progressive enhancement focuses first on the content rather than focusing on browser compatibility. First of all, it focuses on the content, then on presentation of that content, and then on any scripting and thus, in this way, regardless of the device or browser a visitor is using, they’ll be able to see your content without any issues. By starting out with well-structured, semantic HTML, you’ll be providing a solid foundation on which the design of your site is based upon, just because basic HTML is easily interpreted by screen readers and search engine spiders. Similar to this, while implementing the strategy of progressive enhancement, it is very must necessary to follow some of the best practices which can yield to the best output. We are providing below some of the best practices which you should follow while implementing the Progressive Enhancement. Check these practices as discussed below:

Put Content First

As discussed earlier also, that rather than focusing on the browser’s compatibility, the progressive enhancement mainly focus on sites content. Hence it is advisable that whenever you’re starting a new website project, you should first concentrate on the content structure. It is just because, by creating well-structured, semantic HTML, you are providing a solid foundation to your website, and hence you’ll have an easier time with the presentation level of your design. Also with structured and semantic HTML, screen readers, search engine spiders, and those on basic mobile browsers will be able to view your content without any distracting formatting issues.

Let us make it clear with the help of example http://www.msnbc.msn.com/. When you will go through this site, you will find that this site keeps all their content in roughly the same order even without the use of CSS and is perfectly usable even without the presentation layer.

In order to organize your content in a perfect order, it is suggested to start with the header, then the main navigation, followed by content. After the entire content is placed, one can put any additional sidebar information or links as per desire, and then finally footer information is placed.

Progressive Enhancement

Presentation is next

Once HTML and basic functionality are all set, there comes need to turn to the presentation elements. The vast majority of browsers, including many mobile browsers, support CSS. The presentation level should be such that it must enhance the content and make the content easier to view and use, and must improve the user experience.

To some extent here, you can have more than one layer of CSS enhancement. The presentation layer includes basic styles, layout, typography, and color scheme along with other stylistic choices.

JavaScript Should Be Last

Since, JavaScript greatly contribute to the usability and user experience of a website or web application and hence is an inseparable element for any website. Ajax has revolutionized the way a lot of sites work, but here in this case, especially when you are implementing the strategy of Progressive Enhancement in your web design, you should assume that your website or application should work without JavaScript. Make sure that your site is usable without making any use of JavaScript.

Let us understand with the below presented two screenshots in which one has made use of JavaScript while other has not. As you can see from the screenshots below, there’s no loss in the functionality of the two screenshot, i.e. between the JavaScript-enabled version of the Alfred app website and the one with JavaScript turned off. What the only real difference you will notice is that the Terms & Conditions are anchored at the bottom of the page rather than opening in a modal window when the link is clicked. But in both cases, they’re linked and fully readable.

Progressive Enhancement

This one is the fully-functional version of the site, with the modal window.

Progressive Enhancement

In this version, JavaScript is disabled; the Terms & Conditions seems to appear just above the footer but still linked from the same place in the content. This one is the only difference which you will mark out while comparing the two modals as shown above.

Convincing Your Clients

Although, while working on your own, personal website projects, progressive enhancement is something you can implement without a problem as per your desire; while dealing with your clients, you need to work according to the desires of the clients. Sometimes, most of the clients refuse to use the strategy of Progressive Enhancements in the website projects in lack of awareness just because they are still stuck on the idea that their website needs to appear exactly the same in every browser they have ever used. In that situation you need to have patience and convincing power.

Although, it can be a bit trickier for you, but even then you need to explain the benefits of progressive enhancement to your clients without losing your patience and temper. You have to raise awareness in their mind by telling that that it’s faster and less expensive for them. If they still resist, no worry, you inform them to compensate for the extra coding time and effort required. But in many cases, it is found that when a client sees that progressive enhancement will save them money with no detrimental effect to their visitors, they get ready and become more impressed to you.

Different steps in Implementing Progressive Enhancement

Progressive Enhancement

Till now, we have talked about theoretical approach of Progressive Enhancement. Now, let us see the practical aspects of implementing it on a website project. In this process, the first step is to figure out the information architecture for your site. Carefully, look at the content available and think and decide how it should be organized and according to that, create some wireframes for how you want to show the content, the placement of different elements, etc.

Since information architecture step is one of the vital step integrated with progressive enhancement and hence need extra decisive and cautious. Once you complete the information architecture, you can start coding. You should make sure that you set up your HTML code in the correct and semantic order. Use proper<h1>, <h2>, <h3> tags, etc., as well as properly naming the divs in which your content appears. This is what which will not only make the content accessible, but also makes maintaining your code and coding your CSS a lot easier.

Once your basic HTML is finished, you need to move on to the presentation layer. In the presentation layer, you need to jump in actually coding the CSS. It is where you have to arrange all the graphical elements in an effective manner so as it must leave an excellent graphic experience on the users. All these rely on good, standards-based coding and semantic markup.

Once your CSS is all coded and everything’s been tested, it’s time to add any client-side scripting. At this point, your site should work with or without JavaScript. Although adding JS can greatly improve user experience and satisfaction, here you should assure that your site can work effectively without the use of JavaScript. You try both the modals, i.e. one with JavaScript and other without JavaScript just to test the site and make sure everything without JavaScript can too works acceptably.

Conclusion:

You must have now come to know the advantages of implementing Progressive Enhancement in the web designing. We are sure and certain that this post will acknowledge you a lot regarding the concerned topic and you must make out difference by implementing the strategy of Progressive Enhancement in your forthcoming website development project.

We would like to know your opinion what you think about this post and what you have learnt from this post, how you feel beneficial for your next project. Please leave your comments in the comment section of this blog post.

Progressive Enhancement in Web Design

Please Share Your Comments & Experience with us.

Nola Arney

Nola Arney

Nola J Arney is working as an application and web developer at HTMLPanda. Her core technical skill in web designing, Sencha touch, PhoneGap, and other platforms has contributed a lot of benefits to the business. She has an interest in writing and hence, shehas written numerous blogs & articles that specifically shed a light on website the designing & development technology. All her write-ups have earned a gratitude from the specialists worldwide.
Nola Arney