Responsive and Adaptive Design

Both terms have a very similar objective. They seek to provide the best possible experience on a single website when it’s viewed on a multitude of desktop, mobile, tablet devices.

Ethan Marcote is widely cited as coining the term Responsive Design which is the use media queries to serve different CSS allowing a site to change it’s appearance when viewed on different size screens. So in short it can be accomplished with just plain HTML & CSS. (These days it’s usually HTML5/CSS3, but it’s not required)

Adaptive Design is the title of the book by Aaron Gustafson so I’m guessing he’s recognized as on an authority of term. He sites adaptive design as including the CSS media queries of Responsive Design, but also adding Javascript based enhancements to change the site’s HTML markup based off the capabilities of the device. This is also called “Progressive Enhancement”

An example is you might have a side bar navigation on the desktop size version of the site, and then when viewed on a smartphone the menu becomes a select list to save space in the interface. Another example is you might offer functionally on mobile device not available on a desktop. Say you had a restaurant website — When it’s viewed on a mobile device that’s location aware with GPS, a panel appears saying “Get directions to our restaurant from your location”. Desktops don’t know their location so it doesn’t appear to them.

Responsive Web Design (RWD)

The key elements that make up a Responsive website are CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation. It is also fundamental to use flexible images, flexible videos, fluid type and EM’s instead of pixels. All of these key points allow the responsive website to modify its layout to suit the device.

Responsive design is client-side which means the page is sent to the device browser (the client), and the browser then modifies the appearance of the page in relation to the size of the browser window.

The definition of a responsive website is that it will fluidly alter its composition to improve the accessibility of content depending on the screen size of the browser window.

Adaptive Web Design (AWD)

Adaptive web design uses predefined layouts that have been carefully constructed for a variety of screen sizes. A particular layout is activated when the screen size of the device viewing the website is detected and matched with a style sheet.

Adaptive design is predominantly server side. This means that the web server does all of the work of detecting the various devices and loading the correct style sheet depending on the attributes of the device. As well as the layout changing depending on the size of the screen they can also change depending on conditions like whether the device has a retina display or not.

The server can detect this and display high quality images for retina display devices like iPads and lower quality images for standard-definition displays.
The downsides to AWD are that initial construction is very costly as you have a lot of layouts to design. Also to maintain and update all of these layouts can be very time consuming which will therefore cost a lot of money.

The definition of an adaptive website is one that has a set of predefined layouts that are activated when best suited to the device detected by the server.

Similarities and differences

The obvious similarity of both methods is that they improve accessibility of website content on mobile devices and various screen sizes. They also both provide visitors with an enhanced mobile-friendly user experience.

They are different in the way that they deliver the responsive / adaptive design to the user. RWD is dependent on fluid grids and AWD is relying on predefined size layouts. Also the fact that they either use client side or server side is another way in which they differ.

The advantages of Responsive Design:

1. User-friendly and flexible on different screen resolutions.

2. Unified visual and operational experience on multi-terminal, with low cost spent on maintenance.

3. SEO friendly and there is no page version distinction, keeping the SEO strategy consistent.

4. The connection between mobile and desktop sites can be completed without redirection.

The advantages of Adaptive Design:

1. Compatible even with some complicated site.

2. It can be implemented at a lower price.

3. Coding will be much time-efficient.

4. Testing will be much easier and operation can be relatively more accurate.

Should I Use Adaptive or Responsive Design?

Tallying up the score, responsive web design is almost always the safer option to go with for your site. It always functions well regardless of what new screen sizes come and go, improves loading times, and is usually well worth the extra effort in putting it together.

However, for some sites, adaptive may be a better option. These would likely be newer, smaller websites that are just starting out and need to preserve their resources. An adaptive site is easier to create, and the smaller size and audience would keep the slower load times or lower flexibility from being an issue.

Quick tips for designers:

  • Invite your developers into the conversation as early as possible. Discuss coding restrictions and align your visions for the project.
  • Determine the differences and similarities between page elements and develop common patterns for page templates. This approach will save time and give a consistent feel to the site.
  • When designing adaptive, design for these six common screen widths: 320, 480, 760, 960, 1200 and 1600.
  • Provide your developer with a style guide like this one along with your PSD’s.
  • Be available for QA or an initial walk-thru of the coded files to ensure that each page renders as you had envisioned.
  • Media queries do not work in Internet Explorer 8 and below. Use a Javascript polyfill like CSS3-MediaQueries.js to support media queries in old legacy browsers. Consider though that polyfills can add to the file size and that Javascript can be turned off by users.
  • For flexible grid layouts in Responsive design use ems or percentages. Avoid fixed widths.
  • In responsive design, use max-width:100% to make images, videos and HTML5 canvas scalable. As the viewports get smaller any media will scale down according to its container width. However, max-width does not work with embedded media. Check out this article for the work-around provided by A List Apart.
  • Keep in constant communication with your designer. If you’re confused, ask now so you don’t have to fix anything later.
I hope this article helped you to clear the cutter and made you clear when to use one and how to deal with it. If thats the case dont forget to share this and Clap…Clap… as this motivates me to write on stuff like this which matters :) #Spreadknowledge