Responsive design has been around for years. It is a design methodology that allows the content on a web page to shift layouts as the browser window is resized, even down to mobile devices. This practice uses the same code by adding in media queries to call a different CSS or allows the individual content elements to flow as the content container is changed. Responsive design is great for desktop browsing experiences that allow the user to choose how they view your content. This also allows the content creators to manage all the same content across a multitude of devices.
However, some elements work on desktop, but don’t work on mobile. Responsive practitioners have become adept at scaling images, transitioning content or hiding specific content that doesn’t fit.
Responsive design helps give versatility to your content, allowing it to be consumed through a multitude of channels.
Where responsive design falls short, is it’s generally a one size fits all approach. The layout of the content is the same regardless of the context in which you’re consuming it. That means if the main content is image heavy or even text heavy it will load all the same content, regardless of the data connection or information need. If the user is on an iPhone they will see the same content as any another user on an iPhone.
Adaptive design is an approach that serves up similar content depending on what channel you are accessing the content on. Adaptive is not like responsive in that the layout on each device is often custom designed. This allows for greater control of the design, functionality and content.
It also means that multiple code bases need to be managed. A change to one, means you must change all in order for it to be consistent across all channels. If you have the resources and adequate processes to manage multiple code bases, I think the trade off is worth it.
Fortunately, it is not an “either/or” decision. We can use elements of both approaches to make elegant designs that work on a multitude of devices and serve a variety of information needs the customer may have.
Often when talking about adaptive design we stop short of what is actually possible with adaptive design. We talk about device type and that’s about it.
I believe adaptive design should not only look at the physical device it’s be displayed on, it should look at the context in which it’s being displayed.
We can leverage any number of APIs in the device to determine the context of the user. For example, we can use GPS in the users phone to determine at what rate of speed they are traveling. If they are traveling between 1-5 mph, they may be jogging. The information need is different at this speed then when standing still. The same can be said if they are traveling at 65 mph. The text in your content may no longer be relevant and it’s only the interactive elements that matter.
Adaptive design could also utilize the download speed to adjust the content. If the user in on wifi, all content can be loaded simultaneously, but if they are on slower bandwidth, then lazy loading might be a better solution. Users on slow networks can be served up lower quality, compressed images, while faster speeds will see full resolution, retina images.
The applications for adaptive design utilizing context is seemingly endless. They can be gathered through shared APIs on the device or through user toggles or settings.
Apple started doing this with their “do not disturb” setting. A user can now set the context for how and when an app should function.
When I think about applications that could utilize adaptive design, Apple Music and Podcast apps are top of mind. When I’m at my desk, the small buttons and large album art are annoying, but don’t pose any great usability issues. I’m still able to access all my music and podcasts with minimal effort. However, when driving home from work at 70 mph, the lay out of these apps pose new challenges. Skipping songs, replaying sections of a podcast or song or even changing the volume can be unusable or even down-right dangerous. If the app is able to intuit that I’m in my car and no longer stationary, it could serve up new content that fits my context and information need – big buttons and no album art.
When we not only consider the device, but also consider the context in which our content is being consumed, we will achieve the true definition of adaptive design.
Eric Davis 