Responsive Design

This is a placeholder page on topics we've likely discussed to some degree already, with links to outside resources.

Progressive Enhancement (vs. Graceful Degradation)

Graceful degradation is the idea of developing a desktop-broadband optimized web site, then paring it down for higher latency networks and small mobile devices.

Progressive enhancement is the practice of developing a web site that functions enough to be usable without javascript or even CSS. It refers to a bottom-up approach, by designing for the bare essentials 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 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 roughly the same content (e.g. mobile.example.com), that's basically 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 using new CSS, 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 code shims and workarounds to give older browsers the exact same experience. Recreating the same design or behaviors in multiple ways however, adds a lot of complexity to your code, making it more difficult to read and maintain. It also makes web pages larger and slower to download for everyone.

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 web site that functions well enough for everyone, but is nicer for people who have the latest and greatest.