In the early days of the Internet - when laptops and desktops were the only forms of computing - websites were designed with few devices in mind. When smartphones were introduced, mobile sites became popular alternatives for displaying content. The introduction of tablets created a range of screen sizes, and ever since web developers have promoted responsive design - a method whereby websites will reorder content based on the screen size. The next development is adaptive web design.
According to Carrie Cousins, writing for The Next Web, adaptive design does a lot more work on the server side. For a responsive website, there is one template that adapts to all different screen sizes. All of this work is done on the client's end - with the device's browser interpreting the template. Adaptive websites have multiple templates. When there user requests a site, the server serves up the appropriate template for the screen size.
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.
Some of the advantages of using the adaptive approach include the following:
- Better performance
- Increased flexibility
- Forces the designer to think about content strategy
The last point is related to usability and how users will interact with the site.
Because your website is actually designed specifically for different devices, you can design functionality in great detail. How do you want something to work? How do you want users to engage with your website? You can make it happen in a way that is unique to the user and device with an almost personalized experience.
Right now, adaptive web design is more of a concept. But, there are a few good guidelines. Google's Material Design Guidelines are very similar to the ideas behind adaptive design. Below are things to consider when creating an adaptive site:
- Grid system (12 column)
- Surface behaviours (UI based on screen size)
- Patterns ("User action behaviors and patterns – reveal, transform, divide, reflow and expand – are based on screen size")
So, should people use adaptive design over responsive? The answer is complex. Cousins outlines a variety of reasons for using an adaptive approach. These include situations where the designer wants to create device specific experiences, and each device has a unique experience. The designer has to able to maintain all the various templates. Further, users will be using the website on a wide variety of devices. In the end it's about what creates the best user experience.
Source: The Next Web