February 25, 2014

Responsive vs. Adaptive Web Design?

Learn more about this and other thoughtful insights on responsive design from Ryan Evans, Corey’s long time Director of Experience Design.

Corey: We seem to be at an interesting juncture when it comes to digital brands. So many organizations have heard that their web presence needs to be “Responsive,” yet so few understand what that means, or why it’s important. How did we arrive here?
Ryan: I think it’s easier to understand if we understand that Responsive Web Design (RWD) was developed to solve a problem; the problem that occurs when a website needs to be accessed on a variety of devices, each with a different screen size. Users access the web with everything from large desktop monitors to the small, sleek screens of their mobile phones. Yet they have an expectation that they should be able to view and interact smoothly with their browser and websites, no matter what screen they’re on.

But we’ve been contending with mobile web access for several years now. Why RWD, and why now?
Initially, the solution was to create two versions of each website; one for laptop/desktop users and one for smartphone users. The outcome was fine for users. Their overall experience with these sites was good, regardless of the device they were using. The outcome for the site owner? Not so good. The cost to develop and support two sites is comparatively high. And the design and development process is just what you might expect: Cumbersome. Two sets of content, two sets of graphics, two layouts – it was clearly inefficient, even when it was the only solution.

It certainly sounds inefficient. Are there other reasons behind the development of Responsive Web Design?
Many of these sites are still up and running. The difficulty lies in the fact that new devices, with new screen sizes, or ‘viewports,’ are released every day. The two traditional, fixed-width layouts can’t adapt to new viewports, so the probability is that they won’t not display properly on all devices. Responsive web design solves for these issues and provides a more flexible, elegant alternative

So flexibility is the advantage of RWD?
Yes. It allows us to design once for all devices, including those that aren’t released yet.

How does it do that?
It’s pretty straight forward. There are two parts to responsive design: Fluid [or Liquid] Layouts and Breakpoints.

Fluid layouts use elements that resize and rearrange content based on the size of the viewport, using a simple set of rules; much like the way that text will wrap differently in Microsoft Word when you change the margins of a document. All of the elements of a page can react fluidly: type, photographs, videos, graphic elements, containers – everything.

Breakpoints allow you to define simple display rules that kick in when the browser viewport is above or below a certain size. An example of a display rule might be, increase type size when the screen is larger than 600px, display lower resolution images when the screen is smaller than 480 pixels and hide design elements, on smaller screens — in other words, on a mobile device where bandwidth is expensive,

So, what do website owners need to understand about the design process?
Every project is different, but usually thinking about mobile first will help focus the design process. We have to think about hierarchy of content, readability, and what is most important on the page. By attacking the difficult mobile design problem first, the desktop and other viewport sized designs become easier.

Using clickable HTML wireframes becomes even more important so that you can judge the correct amount of content, appropriate breakpoints, etc. as you plan your design.

What special considerations are there for content development?
In a responsive world, not all content is appropriate for every device. For example, high resolution images and videos aren’t typically appropriate for mobile, where bandwidth is expensive and slow. By the same token, collapsed navigation structures may not be appropriate for desktops where there is plenty of room to display all of the options. Content order is also a consideration, because smaller browsers are more linear. Think about scrolling through a webpage on your phone. It’s necessary to put more thought into how content is ordered than on a desktop viewport, where we commonly have 2, 3, 4, or even more side-by-side columns of content.

What other factors in User Experience are important?
Of course, we make decisions about content types, content order, and navigational structures based on viewport size. In addition, through user research we’ve found that use cases and user goals vary from viewport to viewport. Users typically focus on a very different set of tasks on their laptop than they do on their mobile devices.

A good example of this is the responsive website we recently launched for Cardozo Law School. In the design, we used breakpoints to make the links for maps and directions, as well as the faculty/staff directory more prominent for mobile-sized viewports. We did this because we knew that the most common use cases for mobile included driving directions and calling/emailing school faculty and staff.

Are there alternative approaches to using responsive design, such as Adaptive Web Design? Are there times when they’re a better solution?
Well, everyone has heard about one alternative: mobile apps. Apps are most appropriate when the use cases and user base are dramatically different or more narrowly focused for mobile web access than they are for desktop web access. These require separate development effort, as well as separate maintenance and content updates. Some organizations use them as a stop gap measure while they are building their responsive sites.

Another is Adaptive Web Design (AWD). AWD is similar to Responsive, in that the UX is designed to adapt to the viewport being used. But, instead of a single website that adapts to all viewports, AWD only furnishes the elements of a web page that the user needs on a mobile device. When the server detects a specific size viewport, it furnishes only that content needed for the screen size. This approach is less flexible than Responsive Design, but some consider the user experience better than RWD.

Other than an experienced Responsive Design team, what aspect of the design and development process have you found to be most essential to creating a successful web site?

Collaboration. Collaboration between designers, content creators and implementers becomes even more important because of all of the factors we’ve discussed. Designers need to understand the technical constraints. Content creators need to think about how content adapts to devices. Implementers need to understand design intent, because they won’t be supplied with every different possible layout. If all the stakeholders understand how these components need to work together, the resulting website will perform well on all devices and the user and customer experience will be consistently good. And that’s really the best possible outcome.

Questions for Ryan? Comments? Let us know. Please drop us an email or leave a comment/question below.

Ryan Evans is Director of Experience Design at Corey McPherson Nash. At the MIT Media Lab, where everybody is expected to invent a better future, Ryan developed a passion for how people use the web. He also earned his MS in Media Arts and Sciences, and his BS in Computer Science and Engineering while there. Today, Ryan helps us consistently reach and reset user experience goals. His wealth of experience means he’s thought about every user’s experience from every possible angle.

Latest Tweets