30 Dec
Maximize the number of users who can access your content.
History of Progressive Enhancement
Throughout the history of web development, web designers have focused on giving computer users the greatest possible experience that they could receive on the most sophisticated browsers. At the same time, designers only provided some content to users with less sophisticated browsers. Unfortunately, this meant that many users with less expensive technology or with disabilities were not able to access resources that they needed.
Web designers sought to overcome the issue of inaccessible content by designing websites to degrade gracefully. This was a process whereby content was designed to remain meaningful even if the browser was not able to access all the code. For example, browsers that cannot understand and/or display a particular line of HTML code will ignore the code and display content that they can understand. If the code asks for the content to display text with transparency, but the browser cannot support transparency, the browser displays the part of the HTML that is understandable, which is primarily the text.
This phenomenon is known as progressive enhancement and has benefits that extend beyond that of the graceful degradation of page design.
Limitations Inherent in Browsers
Browsers have limitations in the type of content and graphics they can display. Designers often find themselves caught between making a website functional for all users and creating a website that is sophisticated. Users are often accessing websites from multiple browsers and from desktops, laptops and smartphones. Webmasters are often concerned that websites that do not allow access from mobile devices will receive less traffic. For this reason, webmasters have developed a process known as progressive enhancement.
How Progressive Enhancement Works
The concept of progressive enhancement was developed in response to limitations that many designers found in graceful degradation. The problem was that graceful degradation focused on building a website for the most powerful browsers. Less powerful browsers are able to access the content, but the overall user experience is impaired. With progressive enhancement, web designers focus on delivering content in the most effective way. Content is created first and other layers of enhancements are layered on top of the website. Each layer of coding placed on top of the content is optional. If the enhancement is capable of being displayed by the browser, it will be displayed. If the enhancement cannot be displayed by the browser, the enhancement will not be displayed, but the user’s ability to consume the content will not be hindered.
Progressive enhancement is fundamentally the separation of web technologies into layers, with the HTML layer capable of functioning independently of the other web technologies. The most basic level, the markup, starts with semantic HTML that is designed with flexibility in mind. The next layer, styling, focuses on improving the look of the website to allow it to look fantastic. The final layer focuses on user interactivity, which includes comment sections, polls, slideshows, animations and games. Interactivity helps increase user engagement and can provide more reasons for users to visit a website.
Progressive enhancement has become a standard for the way websites are developed for several different reasons.
Some of the biggest benefits of progressive enhancement include:
- Improved accessibility
- More user engagement
- Faster websites
- Increased traffic
- Easier maintenance
The most significant benefits of progressive enhancement are discussed below.
The Benefits of Progressive Enhancement
One of the main reasons why web designers want to utilize progressive enhancement is that by doing so they will maximize the number of users who can access the content. More users lead to more traffic, which leads to more customers and more exposure to the content. Businesses and organizations that allow users to access content from anywhere will improve the overall customer experience.
Imagine users being able access a website while on the go. Users can sign in and pay bills, browse products and services, and remain engaged with the website’s content. Many users will want to access browser content from a desktop and later access the same content from a tablet without experiencing a degradation in quality.
On the flip side, webmasters can maximize the number of improvements that they make based on the capabilities of the web browser, allowing them to create more engaging websites. Webmasters no longer have to make their websites simpler than their competition to attract users with less advanced web capabilities, but can instead design an optimal web experience for everyone.
For example, users might be drawn to a website to post and receive real-time comments. A website that implements progressive enhancement can include enhancements such as user commenting features while simultaneously allowing smartphone users without Javascript to access content and have an excellent user experience, though without the real-time comments.
Since Javascript will be frequently discussed, it makes sense to talk a little bit about how
Javascript works.Javascript is a type of script that allows websites to incorporate functionality. An example of a web application that uses Javascript is the Google search engine. When Javascript is disabled, the search engine is relatively static. Users can type in a query and click “search” to scour the web for content containing the relevant keywords. But when Javascript is enabled, several other features become available. The instant feature allows users to immediately receive search results as soon as they type in the query. Users can also hover their mouse over each result and access a preview of the content contained in the website. These features help speed up the search process for Google search users. However, for users who do not have access to Javascript, the search engine still remains functional, demonstrating how Google implements progressive enhancement.
Besides allowing for websites to degrade when they lack access to Javascript, there are other benefits of progressive enhancement that have nothing to do with the use of Javascript.
For example, websites that implement progressive enhancements are more modular, making it easier to build websites and making them more fault-tolerant. Fault-tolerant websites are able to continue functioning even when another web application fails, since most web applications are not dependent on other applications.
The great thing about browsers is that they have the capability to ignore anything that they do not understand. This ability to ignore undecipherable HTML allows a website to continue to work even if the browser can only read a small portion of the website code. In the same way, HTML and CSS are also designed to be compatible regardless of what environment they find themselves in. Both programming languages are designed to be updated regardless of what type of environment they operate under.
While progressive enhancement makes websites more accessible to anyone, those who have vision impairments experience unique benefits.
Accessibility for the Vision Impaired
Some users are not able to read text. Fortunately, there are software programs available that will allow users to highlight text and convert it into machine-read speech. Screen readers have a surprisingly high level of accuracy and visually impaired users can normally understand the majority of the content read by them. Screen readers read the text found in HTML code. For this reason, web designers who use progressive enhancement techniques can create well-structured HTML that will be more accessible to screen readers.
Even for users who have the resources needed to access the most sophisticated web applications, the use of progressive enhancement can benefit them with faster page loading.
Faster Page Loading
Progressive enhancements tend to create the impression that websites load faster. While the first request for the website might download slower, the subsequent requests will download faster because the user will only need to download new content and files unique to the particular page. Web developers can also more effectively enhance the rendering sequence.Programmers can determine when scripts will be loaded on the website.
Mobile Browsers
While all of these features are beneficial to users, one of the main reasons why web developers have begun to use progressive enhancement is in response to what extent users have accessed content through mobile browsers.
Most newer mobile devices have browsers that support Javascript and CSS. However, web developers will still benefit from progressive enhancement when developing a website for mobile users. Web developers only need to create a new CSS stylesheet for mobile devices to make their sites compatible.
CSS is a programming language that influences how content is displayed on a website. HTML is the foundation for the Internet, but it can essentially define only the content of the website. CSS, in contrast, has the capacity to define how content is displayed. The CSS stylesheet is found in a single file and the webmaster can change how the entire website functions by editing only that file. However, when a website does not have CSS enabled, the HTML is still available.
While some web developers might initially feel reluctant to take the time necessary to implement different web development techniques, they usually discover that progressive development can save them significant time and money compared to older methods.
Easier Web Design
Progressive enhancement also makes website updates much easier. Webmasters can change the appearance of their websites by updating the CSS stylesheet and the actual website functionality is not affected at all. With the website already built on a firm HTML foundation, webmasters do not have to work harder to make it possible for the website to be viewable to the maximum number of users. Webmasters do not have to spend time adjusting their website to every possible browser. Usually, there is no need to change the graphics when using progressive enhancement. With progressive enhancement, it is also easier to design a prototype and test it out prior to release.
In addition to improving accessibility for users with outdated browsers, progressive enhancement increases website visits by enabling the use of HTML5. HTML5 improves searchability, allowing websites to improve their rankings on major search engines. In general, websites are more searchable when the HTML is well-formatted. HTML is readily available to search engine spiders, improving the findability of the website content.
Content is the key ingredient in effective SEM marketing. Search engines scan websites for relevant keywords and use keyword density and relevance to index a website. Users searching for specific keywords are more likely to receive the site’s content as a search result, increasing the number of site visits.
Inconsistent Branding
While there are a multitude of benefits to progressive enhancement, one concern that web designers need to address is how the website’s brand is represented across multiple platforms.
The design of the website influences how the brand is represented to the rest of the world. However, when the site design is not handled correctly, it can undermine any branding efforts, which leads to inconsistent branding. Not many like inconsistency, either in their everyday lives or in the experiences that they have with a particular company. Customers like to feel that the brands of their favorite companies represent certain ideas. When a company’s brand does not seem consistent, users often wonder whether the company will behave consistently. The great service experience might have only been a coincidence. Meanwhile, businesses that manage to maintain and optimize their brand are more likely to create an experience that customers are willing to pay a lot of money for.
One way to help maintain standards for branding across different platforms is to have a logo that is scalable while still being easily identifiable. That way, a user can see a logo on a small mobile screen. Another way to have a logo work on multiple platforms is to allow for the orientation of the logo to be changed. The logo should be able to work on a platform that has a tall or short screen. If the logo does not fit vertically and horizontally in a legible way, it will need to be redesigned.
Font consistency is also important. Web designers will want to make sure that they design the typography of the website to be compatible for mobile devices.Besides concerns over branding, there are other issues that some web designers might have.
The Downsides of Progressive Enhancement
One of the downsides of progressive enhancement is that it is a relatively new concept, and so many of the pitfalls of progressive enhancement might not have been discovered yet. Like many ideas that start off sounding promising, progressive enhancement might eventually lead to disillusionment.
Progressive enhancement might not be as important for websites that are unlikely to be accessed through a less advanced browser, or where the entire point of the website is to give users access to sophisticated web applications. There are some unusual cases where a webmaster might not even want users to visit a website if they do not have the right browser.
Not using progressive enhancement can sometimes save time if the webmaster has no interest in making the website available to all users. The easiest way to design a website is to only design that website for compatibility with the simplest browsers without even considering progressive enhancements.
Many designers once believed that users of older browsers should upgrade their browsers to a newer version. They also believed that users who only used older browsers were most likely already accustomed to visiting websites that had limited functionality and that there was no need to make special accommodations for them.
The more widespread use of mobile devices to access the Internet has been a primary reason why most webmasters now feel that websites should utilize progressive enhancement. Some users want a better browsing experience, but lack the hardware necessary to load sophisticated web applications.
Examples of Progressive Enhancement
The best way to determine whether a website effectively uses progressive enhancement is to turn off Javascript or CSS and determine whether the website continues to work properly without Javascript or CSS. One example of a website that degrades well is Amazon. The majority of ecommerce websites actually do not work without Javascript, which puts Amazon at a distinct advantage. Yahoo! appears to experience no changes except for the absence of the slider bar in the news section and the Yahoo! mail dropdown menu.
To determine how a website handles lower-end browsers, users can turn off Javascript and CSS. Javascript and CSS can be disabled on most browsers. However, the method by which Javascript is disabled depends on the browser. Javascript can be disabled in Firefox by clicking on the “Tools” dropdown menu and selecting “Options” or “Preferences”. Under the content tab, the checkbox “Enable JavaScript” can be unchecked to disable it in that browser. For Internet Explorer, the user has to go to the security tab under “Internet Options” and click “Disable” in the scripting section.
Viewing websites in CSS is much simpler in Firefox than disabling Javascript. Users need to click “View” in the menu and hover the cursor over “Page style.” The website can be quickly converted between CSS and no CSS. IE8 can have CSS disabled by pressing F12 and clicking “disable CSS” in the developer toolbar.
Websites that do not have CSS enabled can appear very disorganized. However, the content is still available. For example, the clean and well-organized Google search engine becomes a disorganized pile of links and text when CSS is turned off. The same occurs for Yahoo!, Ebay and Amazon. Disorganized content can be much more time-consuming to search through.
Fortunately, nearly all browsers support CSS. The only time that a browser does not appear to display CSS is during an Internet connection error. Refreshing the page will often reload the CSS stylesheet.
However, viewing a website with CSS disabled can give users a sense of the benefits of progressive enhancement vs. graceful degradation. While the content is available when CSS is disabled, users are not able to use the content in a meaningful way. When a website implements progressive enhancement, the content can still be used in a meaningful way even if not all the site elements are displayable.
Progressive Enhancement Has Become a Web Standard
Due to the numerous benefits and its few drawbacks, progressive enhancement has become the standard for web design. As a result, webmasters will enjoy the increased traffic that comes with enhanced user accessibility and from the higher traffic due to Google optimization.
Webmasters also can feel great about designing their websites to be more accessible to users who suffer from disabilities or who lack the resources to run more sophisticated browsers and load CSS, Javascript and any scripting language that emerges in the future.
Progressive enhancement is a standard that surprisingly took awhile to catch on, given how compatible it is with other concepts, such as the concept that content is king. HTML is the language that defines how content functions and progressive enhancement makes sure that content is the foundation of how the website is set up. There are some concerns over whether changes in the website can have negative implications for branding efforts. However, there are many strategies that can be taken to make sure that businesses can create logos, text and overall designs that can continue to reinforce branding efforts across multiple platforms.
While progressive enhancement can require more time initially, given all the benefits demonstrates that web developers should always keep their web design layered and allow websites to be accessed by multiple users.