Web Design 101: Adaptive vs. Responsive Design

One of the hottest issues in web design and development this year is the debate between adaptive versus responsive design. The main dispute between the two subjects revolves around the difference in visual appearance and accessibility of information on various devices – i.e. standard desktop computer, tablets and mobile devices.

While this subject is nothing new in the design field, it has taken on a fresh approach because of the opportunities mobile computing has for the future.

“Trends and devices seem to influence this industry more than any other field of design,” says Jennifer Ayotte, School of Design dean at Rasmussen College. “But when you boil away all the fat, you are left with the meat and bones of what we consider ‘good’: structurally sound, long-lasting, aesthetically pleasing sites that are not only professional and accessible, but also practical.”

In an effort to help you make an informed decision about the usefulness of adaptive versus responsive design, we outlined the differences between the two techniques below.

adaptivevsresponsive

Adaptive web design

The term adaptive web design (AWD) was coined by author Aaron Gustafson, who wrote a book of the same name about the topic. Put simply, AWD uses the components of progressive enhancement (PE) to define design methods that focus on the user, not the browser. Additionally, PE is a powerful methodology for web developers who are building websites – it’s the principle of starting with a firm foundation and adding enhancements on top of it.

Think of PE as an older home that has a great foundation, but if it was given a few remodels, it would shine brightly compared to homes that haven’t had the remodel.  

There are three different layers to the PE method that make up the adaptive approach.

“AWD is the practice of looking up information and deciding whether to apply certain CSS classes or not,” says A. Litsa, lead mobile user experience designer at Bazaarvoice. “Javascript libraries like Modernizr detect whether the browser recognizes CSS3 and HTML5 so that you can omit or include new, modern markup. This is great for fine-tuning or adding some extra layers of fancy.”

Remember the basic idea of adaptive web design is about browser (use) features. It’s about creating an optimal user experience regardless of which device you use.

Responsive web design

The term, responsive web design (RWD) was coined by web designer and developer, Ethan Marcotte. In a 2010 article for tech blog “A List Apart” Marcotte explains the technique for the extension of progressive enhancement for mobile in an efficient and practical way – meaning, media inquiries and conditional CSS can be used to create flexible and fluid layouts for any screen.

Put simply, responsive web design is about browser sizes. It’s concerned with layout, hierarchy and creating an optimal reading experience regardless of device.

Three examples of great RWD include:

  • Disney: Notice how the biggest Disney stars change across all screen sizes and even if you resize your browser – they’re always with you!
  • The Next Web: See how your screen on your iPhone translates seamlessly to showcase the same information on your desktop computer? This site has been designed for multiple platforms.
  • The Boston Globe: Of particular note is how well organized this site is for several technological mediums. The ease of finding the biggest news of the day translates beautifully no matter what display you are using.

If you’re interested in other examples of RWD, check out this blog post that highlights the “50 best responsive websites of 2013.”

These sites are dominating the landscape of web design right now by replacing old-school designs that are typically only formatted for desktop computers. Responsive sites tend to be pleasing to the human eye because they are designed for mobile computing.

Comparisons and distinctions

The biggest similarity between the two types of web design is that they both allow websites to be viewed on mobile devices and in various screen sizes, which ultimately gives visitors a better user experience.

TechRepublic author Ryan Boudreax summarizes the crux of these two web cousins in an April 2013 blog post.  

“The distilled definition of a responsive web design is that it will fluidly change and respond to fit any screen or device size,” Boudreax writes. “The condensed definition of an adaptive design is that it will change to fit a predetermined set of screen and device sizes.”

Whereas, AWD relies on predefined screen sizes, RWD relies on flexible and fluid grids. Think of the examples of Disney, The Next Web and The Boston Globe as listed above for examples of RWD. As for AWD, take Epicurious for example – AWD detects a user’s devices before loading the webpage, it then delivers the best version of the site for that device whether it be a desktop, tablet or smartphone.

“While [RWD] is becoming commonplace now, many companies do not have the resources, skills, or manpower yet to bring it onboard,” Ayotte says. “The foundation of each design varies between the familiar HTML and CSS territory to scripting languages, so depending upon what a designer’s comfort level and expertise is he or she may gravitate towards one method over the other.”

The verdict

If you choose RWD, know that you need to have a strategy behind designing for mobile constraints – don’t assume that a site will default when accessed from a desktop.

If you choose AWD, know that it can allow further optimization for the mobile and tablet experience because of the extra features like location and touch gestures.

There’s a larger point too that there are technical differences between the two designs. For publishers, technical differences aren’t the point – there is a goal to ensure content is optimized for audiences no matter what the device they are using.

Because there is a distinct difference between the two practices of web design, as a web designer, you should have a clear and strong understanding of both sides of the story. You should have these skills not only be relevant in the industry, but also to stand out amongst your competition.

If you want more information about the design industry, topics in design or ideas for future projects, be sure to take a look at the School of Design blog and follow the top designers on Twitter for more discussion on the hottest topics in web design!

External links provided on Rasmussen.edu are for reference only. Rasmussen College does not guarantee, approve, control, or specifically endorse the information or products available on websites linked to, and is not endorsed by website owners, authors and/or organizations referenced.

Kendall Bird is an Online Community Specialist for Rasmussen College. With her Bachelor’s degree in public relations and a passion for social media, she enjoys writing motivating and enthusiastic blog content to encourage future, current and former students to learn more about their discipline of study. Kendall’s ultimate goal is to generate a positive community through blogging to promote learning and change lives.

comments powered by Disqus
Share Your Story Ideas
Our campuses and online community have stories to tell and we want to hear them! Did your campus raise the most money in the community for an organization? Do you have online study tips for other students? Would you like to share a personal success story about overcoming an obstacle while earning your degree?
To have your story idea considered:
  • You must be a faculty member, current student or graduate
  • Story ideas must be regarding Rasmussen College or an inspiring story about a student at Rasmussen College
  • Your submission must be original and may not have been published elsewhere online already
Please Note: Your story idea may be featured on the Rasmussen College News Beat or on one of our social networks. A member of our news team will contact you should we move forward with a blog post.
Feel free to suggest an idea for a blog post to be featured on the Rasmussen College News Beat by filling out the form below:

First Name: (required)

Last Name: (required)

Email Address: (required)

Phone Number: (required)

500 characters or less

close

Your Story Idea Has Been Submitted

Thank you for sending us a story idea! We’re reviewing submissions and may contact you soon to learn more about your story. In the meantime, make sure to check out our current blogs to see what’s happening on campus.

close