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.
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.
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).
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?
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.
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.
This one is the fully-functional version of the site, with the modal window.
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
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.
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.