These two terms are used interchangeably even though they are not the same thing. While Adaptive and Responsive design may have very similar goals, their approaches are different.

Adaptive

Adaptive design is server-side, meaning the images are optimized for specific screen resolutions before the page is even delivered. The server distinguishes what kind of device is accessing the site and loads the preset layout based on that device. A key component here is that it loads a preset and predefined layout; think of the different layouts for a laptop vs a smartphone, or a smartphone vs a tablet.

With adaptive design, the server hosting the website detects the devices making requests to it, and uses this information to deliver different batches of HTML and CSS code based on the characteristics of the device that have been detected.[1]

Typically, adaptive websites have faster load time and overall user experience. For example, when a high-density retina display is detected, high-resolution images are transferred and used instead of defaulting to high-resolution images for everyone. Adaptive design is frequently the most cost efficient option.

Responsive

Responsive design is client-side, meaning the whole page is delivered to the device browser (the client), and the browser then changes how the page appears in relation to the dimensions of the browser window. In less techie terms, a responsive design doesn’t care how many people access the information; it will respond by re-sizing and reformatting to show content clearly and maintain its full functionality.  “Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries.  The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.” [2]

Taken directly from Google “Responsive web design” or RWD means that the page uses the same URL and the same code whether the user is on a desktop computer, tablet, or mobile phone – only the display adjusts or “responds” according to the screen size. Google recommends using RWD over other design patterns. One of the benefits of RWD is that you’ll only need to maintain one version of your site instead of two (i.e., you won’t need to maintain the desktop site at www.example.com and the mobile version at m.example.com – you’ll maintain only one site, such as www.example.com, for desktop and mobile visitors).” [3]

I hope this helps clarify the difference between Adaptive and Responsive Design.  Remember that responsive design is client-side and will provide an ideal experience regardless of what device they view the content on. Adaptive design is server-side and you develop layouts for a few devices rather than for all.

References:

[1] http://venturebeat.com/2013/11/19/responsive-design-adaptive/

[2] http://whatis.techtarget.com/definition/responsive-design

[3] https://developers.google.com/webmasters/mobile-sites/get-started/key

Share Article
Never miss an update ✌️

subscribe via RSS


You Might Also Enjoy:

Back to Basics: Instructional Design Terminology
Back to Basics: Instructional Design Terminology
This week, we wanted to cover some common terms that you are bound to hear in almost instructional design setting. This list isn’t meant to be all inclusive, but it’s a great starting point to give you the initial vocabulary...
Back to Basics: Different Types of Learning Delivery
Back to Basics: Different Types of Learning Delivery
When analyzing your audience and determining learning goals, don’t forget about your delivery strategy. How you are going to deliver the course? Do students need to be face-to-face with the instructors? Will learners have access to computers? What resources already...
Tips for Measuring Course Effectiveness and ROI
Tips for Measuring Course Effectiveness and ROI
How do you know if a course is working? Are your learners actually learning what they need to learn? To answer these questions, we’ll look at several ways you can measure the quality and effectiveness of the learning activities you...
7 Tips To Apply Microlearning In Online Training
7 Tips To Apply Microlearning In Online Training
From increasing knowledge retention to filling performance gaps in a fraction of the time, microlearning offers a variety of different benefits. In this article, I’ll share 7 tips that can help you take advantage of microlearning in your online training...