If you have been remotely listening to the Web design conversation in the past five years, one phrase keeps coming up – responsive Web design. By now, you are probably designing every one of your site outlines with a responsive framework.
But some of the talk is shifting to adaptive Web design. The conversation has been out there for a little while, but Google and Apple have really helped bring it back to the forefront. Is adaptive a concept we really need to think about when designing for the modern user?
The discussion starts with a primer on adaptive Web design, or AWD. Like responsive design, adaptive is rooted in trying to create a better user experience across a number of different devices.
While responsive design is often one design that has slight variances from device to device – for an overall universal look and feel – adaptive design is a little different. With adaptive design the “magic” is in that the device and device-specific features are detected and a website is served to the user based on that information. The result is a website custom-made for the user’s device, but it can sometimes result in a less consistent cross-device experience than with responsive design.
An adaptive UI is not always something you can actually see. And as we’ve said in the free e-book Interaction Design Best Practices, the best interfaces are where the users doesn’t feel the hand of the designer.
Much of the difference between the responsive and adaptive design occurs in how an adaptive website works. That’s not to say it can’t – or won’t – look different, but it does not always have to.
While the ideas behind adaptive and responsive design are similar, they are not the same thing. Much of what’s different is in the HTML and CSS, and how that information is served to users.
Garrett Goodman of The Huffington Post might have the simplest explanation:
“Responsive design is client-side, meaning the whole page is delivered to the device browser (the client), and the browser then changes how the page appears in relation to the dimensions of the browser window.
“Adaptive design is server-side, meaning before the page is even delivered, the server (where the site is hosted) detects the attributes of the device, and loads a version of the site that is optimized for its dimensions and native features.”
So the difference is who does the heavy-lifting. For adaptive, it’s the server working hard to deliver an optimized page. For responsive, it’s the device who’s beholden to media queries.
There are other differences between AWD and RWD as well. The amount of information downloaded on the user end is different, making adaptive websites a little quicker to load. In the build itself, adaptive design uses multiple templates for a “single website” whereas responsive design uses a flexible framework with a single template. Some designers argue that adaptive sites are easier to build because they can be based on an existing site.
The pros and cons for either have a lot to do with the individual design and development team.
But it all boils down to: What’s best for your users?
That’s a question that’s best answered with plenty of research on the front end of the design build.
Users of adaptive design cite a handful of distinct benefits for using this type of design outline. (And their arguments make a lot of sense.)
Changing your website design strategy from one where you build responsive websites to adaptive websites requires changes in the way you think about the design process. You really are building multiple versions of a site.
While the design method is fairly unique to the designer, Google’s Material Design documentation has a good breakdown of how to think about the adaptive process and create a website in that manner.
“This adaptive UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.”
When it comes down to the actual design, you’ll need a few new sets of rules.
This includes a set of templates for different devices. (At a minimum this includes three templates – desktop, tablet and mobile.) You’ll also need a set of guidelines for how you plan to use breakpoints and grids and what adaptations will occur at what points. Finally, comes the discussion about how much difference between device designs is acceptable. Ask yourself: are you OK with a website having multiple aesthetic outlines?
So it all comes back down to the big question: Should you use adaptive design?
If you are looking for a universal solution, you are not going to be happy with this answer. The type of design interface you choose really depends on the needs of the project and the users that you serve.
There are some instances where a more clear solution can arise. Consider using adaptive design if:
It really comes down to one thing in the end. Are you using adaptive UI to create a better experience for users or because you want to try something different? Always create common and desired experiences that users want to be a part of.
For more advice on designing the best web experiences, check out the free e-book Web UI Design Best Practices. Across 109 pages, you’ll find 33 design teardowns of top companies so you can learn from the best examples.
Read More: http://thenextweb.com/