Graceful degradation is back on my mind tonight. Everyone is shipping shiny AJAX features, yet support tickets still come from people stuck on legacy browsers. If you build for the top of the market only, you will pay for it with every deploy. So let us talk about building cool stuff that still works when the world gets weird.
Dialogue
PM: Can we ship the new live search tomorrow? It feels nice in Chrome and Safari.
Dev: It is smooth for modern engines. In IE6 the spinner shows forever. The request fires, but the callback never binds to the DOM piece we swap.
PM: Do we have a fallback?
Dev: Not yet. We need a simple form submit path and a static results page. With that, old browsers still find stuff. Fancy bits can layer on top.
PM: Ship the layered version then. Speed for new, safety for old.
Evidence
I keep hearing that the long tail of old browsers is gone. That story sounds nice. Data argues with it. StatCounter and Net Applications still show a chunky slice of IE6 and IE7 on desktops, with spikes in corporate networks. On some business to business sites, that slice climbs past ten percent. On consumer apps with younger audiences, that number drops, yet it rarely reaches zero.
Mobile is the wild card. Android 2 browsers and iOS Safari handle most AJAX, but you still meet quirky proxies, flaky connections, and tabs that suspend timers. New CSS features look great on the keynote slide, yet layout bugs on older WebKit builds are still with us. If you bet everything on bleeding edge features, you lock people out. That is lost traffic and wasted content. Search engines also like pages that work without scripts. Progressive enhancement helps bots and humans at the same time.
Bottom line: Graceful degradation for legacy browsers is not nostalgia. It is traffic, conversions, and support sanity. Build the core for everyone. Layer the sparkle where it is safe.
Build notes
Start with a URL that returns complete HTML. That page must answer the request without relying on script. Think search results, comment submit, account settings. The first view works for no script, for slow phones, and for old browsers. Then attach behavior with unobtrusive JavaScript. If the script loads, hijack the form submit or link click, fetch JSON, and replace the right slice of the page.
Do feature detection, not user agent sniffing. Check for XMLHttpRequest, addEventListener or its older cousin, and classList if you need it. Libraries like jQuery 1.4, YUI, and Prototype smooth the edges. Keep the server response friendly to both paths. One template for the full page, one partial for the AJAX path, both backed by the same controller so logic stays in one place.
Mind the history. When you swap content, push the state using hash based anchors or the history API if present. If history is missing, degrade to normal links so the back button still behaves. Focus management matters too. After you swap content, move focus to the new heading and set ARIA live regions so screen readers can announce updates. The same care helps keyboard users and people on slower machines.
Styling needs a light touch. Use progressive CSS. Write basic styles that look fine everywhere. Add extras with feature queries or well scoped classes that only flip when the script confirms support. Avoid hiding real content behind sprites that only render with advanced selectors. If a feature is not ready, show the plain markup.
Risks
- Two paths drift. If you maintain both full page and partial responses, they can fall out of sync. Fix by sharing templates and running tests for both paths.
- History weirdness. Back button loops or empty states upset people. Use clear URLs and give each step a bookmarkable address.
- Same origin walls. Old browsers do not play nice with cross site calls. Keep calls on the same host, or proxy on the server.
- Flash of empty content. If you hide the target area before data arrives, some browsers will paint a blank gap. Prefer progressive reveal instead of hide first.
- Form validation that lives only in script leaves people hanging. Validate on the server and mirror the rules in script for comfort.
Graceful exit
We do not need to freeze for the slowest browser in the room. We also do not need to punish people who cannot upgrade at work. Ship the page. Make it work with basic clicks and submits. Then add fast AJAX paths with feature detection, solid history, and ARIA hints. That is graceful degradation that pays rent. Your metrics rise, your support queue shrinks, and your future self says thanks.
Tonight I am merging the live search with a no script form and a clean results page. New browsers get the glow. Legacy browsers still get answers. That is a ship I can stand behind.