Calgary, AB -- (SBWire) -- 10/21/2014 --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.
“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!
About Red Cherry
We are a digital marketing and software agency that stands out from all other agencies. Our team of talented and creative individuals work closely with you to deliver rich and engaging solutions that drive qualified traffic to your website and convert that traffic into sales. Red Cherry has offices in both Kelowna, BC and Calgary, AB. We work closely with you to develop a comprehensive digital marketing campaign for Facebook, Google, Twitter, Remarketing (largest ad network), Pay Per Click, SEO, and more. Providing website design in Calgary for over 10 years.
We are also a full scale software development firm specializing in web development and apps development.
Let's chat +1 888 401 6668 or visit http://www.redcherryinc.ca/
