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.
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.
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.
“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.”
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!