A lot of business blogs will suggest that you start your web development conversation by deciding whether you need to build either a responsive or an adaptive website.
There’s some confusion inherent in asking that question, as responsive and adaptive design aren’t opposites.
Responsive means creating a site that works well and looks good on different devices. In creating responsive sites, we assume that people have the best device on the market (or at least a very good one), along with a pretty good data plan from their mobile provider.
It’s a “first-world problem.” To develop responsive designs, you throw everything in and change the way elements look or behave when displayed on different devices. Whether the user is getting the full experience on the desktop or a streamlined version on their phone or tablet, their browser is still downloading pretty much everything on a page. Depending on the device, it is just using the content in different ways, or not using it at all.
But why download things we aren’t going to use? Can’t we solve that by applying adaptive design?
Apples and oranges and bananas
This brings me back to the basics – getting the terminology right. The term “adaptive design” sounds a lot like “adaptive technology,” which is technology that features UX and workflow patterns designed for use by people with disabilities. Adaptive technology is also called “assistive technology.”
So, while most people toss around the terms responsive and adaptive, I believe the term that should be used in our work is “progressive enhancement,” which is in some ways the opposite of responsive design.
In progressive enhancement, you begin with the bare minimum needed for a site and then add additional elements depending on the device and mobile carrier. Does your site need images? Styling? JavaScript and things flying around?
If the answer is “yes,” and you know the device/network/etc. can handle it, you can start sending those additional components over the wire to the user, using a combination of back-end network technologies and lean, efficient coding.
If you’d like to learn more, watch Building For Performance And Resilience a video by Andy Hume, a software engineer at Twitter, and take a look at his slide deck.
A flexible solution
Third-world countries provide a great example of the value of progressive enhancement. Cell phone networks are common, but they aren’t advanced (no 4G, LTE, etc.). People get online at enormous rates, even though they usually have fairly cheap, low-end phones rather than smartphones, iPads or laptops. To get news and other meaningful information, people need to be able to see a site’s content, post an update and retain information on their screen, even if the network connection is dropped.
At UpTop, we can apply progressive enhancement techniques to solve the first-world scenarios our customers are more likely to face. Rob Reinhardt, UpTop’s Director of Mobile, offers these examples:
E-commerce. Picture an e-commerce site where visitors might browse or shop during their daily commute. Users want fast page loads, and yes, a “responsive” design that doesn’t require them to squint to look at items or zoom to toggle drop downs. Beyond layout, connection might change as they transition between mobile networks and WiFi, or they may lose their connection completely in a subway system.
Data Entry. For a data entry tool (one that workers would be using in out the field, for example), you’d want to ensure that the text they type into a web form will not be lost, even if the network connection gets dropped. If photos or external data have to be imported, you need to offer an alternative workflow for devices that can’t handle those functions.
Progressive enhancements would augment these situations with improvements in the workflow and using the phone’s built-in tools to promote conversion, increase productivity, and save labor costs expended in repeating lost work.
To decide if progressive enhancement is right for your development project, take a step back and think about your goals and target audience. After that, you can begin to apply technological solutions, like progressive enhancement, responsive design and maybe even adaptive technology.
If you’d like to learn more, here are additional resources.
The Case for Designing with Progressive Enhancement
