Graceful Degradation

Designing with a mobile-first approach doesn’t help people with an existing website. Sites built on non-responsive techniques may require starting over to be truly mobile-friendly. For many, that’s too much work to be worth the result.

As much as we preach mobile-first approaches, we know that mobile isn’t a top priority for many organizations. Not every site has a lot of mobile users … yet. But that won’t last. We can’t ignore increasing numbers of mobile users to our websites.

Graceful degradation is the process of deciding how a large site should fit smaller screens or less feature-rich browsers.

Unlike progressive enhancement, which builds upon a focused message that anyone can access, graceful degradation targets a specific viewing experience, but makes allowances for less capable devices.

Pros and Cons of Targeting Your Audience

On the plus side, graceful degradation gives designers with clear toolbox. Knowing in advance that your site will be viewed in, say, Chrome 29, you know you can rely on certain features like PNG24 transparency, CSS3 transitions, and other contemporary techniques. The same idea follows if your audience uses Internet Explorer 6. Maybe you can’t count on PNGs and CSS3, but at least you know the limits you face. Not so with the progressive enhancement approach, which starts with text and images at best, and guesses blindly at “what if the user has _____?”

Unfortunately, limiting our designs to one audience — no matter how widespread they are — is still limiting. The grace with which a site caters to older browsers can quickly go from passable to laughable. Web technology may evolve quickly, but not everyone updates their browsers, buys the latest smartphones, or keeps JavaScript and cookies enabled. People who don’t fit the optimum profile that a design caters to will get a watered-down experience.

How to Make it Work

For years web designers have practiced graceful degradation without knowing its name. It’s not unusual to create an amazing design, from sketch to Photoshop to working code, and test in their browser of choice. The site may (or may not) work well on less capable browsers. But designers who take this approach can do a few things make degradation graceful.

• Use visibility classes. Organize features and elements into “must have” and “nice to have.”
• Separate mobile sites. Redirect mobile users to a second site. Maintaining two sites can be twice as much work, but solves the immediate problem.
• Drop to 640px wide. Going responsive doesn’t necessarily mean cramming into smartphones. Most handheld devices can display 640-pixel-wide websites reasonably well — “good enough for non-mainstream” is a hallmark of graceful degradation.

Mobile-First Except When You Can’t

We’ve found that designs optimized for mobile devices adapt easier to wide screens than wide sites cram down to mobile. In the long run, it’s easier to expand than to shrink. But in the short run, many projects don’t have that option. Especially for sites designed before 2008, when web-enabled phones started to take off, adopting today’s techniques takes a lot of work.

Still, it’s getting hard to argue that sites can be good enough on less popular browsers; that people will put up with big sites on small screens; and that mobile users are a minority. And we’re starting to think that progressive enhancement means more than screen size.

Ensure that your designs work across devices with this easy to use Helio Test Template. 

Use Template

Website Design Test

Capture a quick yet precise evaluation of your website’s performance by considering usability, net promoter score, and visual appeal.

Use this template for:

• Concept Testing
• See if your design works across devices with an actual audience
• Prioritize your next design sprint

Use Template

Responsive web design is not always a one-size-fits-all. By trying to target one audience in an increasingly diverse web, graceful degradation is starting to look like one size doesn’t fit enough.