Both adaptive and responsive Web design models have adherents, and while it's tempting to choose a side, perhaps a better way exists. Adaptive design is more commonplace but has downfalls, while responsive design is more desirable but harder to achieve. Could it be the way of the future to meld the two seamlessly, enjoying the benefits of both? Let's explore this idea below:
Adaptive Design in a Nutshell
In the early stages of Web design, designers and developers created with a limited set of screens: namely, desktops or laptops. Since smartphones and tablets were still the stuff of science fiction, this was easy to do. As more devices joined the party, however, designers and developers saw a need for different layouts of the same content. As its name suggests, adaptive design means developing different layouts to meet the requirements of screens of various resolutions.
The main benefit of adaptive design is the developer only has to deal with a limited number of potential resolutions. At each higher resolution the design responds by switching to the larger layout to accommodate. Because the site is only designed to fit layouts of certain sizes, however, adaptive designs can have a jarring "snapping" effect, where the design changes abruptly in response to a change in width. Plus, with needing to contain the right ingredients for all screen sizes, code gets weighty.
Responsive Design to the Rescue
In contrast, responsive design does not snap, because it is developed to adjust to any resolution. Instead, it scales up smoothly, using media queries to fix the layout every time it falls apart. Starting at a chosen size - usually very small or very large, depending on the devices an audience typically favors - the developer adjusts the size upward or downward until it breaks. The navigation bar gets wonky, for instance, or the sidebar ends up beneath the main content, or maybe the footer winds up at the top right of the page. At this point, a media query fixes that break point, then the next, then the next, until the developer has covered the range of likely sizes.
Perhaps the biggest selling point with responsive Web design is that it works well for all browser sizes, and adjusts with none of the "snapping" when size is adjusted. Instead, media queries allow seamless transition from one size to another, whether this means switching devices or scaling a browser window. However, responsive designs must outfit the mobile device with a full arsenal of media sizes and necessary code, which is admittedly cumbersome, but no more so than adaptive development.
Where Adaptive Meets Responsive: Design and Development
Both design approaches have their benefits. While adaptive uses preset sizes and minimizes a lot of the work in making sites viewable at any size, responsive uses fluid grids to ensure beautiful layouts at any size. Commonly, designers will produce adaptive designs and leave it to the developer to turn these into responsive layouts. This is a great approach, giving the developer hints as to what the site should look like at any size, but it points to a need for designers who understand the limitations of development.
Adaptive design, in other words, provides an excellent framework for what will become responsive development. Designers and developers who work hard to understand the demands of everyone's jobs will likely produce the highest quality, most beautiful responsive websites for their clients. By meeting halfway, they will bring the best of both adaptive and responsive to the table.
Brian Crucitti is a front-end Web engineer at Vokal Interactive. As a front-end Web engineer at Vokal, Brian Crucitti builds and optimizes websites for limitless access across mobile and desktop platforms. Vokal is also home to many Mobile and Digital Experience Careers.
