Responsive Design

Progressive Enhancement (vs. Graceful Degradation)

Graceful degradation is the idea of developing a website starting with the ideal scenario and all the bells and whistles: fast internet connection, javascript, good graphics, the latest browsers. Then, to make it "accessible", the site is pared down for slower connections, older browsers, etc.

While this is sometimes an acceptable approach, if a wide or unspecific audience is in mind it won't work. In fact, it often leaves entire swaths of potential visitors completely unable to view or use a site. This used to be a huge problem with technologies like Adobe Flash and other types of proprietary embedded applets.

Progressive enhancement is the practice of developing a website that functions enough to be usable without javascript or even CSS. It refers to a bottom-up approach, by designing for the bare essentials (native HTML) and adding features for more capable browsers, networks, and devices.

The goal is the same, but we arrive there from opposite directions.

Regardless of the fact that we can assume most users have javascript and modern browsers, this concept remains important for semantics, searchability, and true accessibility. HTML content and accessibility should always be top priority, then styling and interactive behavior.

Responsive Design (vs. Adaptive Design)

Responsive design today is essentially synonymous with "web design". Responsive design generally means developing a single fluid layout that seamlessly adapts to any screen or device size.

When internet connected mobile devices were rapidly appearing on the market in the late 2000s, one approach to handling the vastly different screen size was "adaptive design". Adaptive design is the practice of designing a few rigid layouts for different target screen sizes.

If you've ever visited a web page on your phone and been redirected to a different url with a different layout but roughly the same content (e.g. mobile.example.com), that's a form of adaptive design. Redirecting to a mobile url is still necessary for certain things, but the practice of essentially designing the same site multiple times is no longer realistic or prudent. Way too many screen sizes!

Embracing Variety

Where should we draw the line between shiny new JavaScript and CSS features, and supporting all browsers?

If we limit ourselves to using only features and techniques that have 100% browser support everywhere, we'll be constantly behind the curve of new and useful things that most users would be able to take advantage of (way behind).

In some cases, we can use newer features and add what's called a "code shim" or other workarounds to give older browsers the same experience. Recreating the same design or behaviors in multiple ways however can add complexity to your code, making it more difficult to read and maintain. It can also make web pages larger and slower to download for everyone—even the majority of people who aren't using Internet Explorer (ahem).

On the web, where so many factors are beyond our control, it's important to consider that not everyone has to have the same experience to have a good experience. Just because a detail or UI interaction doesn't work exactly the same in every browser, doesn't mean we've failed.

The content and overall usability of a design is more important than specifically how consistent it looks, or how it looks at all. It's entirely possible to build a website that functions well enough for everyone, but is nicer for people who have the latest and greatest.