“graceful degradation”

Leave a comment

May 18, 2014 by Ozgur Ozden

Common web development technologies we have used so far named as “graceful degradation” Ryan Boudreaux (2012). In this development technique, websites are designed for particular browsers and be able to view these sites user has to “degrade” or “upgrade” their browsers to see the content of the site.
But with many different browsers and platforms like mobile devices, smartphones, tablets, ebook readers developed over the years and accessing the contents of the web by using these devices becomes very important lately. Progressive enhancements (PE) is a solution addresses to this problem. Very basically PE can be defined as dividing the web site structure into different layers with different functionalities. Commonly used layer structure is HTML as first layer and then CSS as second layer and finally client side scripting as third and last layer. There is a logic behind this separation.e
Layer 1 HTML – Markup: This layer holds the content of the site separated from style or interactivity. Strongly coded layer increase the flexibility of the web site.
Layer 2 CSS Styling: This layer is related with the design and browser or platform compatibility of the web site. Look of the web page can be change by modifying this layer. Web site can be viewed by different platforms or handheld devices.
Layer 3 Client-Side Script: This layer is responsible for the interactivity of the web page. Certain programming languages such as JavaScript, Flash or applets can be used in this layer to complete the interactivity.
There are many benefits for using PE and Lars Kappert (2011) explains these as: “Accessibility, Portability, Modularity and Performance.” Let us analyze these benefits one by one.
Improved Accessibility: Impaired people can not read from web site by using screen readers. New or old versions of browsers, mobile and handheld devices can access to site content by this layered system.
Portability: Web sites are not designed or prepared for particular web browsers or platforms. Site will be accessible whatever the device, browser is.
Modularity: Dividing the web site into three parts makes web site easier to develop and maintain. Designers and coders can focus on different parts of the site and this reduces the chance for error. Designers can change the visual appearance of the site by changing few parameters.
Performance: HTML layer which is the layer holds the content loads first then CSS and then the interaction part, this decreases the loading time of the site.
In addition to these benefits Jason Cranford (2011) adds the following benefits of using PE when designing a website.
“Faster to develop.” Using less graphical design and using more code increases the development time. site does not have to be developed and tested for every different platform.
“Cheaper to maintain and modify.” As we have explained before changes can be applied very fast and easily by modifying the CSS layer.
“Improved search.” Strongly typed and coded HTML site will increase the search engine rankings of your site.
As a conclusion, dividing the website into three layer has clear advantages. It does require little bit more work and different areas of expertise but the result is a very well built web site. This should be used as a common technique for developing websites.

1- Lars Kappert (2011) Progressive Enhancement 101: Overview and Best Practices (Online) Available at:http://sixrevisions.com/web-development/progressive-enhancement/ [Accessed at: 24 May 2013]
2- Ryan Boudreaux (2012) Understanding progressive enhancement techniques in web design (Online) Available at http://forumone.com/blogs/post/5-benefits-progressive-enhancement [Accessed at: 24 May 2013]

3- Jason Cranford (2011) 5 Benefits of Progressive Enhancement (Online) Available at http://www.techrepublic.com/blog/webmaster/understanding-progressive-enhancement-techniques-in-web-design/1809 [Accessed at: 24 May 2013]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: