As a web developer, you want to create web applications that work beautifully across a range of devices, browsers, and connection speeds. However, with so much variety among users‘ technology, achieving this consistently positive experience can be a challenge. Two techniques that help address this problem are progressive enhancement and graceful degradation.
In this comprehensive guide, we‘ll explain what progressive enhancement and graceful degradation are, when you should use each approach, and provide real-world examples so you can put these methods into practice. Read on for pro tips to help you build inclusive web experiences.
What is Progressive Enhancement?
Progressive enhancement means starting simple and enhancing the user experience step-by-step from there. With this strategy, you first ensure your core content and functionality work on the most basic level, then layer on enhanced features for capable devices and browsers.
The progressive part refers to steadily improving and upgrading the site experience when possible. The enhancement means you‘re augmenting the core features rather than changing them.
To use progressive enhancement:
-
Build core content/functionality accessible on all devices. Focus on clean, semantic HTML so the content is readable even without styling or JavaScript.
-
Layer on CSS for layout and visual design. The site may not look pretty yet, but the content flows properly on different screen sizes.
-
Add advanced JavaScript functionality. Now that CSS handles presentation, JavaScript can enable complex interactions without worrying people on slower connections.
With each layer, more users can access an enhanced experience. But crucially, everyone gets the core content regardless of device or tech constraints.
Why Use Progressive Enhancement?
Using progressive enhancement offers several advantages:
- Inclusiveness: Site works for all users regardless of tech capabilities
- Resilience: Core functionality withstands obsolete browsers or disabled JavaScript
- Flexibility: Easier to build on and improve code over time
- Search engine accessibility: Crawler reads plain HTML content easily
Progressive enhancement focuses on accessibility first and enhancement second, so optimal experiences reach more users.
What is Graceful Degradation?
In contrast, graceful degradation means offering a full, rich user experience to start then scaling back features for legacy devices or browsers. The "graceful" part implies that even when features drop off, the application still works reasonably well.
To gracefully degrade a website:
-
Build complete site using modern best practices and tools. Assume users have the latest and fastest browsers and devices.
-
Check for backward compatibility issues. Determine what older tech lacks needed capabilities.
-
Create fallback solutions for outdated/slow systems. Redesign conditional code paths and substitution content.
Rather than starting simple, graceful degredation anticipates the ideal experience first. Then developers carefully support legacy visitors when necessary.
Why Use Graceful Degradation?
Choosing graceful degradation offers other advantages:
- Cutting-edge functionality Site leverages newest features without compromise
- Prioritize modern experience Primary focus stays on target users‘ needs
- Progressive improvement Continually refining fallbacks pushes site forward
Overall graceful degradation favors innovation with reasonable allowances made when essential functionality breaks.
Key Differences
Now that we‘ve explained both techniques separately, let‘s clarify the core differences between progressive enhancement and graceful degradation:
| Progressive Enhancement | Graceful Degradation | |
|---|---|---|
| Starting point | Basic content and function | Full-featured optimal site |
| Priority | Broad device/browser compatibility | Ideal experience for modern users |
| Adaptivity | Enhances up from baseline | Degrades down from advanced features |
| End result | Layered experience matching capabilities | Scaled experience based on environment |
In a nutshell:
- Progressive enhancement works up from a basic site accessible to all.
- Graceful degradation works down from an ideal site paring back as needed.
Neither approach is intrinsically better or worse overall. Which technique you choose depends mainly on your target audience, project constraints, and business goals.
Real-World Examples
To help illustrate these concepts further, let‘s walk through some hands-on examples of progressive enhancement and graceful degradation in action.
Progressive Enhancement Example
Say we‘re building an interactive educational site for students to learn math concepts. Working mobile-first, we‘ll use progressive enhancement techniques.
Step 1) Core content – HTML
We begin coding with clean, structured HTML5 markup so screen readers can parse the content well. No CSS styling yet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math 2020</title>
</head>
<body>
<header>
</header>
<main>
<h2>Integer Exponents</h2>
<p>
Here is an example of evaluating an integer exponent:
<br>
<br>
<strong>32 = 3 x 3 = 9</strong>
</p>
</main>
</body>
</html>Step 2) Add CSS
Next we incorporate a mobile-friendly CSS framework for responsive design across device sizes. Visual layout takes shape.
Step 3) Enhance with JavaScript
Finally, we implement JS functionality like an interactive exponent calculator for a richer learning experience.
By progressively enhancing the math site in layers, all students access the content, with an engaging, app-like practice problems for capable browsers. The core curriculum reaches everyone regardless of disabilities or technology.
Graceful Degradation Example
For contrast, let‘s explore graceful degradation with an e-commerce site redesign. We want a slick modern interface showcasing product images.
Step 1) Build ideal site
Assuming most shoppers have newer devices and browsers, our developers implement cutting-edge HTML, CSS like flexbox and grid for intricate page layouts, and complex JavaScript powering interactive widgets.
Step 2) Identify backward compatibility issues
Testing reveals layouts break on old browsers without flexbox support. Image carousels and live product filters fail without JavaScript.
Step 3) Create fallback solutions
To gracefully degrade, conditional comments swap older CSS techniques into play if flexbox isn‘t available. Basic sliders and plain text filters replace broken scripts.
While the slick carousels and live previews don‘t function for legacy visitors, the fundamental catalog, items, and checkout process remains usable. By scaling back features, we deliver the best possible experience supported.
Gracefully degrading From premium e-commerce site to simply functional online store allows us to build for the future without leaving past users behind.
When to Use Each Approach
Now that you understand these concepts better, how do you decide when to use progressive enhancement vs graceful degradation?
Use progressive enhancement when:
- You want to maximize accessibility and support all users
- Building a simple content site focused on reading
- Developing web apps for unreliable connections
- Site traffic uses a wide variety of older technologies
Use graceful degradation when:
- Target users primarily have newer devices/browsers
- Creating complex web applications not viable at baseline
- Presentation, interactivity, and speed are critical
- Can afford development overhead for fallbacks
Evaluate your specific project goals, audience, timelines, and technology constraints. Combine techniques too! You might progressively enhance markup and CSS but gracefully handle limited scripting support.
The right solution always depends on context.
Putting It All Together
Progressively enhancing and gracefully degrading websites help manage the tricky variability of user environments.
Progressive enhancement works up from the simplest viable experience in layers, guaranteeing accessible core content across devices and browsers.
Graceful degradation works down from the ideal full-featured site, adapting as necessary for legacy technology but staying cutting-edge where possible.
Neither approach alone is a silver bullet. Skilled developers understand these concepts and judiciously apply each method where appropriate. Testing early and often while employing a combination of techniques keeps your applications resilient regardless of visitors‘ capabilities and technology.
I hope this guide gave you a firm grasp of these web development best practices! Feel free to reach out if you have any other questions.
