As the range of browsing environments and platforms continues to expand, the concept of progressive enhancement has emerged as a pivotal topic in web development. Essentially, progressive enhancement involves constructing websites with robust foundations to ensure compatibility across a wide array of devices and platforms, from mobile and netbook devices to desktops and screen-readers. At its core, progressive enhancement can be understood as the segregation of HTML, CSS, and JavaScript.This principle should be the cornerstone of understanding progressive enhancement. Imagine these web technologies as layers, with HTML forming the first layer, CSS the second, and JavaScript (along with other client-side technologies like Flash or Java applets) as the third.
By dividing these components, we enable our websites to adapt to the capabilities of various web browsers. How can we practically implement progressive enhancement?
Markup: Begin with semantic and well-structured HTML for flexibility and compatibility.
Styling: Gradually improve the visual appeal of a design by supporting browsers with advanced features (e.g., WebKit browsers, IE9, Firefox, and mobile browsers).
Behavior: Enhance the site with interactive features through JavaScript on browsers that support it.
It’s important to note that implementing the separation of markup, styling, and behavioral layers can yield significant benefits in website projects. The main reasons for adopting progressive enhancement include:
Accessibility: Ensures content is accessible to all visitors.
Portability: Supports cross-browser and cross-device compatibility.
Modularity: Allows for easier and more fault-tolerant site builds with decoupled components.
Site Performance: Improves perceived page loading times, enhancing usability.
Let’s delve a bit deeper into each of these points. AccessibilityThe accessibility of websites is a key reason for the separation of the three layers. You can be confident that all browsers and devices will at least be able to render the most critical part: the content.Consider modern and ancient browsers, mobile devices, search engine crawlers, and screen readers – progressive enhancement’s emphasis on layer separation, universal design, and semantic markup ensures that all of these can access the content. This means that if there is any content that is revealed by JavaScript (such as a mouse click on an element), it must still be accessible even when JavaScript is not available. Ensuring that all content is accessible through good HTML, CSS, and JavaScript has wide-ranging beneficial effects. PortabilityProgressive enhancement does not target specific web browsers; it aims to cater to all browsers as effectively as possible, leveraging browser features when available. Smartphones and mobile devices supporting media queries, CSS3, and HTML5 will offer an enhanced user experience due to these browser features under progressive enhancement principles.With the right techniques, these enhancements do not alienate users without these browser features.ModularityWhen a website build is divided into different layers, developers can focus on their specific tasks more effectively. It’s common in large projects for different developers to specialize in different layers and/or modules, such as front-end web development, web design, and server-side scripting.Layer separation also simplifies website maintenance. If changes are needed in the presentation layer, they can be made without affecting the markup and behavioral layers.Site PerformanceImproved web page performance is an indirect benefit of applying progressive enhancement principles.How does progressive enhancement impact page loading times? While it’s true that placing all content, styling, and scripts in a single HTML document may seem faster due to the need for only one HTTP request instead of at least three, this is only relevant for the first unoptimized browser cache request.Subsequent requests will greatly benefit from browser caching: externally linked CSS and JavaScript files remain available on the client’s side when navigating to a different web page; only new content and page assets need to be downloaded and rendered. This reduces data transmission and results in quicker response times. Separating the layers often results in a better perceived performance as well.Loading and executing stylesheets and scripts at the right time in an HTML document can optimize rendering sequence, making the web page feel more responsive. For example, users should see styled content first. Placing a script too early in the HTML document can block rendering of content below it until the script is loaded.By decoupling the JavaScript layer from the CSS and HTML layer, we can more easily decide where to load our scripts; for example, after the stylesheet has been downloaded. When building websites, how do we apply the concept of progressive enhancement? Let’s examine the three layers to see what we can do to promote progressive enhancement within them.MarkupHTML was invented over two decades ago to provide an internet-based document standard. Despite the fast-changing nature of the web, HTML remains the fundamental content-structuring mechanism for websites. With the advent of HTML5 and browsers that support it, we now have access to semantic and interoperable markup that makes our content even more machine-readable.However, even though the language has seen improvements and revisions over the years, its fundamental purpose remains the same: we use HTML tags to structure our content and hyperlinks to link to other (HTML) documents. Progressive enhancement embraces this principle completely – it instructs you to markup your content semantically and ensure all content is accessible through normal hyperlinks. For example, remotely loaded content (through Ajax) must still be accessible when JavaScript (and CSS) is not available on the user agent – and with the appropriate technique, this is achievable (and best practice) with minimal extra effort.StylingVisual design is powerful. On the web, we have CSS, images, and fonts to help enhance our message by customizing the look of our sites. Coupled with HTML5 is CSS3, providing designers with more possibilities and freedom to express themselves stylistically in their web designs.To bring our visual design to the web, we use stylesheets. Stylesheets are linked from within HTML documents, and the browser renders the rules defined within them. The separation of websites into three layers means that our web designs must be accessible and usable regardless of the browser the user is using.For example, users on IE6 should not be denied access to a website’s content, even if the site enhances the user experience and visual complexity on CSS3-supporting browsers. Gradually enhancing the styling of our sites also means that relying on CSS to render content (which is the role of the markup layer) using properties like display: none; is not good practice unless the content is not critical to understanding the HTML document.BehaviorIn the early days of the web, HTML documents were not much more dynamic than traditional paper documents.In fact, the original purpose of HTML was to mark up scientific paper documents and make them interlinked for easier referencing and research. It was around 1996 when JavaScript was introduced. Since then, scripts have generally been used for document manipulation, form input validation, and some visual effects like button and image states during the DHTML era.Although JavaScript added complexity and interactivity to previously static HTML documents, its use was often superficial at best and at worst, abusive (pop-up windows, disabling user inputs like right-clicking, etc.). With the advent of user-centered design and “Web 2.0,” rich internet applications emerged, and JavaScript, once a non-essential part of a website, became a critical component. Developing and maintaining robust, highly interactive web applications and websites requires a better understanding of the language’s prototypal nature and object-oriented uses, as well as the rise of numerous libraries and frameworks like jQuery and MooTools. These have ultimately improved the standardized implementation of JavaScript that promotes (and even indirectly enforces) JavaScript and progressive enhancement best practices. Knowing the language (and its quirks) and using the right tool for the job is essential for all web developers using JavaScript. Although creating complex applications without JavaScript is increasingly difficult, adhering to web accessibility practices under WAI-ARIA guidelines is a step in the right direction.For efficient and robust web development that emphasizes progressive enhancement, I highly recommend following these guidelines:
Store all scripts in externally linked files
Develop unobtrusive JavaScript
Separate behavior from HTML and CSS
Avoid browser-specific code and use feature detection (not browser detection)
Conduct “JavaScript off” unit tests for your web application and identify what cannot be done without JavaScript so you can present alternative options
Graceful degradation, an older concept that preceded progressive enhancement in web design, emphasized fault tolerance and was more browser-oriented than accessibility-oriented, allowing websites to degrade gracefully when older web browsers were in use. Progressive enhancement differs in that the philosophy is almost reversed: a website is enhanced by taking advantage of features detected within the user’s browser, rather than developing for the lowest common denominator.On the other hand, the philosophy of progressive enhancement asserts that we provide user agents with what they are capable of handling. For example, we allow web browsers that support CSS3 to apply style rules to our web pages.Here are a couple of important issues related to progressive enhancement that you may encounter when applying progressive enhancement principles to your website builds:Web Apps/Rich Internet Apps Will Require Client-side ScriptingIn an era where browser-based applications mimic the functionality and robustness of desktop apps, the behavioral layer is essential for enabling rich and responsive experiences. The key point to remember here is that you should be aware of the implications for user agents that do not have JavaScript (or Flash, Java applets, or any other behavioral web technology you are developing), so you can respond appropriately to these less-than-ideal scenarios. Progressive enhancement takes advantage of browser features, offering an enhanced experience to users with specific browser features.In the extreme interpretation of this philosophy, browsers that cannot render JavaScript will not have as rich of an experience as those that can.Progressive Enhancement Requires More Development WorkIn practice, you will find that creating progressively-enhanced websites requires more work. Whether it’s learning (like what you’re doing now) or revising markup for semantics and flexibility, or coding extra CSS to take advantage of CSS3 and HTML5 on supported browsers – progressive enhancement involves more web development time than usual.Progressive enhancement is a powerful development philosophy for creating universally accessible sites and web applications. It does require some learning, experience, and discipline, but the return on investment is significant.
Progressive Enhancement: Paving the Way for Future Web Design
Understanding Progressive Enhancement
Progressive Enhancement with CSS
Progressive Enhancement with JavaScript
Unobtrusive JavaScript for Progressive Enhancement
Mobile Web Design: Best Practices
20 HTML Best Practices You Should Follow
Information Architecture 101: Techniques and Best Practices
