Progressive Enhancement – A Business Primer
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, 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.
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.
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.
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
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.
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.