Another topic trending on my personal buzzword watch is “adaptive design vs. responsive design.”
The difference is a bit confusing, but at the highest level, responsive design means building one design that works on all devices, “responding” to the device with design and layout changes. Adaptive design means “adapting” a single design to the conventions of different types of devices, using the technologies and styles native to each device.
Want more?
Responsive Design
To define the terms in more detail, “responsive design,” means creating digital frameworks that respond to the size of the browser — seamlessly changing how the content is displayed for smartphones, tablets or differently-sized browsers. Last month, the Boston Globe launched a new design built using responsive principles, which you don’t need to know.
(In case you do, they are fluid grids, fluid media, media queries, CSS and Javascript. The functionality usually leverages techniques which take place “client-side,” meaning in the users’ browsers.)
Ethan Marcotte introduced the concept of responsive design in a 2010 AListApart article.
Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.
Responsive design basically means using a single, consistent design to serve content to any device that accesses the site.
Adaptive Design
Because responsive design is sometimes considered subset of adaptive design, the definitions get a little convoluted, but adaptive design generally tries to adapt a consistent design using the conventions of different devices. For example, an adaptive design would maintain colors and fonts across devices, but leverage tap and swipe on tablets and smartphones.
For the tech-minded, adaptive design frequently uses fixed breakpoints instead of fluid grids and server-side page builds instead of client-side.
Adding features as you move from phone to tablet to browser is called “progressive enhancement.” So, while we’re defining buzzwords, let’s throw in “progressive enhancement” vs. “graceful degradation.”
Graceful Degradation
A carry-over from the engineering world, the concept was, at its core, about giving the latest and greatest browsers the full-course meal experience while tossing a few scraps to the sad folk unfortunate enough to be using Netscape 4.
Graceful degradation means starting with the best user experience and cutting back for lesser browsers.
Progressive Enhancement
In contrast to graceful degradation, progressive enhancement means that you start with the most limited experience (usually the smartphone browser) and build up from there.
If you start with a mobile-first strategy (often the case nowadays), your overall design can bear traces even in its most enhanced state.
via AListApart, Zeldman, Smashing Magazine