Discover innovative tools, design features, unique websites, and code structure curated by the GoWeb community.

View the resources by category or by monthly GeekOut! Compilations. Check out the latest compilation below.

Graceful Fail vs. Progressive Win

Visit Graceful Fail vs. Progressive Win


You’re sitting at your computer with your web development ‘arme de choix’, staring at a blank page, wondering where to start…

If you’re like most of us (and statistically, you are) when you start busting out the div tags, your instinct is to design for a desktop and use clever automagical media queries to gradually remove content and functionality as the viewport shrinks.

We, the us that is the mobile first development community, almost always do this. This is how the developer do.

There’s a name for it; Graceful Degradation. It’s an older phrase, but it checks out. It came from the need within the development community to sit on as many horses as possible with one rear-end; even the old iHorse5.1…and that one open source horse that was actually a cow or an aardvark or something.

The point is that we would gradually reduce the quality of the experience as the device or platform degraded while ensuring functionality. That is, as the viewport shrank, content and features were prioritized. Those deemed unworthy of, or unwieldy for, a mobile device were hidden thus degrading the experience.

Enter Progressive Enhancement: this arose from the idea that you put your real effort into the mobile platforms. You give the mobile user the best possible experience then enhance the experience as screen real estate and processing power increase. This might seem like a glass-half-full sort of thing. Who cares how many neckties the giraffe eats as long as the end result is a functional website that works?

It?s like this: when you start with a desktop, and all its oodles of processor powers and crazy good technology, you will tend to design your site using all of those marvelous technowonders only later realizing that it doesn’t work on a mobile device at all. You end up with an acceptable product, but it will almost always look like a cut down version of the desktop site.

By designing with progressive enhancement in mind, you start with the limitations of the mobile platform and give the user an amazing experience there, first. You pour yourself and all of your initial energy into a project and end up with a mobile product that is polished, functional, and well designed. Furthermore, you’ve already trimmed the fat from the site and given the user a lean, yet rich experience.

Now, instead of pacing around trying to figure out what you need to drop from the site, you can invest your time in making the site even more awesome!