The choice between adopting adaptive and responsive website design is best determined when designers consider their unique time and talent requirements. Adaptive design has intense time, cost and resource demands to create multiple layout templates, while responsive design involves a greater commitment to coding to maintain a proper user experience and visual hierarchy.
Responsive web design Vs Adaptive web design: which should you choose? In our multi-device, multifaceted user society, we face increasing pressure to keep users happy (and connected), all the time: no matter where they are or what they’re doing. Luckily, we have a variety of tools at our disposal that help us to keep on top of this. But with all the options out there, it can sometimes get a bit overwhelming. The design concepts of Responsive and Adaptive are quite different, so how do you pick the most suitable? Well, it totally depends on you and your business, of course. Why not try finding your solution through prototyping, where you can test both of the designs out early on.
It seems that sometimes we interact from different planes of understanding and we get lost in the specifics. So, let’s take things one step at a time. First things first: let’s agree that responsive sites and adaptive sites are similar in that they both change appearance based on the browser environment they are being viewed on—they both intend to make your web page look good on multiple devices (desktops and mobile devices alike). But, let’s be clearer: whilst responsive websites respond to the size of the browser by fluidly adjusting the placement of elements on a web page to best fit the available space, adaptive websites adapt to the width of the browser at specific points, based on the size and capabilities of each device. Responsive Vs Adaptive: this debate keeps coming up in web design conversation, but there is no straightforward answer. Let’s take a look for ourselves.
The origins of Responsive
Responsive web design (RWD), accredited to Ethan Marcote, describes a website’s content and layout appropriately designed to fit the screen of given devices. This design type is achieved by using CSS media queries and HTML to resize, hide, shrink, enlarge, and/or move the content to make it look good on any screen. RWD features include fluid grids, flexible media, and breakpoints with a fluid layout between them.
We’re living in the days of mobile-first, and we can’t always anticipate which device our users are going to use. As a result, a staggering number of today’s newer sites use responsive web design in order to cater to the multitude of users of today. The implementation of RWD has been made easier for less experienced designers and developers, thanks to the availability of themes accessible through CMS systems such as WordPress, Joomla and Drupal. But why should you use responsive?
- Readability: Responsive delivers a single design
that has slight variances from device to device. The intention is to
offer an overall universal look and feel without users having to zoom in
and out of differently sized screens on their various devices.
- Fluidity: in Responsive design, all components
buttons, menus bars, images etc. are automatically scaled downed in
order to respond suitably to the design features of each device.
This feature makes for an unchanging experience no matter which device
you’re viewing a design on.
- Consistent and complete experience: we know that
it’s no longer enough to simply make sure your web content fits on a
small screen—’mobile first’ is the way forward, so let’s keep it classy.
With Responsive web design, the content, like the layout, remains
consistent through all devices. Users are lazy, so we need to bring the
information to them. When users can access all the information, across
all mediums if and when possible, they get the bigger picture: a
consistent and complete user experience. Additionally, as users are able
to share their web content more easily from any of their devices,
shared expectations will increase.
- And with that consistent approach, let’s talk about a really cool feature of RWD: the singular URL.
Responsive design means that you only need to have one URL that can be
used on all devices, which means that Search Engine Optimization (SEO)
only needs to be managed once because content will not be changed from
device to device. So what does this mean for users? Well, imagine if
your information was consistent from device to device and easy to read! Lower bounce rate anyone?
- Responsive web design is cost effective, in comparison with Adaptive: RWD has a long life span, does not require constant rework and it’s easier to set up for rebuilds.
Responsive: what’s the catch?
Here’s the thing: Responsive requires more work. In order to ensure that the webpage fits each and every screen that users will access, you will need a substantial amount of programming and coding. You should, of course, also consider the effects on the user experience. RWD shuffles content around in order to fluidly fit the size and shape of the device’s window, so you’ll need to pay particular attention to the visual hierarchy of the design as it shifts around, as well as whether all that content is suitable for mobile devices! Oh, and be prepared for longer page load times and incompatibility with older browsers. Responsive web design is essentially like solving a puzzle—developers need to know how to reorganize elements on larger pages to fit more angular pages or vice versa.A word of caution: ensuring that elements fit within a page is not enough. For Responsive wed design to be successful, the design must also be compatible with all screen resolutions, sizes and layouts—and this of course makes the process rather complex.
Design thinking with Adaptive
Adaptive web design (AWD), the term coined by Aaron Gustafson, describes content authored and layout designed for distribution across multiple channels, media, products and interfaces. This design is achieved through progressive enhancement, detecting the device, and static layouts based on breakpoints which don’t respond once they’re initially loaded.
AWD works to detect the screen size and load the appropriate layout for it—generally you would design an adaptive site for six common screen widths: 320, 480, 760, 960, 1200, and 1600. Adaptive is useful for retrofitting an existing site in order to make it more mobile friendly as it allows you to take control of the design and develop for specific, multiple viewports. Let’s take a look at how this design type could work for you:
- Adaptive web design offers a tailored UX, as each
device will be treated as an individual medium, with a unique design:
‘device-first’. The “magic” is in that the device and device-specific
features are detected and a website’s original layout
and content are served to the user based on that information. The result
is a website custom-made for the user’s device.
- Fast page loads are common in AWD because only the essential elements are loaded on mobile devices.
- Existing sites don’t need alteration, the layout is already set up!
The downside of Adaptive
As Adaptive web design requires advanced knowledge of web development for implementation, preparing multiple page-layout templates and testing across target, can can be a rather costly and time consuming concept to work with, as well as resource demanding. Making enhancements and modifications to multiple layout templates can be uneconomical, and the structure can be difficult to manage when it comes to multiple views. Due to the need to manually prep each design on each device, Adaptive web design can sometimes result in a less consistent cross-device experience, than say with Responsive design.Nevertheless, however complex and expensive Adaptive can be, it’s a much more effective way to reach the broadest mobile audience.
The best of both worlds
Sometimes simple terms can represent complex concepts, so let’s try not to get confused. There are no shortcuts to whichever web design technique you decide to use—both require the work that comes with creating a site that’s essentially one-size-fits-all. Responsive doesn’t offer as much control as Adaptive, but generally takes much less work to both build and maintain. Responsive layouts are fluid and whilst Adaptive uses percentages to give a more fluid feel when scaling.
(Courtesy of JustInMind)