The terms responsive web design and adaptive web design are often interchanged. While these two constructs are similar, the differences are important to understand.
Why Do we Need adaptive or Responsive web design? The web is rapidly trending towards mobile devices. Smart phones and table usage is growing every year. Mobile Will Force Desktop Into Its Twilight In 2014 This trend suggests that if your site or application is not mobile friendly it will falter to the competition.
Why it matters: In order for web sites and applications to reach users on mobile devices, it is important that your web site properly scales with mobile phones and handheld devices. Forcing users to ‘pinch and zoom’ rapidly diminishes the user experience. Sites that are optimized for mobile are more likely to retain users. How to fix: Both responsive design and adaptive design use cascading style sheets (CSS) to deliver styling to mobile and hand-held devices that mimic the look and feel of a native mobile app which you would find in the Apple App Store or Google Play. CSS determines the width of the user’s screen and delivers the appropriate styling. So — instead of users being forced to pinch and zoom, elements on the page appear at a more appropriate size and position.
The Difference: Adaptive design targets a specific width tailored for specific devices. Therefore, when the width of your device (such as an iPhone) is 320 pixels wide, your website will be exactly 320 pixels wide and ‘snap’ into place. A site could have multiple breakpoints, small phone, large phone, small tablet, large tablet, laptop, desktop, large desktop.
Responsive sites respond to devices of all widths. Different objects on the page rearrange in response to the users viewport width. This gives fully responsive sites a more organic feel and the ability to truly work across all devices. The responsive approach is what I recommend for all sites.