What is adaptive design? What is responsive design? In this brief overview we go over the differences and why we're building an adaptive site in Axure.
- [Instructor] Alright, let's talk about adaptive versus responsive design. Axure doesn't currently offer a tool that's responsive, so instead we're building a prototype that's adaptive. So, what's the difference? Simply put, responsive is fluid and adapts to the size of screen no matter the target device. It uses CSS media queries based on percentage to change styles based on target devices, such as the display type, width, height, et cetera. And only one is necessary for the site to adapt.
However, adaptive uses static layouts based on breakpoints, which don't respond once they are initially loaded. Adaptive works to detect screen size and load the appropriate layout to a common width, such as 360, 480, 760, 960, 1200, and 1800. While it may not matter for the purposes of prototyping in Axure, it's important to know the difference when you go to code your site. In order to give you examples of the differences between a responsive and adaptive site, let's take a look at Virgin America, and then we'll take a look at Home Depot.
Virgin America is a responsive site, so any time we resize our browser from desktop to mobile, you'll notice that the page automatically adapts and changes, including and certainly not limited to the changes in the navigation, which is showing Check In and Manage, so the key items you're going to need when you're on your mobile phone. Changing the navigation, so if we go back to desktop, you'll see that all the options that we were seeing in the hamburger menu are now across the top.
If we scroll down, you also notice that the form fields for Where would you like to go? have stacked on top of each other. This is all spread out. So, if we go back to mobile, see there's our stacking, and then we also have the carousels happening here for the items as well as these other modules here that are stacking into a carousel. And then again if we expand back out, you'll note that the carousel disappears.
So you can see that no matter where you are in terms of the size of your screen, the Virgin America site automatically adapts to us. Home Depot is an adaptive site. Note that we have the navigation across the top. Our search box, we have more navigation here, as well as log in, Cart, and then a big banner image, some items that they're trying to highlight and sell. So, let's go ahead and shrink to tablet, and you already started to notice some change.
We've got the hamburger menu with all of our options. We still have a lot of the same structure for the page here. But, then if we go down to mobile, you notice that all of a sudden, it's like mobile doesn't exist and everything's falling off the side of the page. So in order to get a mobile experience on the Home Depot site, you actually have to put in m.homedepot.com in order to get their mobile site. And then you notice it's almost entirely different from their website.
Where you get the hamburger button, you still have the same types of navigation. We have our cart, which of course is currently empty. We have search here, and we have a locator in order to find a store. But essentially, your site is adapting based on breakpoints, as opposed to adapting based on the size of your browser. In order to learn more information about responsive versus adaptive and drill down deeper, you can go to this UXPin article called Responsive vs. Adaptive Design: What's the Best Choice for Designers? and that'll help you to get clear on the strategy you need for you and/or your clients.
And that's a brief overview of adaptive versus responsive design.
- Using widgets
- Setting up interactions
- Building an adaptive page
- Styling pages and widgets
- Creating forms
- Adding text fields, dropdowns, and check boxes
- Hiding and showing menus
- Creating carousels