Discuss Graceful Degradation?
Graceful Degradation in Web Design
Graceful degradation is a design strategy where a website or application is built with advanced features for modern browsers, but if some features are not supported or fail, the system still provides a functional — though less rich — experience. Unlike progressive enhancement, which starts with a basic foundation, graceful degradation starts with the full-featured design and ensures fallback behavior when capabilities are missing.
- 1
Full experience first: Design with advanced features like animations, JavaScript-based interactivity, or complex layouts.
- 2
Fallbacks: Provide alternative behavior if a feature doesn’t work (e.g., text navigation if JavaScript menus fail).
- 3
Maintain usability: Even when degraded, the site should allow users to complete essential tasks.
- 4
Browser support consideration: Older or limited browsers may not render everything perfectly, but content and core functionality remain accessible.
In short: Graceful degradation ensures that even if a website loses some advanced features, it still remains usable and accessible. It is often contrasted with progressive enhancement, which builds up from a basic core.
Scenario Questions
0-2 years experience
- 1We need to embed a video on a page, but some users are on browsers that don't support the <video> tag. How would you ensure the page still provides a usable experience?
- 2If a CSS grid layout fails in an older IE version, what steps would you take to keep the page readable?
- 3Describe what happens when a user with JavaScript disabled visits a page that relies on JS for a carousel. How would you handle it?
2-5 years experience
- 1You added a new HTML5 form with input types like 'email' and 'date'. Some users on older browsers see validation errors. How would you debug and implement graceful degradation?
- 2Our marketing site uses a CSS flexbox layout that breaks on Safari 8. Walk me through how you'd identify the issue and decide whether to add a fallback.
- 3A third‑party widget injects a script that fails on low‑bandwidth connections, causing the rest of the page to stall. How would you redesign it to degrade gracefully?
5-8 years experience
- 1Design a strategy for a large e‑commerce site to serve core content when JavaScript or modern CSS features are unavailable, considering SEO and performance.
- 2Explain how you'd instrument monitoring to detect when graceful degradation paths are being triggered in production, and how you'd prioritize fixes.
- 3We need to support both modern browsers and legacy corporate browsers that lack many HTML5 features. What architectural patterns would you use to keep the codebase maintainable while providing fallbacks?
8+ years experience
- 1Our company is planning a migration from a monolithic front‑end to a component library that must support legacy browsers for years. How would you shape the architecture and governance to ensure graceful degradation is baked in across teams?
- 2Discuss the trade‑offs between investing in progressive enhancement versus building separate legacy versions of a product, especially regarding long‑term maintenance and cross‑team coordination.
- 3How would you lead a cross‑functional effort to define standards and tooling (e.g., build pipelines, lint rules) that enforce graceful degradation across all web projects in the organization?
Follow-up Questions
- What metrics would you track to know the fallback is working?
- Can you give an example of a fallback you implemented and its impact?
- How do you decide when to drop support for a legacy feature?