Adaptive vs. Responsive design – what is best?

June 18, 2015 - 8 minutes read

What is the best way to develop “mobile learning?” What is the difference between “adaptive” and “responsive” design, and how does this impact the design of the learning, the end-user experience, and ensuring a good learning outcome?

In this blog post we will try to make sense of this ever changing landscape, but because it is ever changing, the following should be noted: As technologies change it will improve the ability to deliver true “create once, deploy everywhere” courses that offer both a good technical and a good instructional design solution. Therefore this is simply a snapshot of the market today.



Both adaptive and responsive designs actually have similar goals, but the approaches are different. This is as true in web design, the origin of this concept, as with e-learning design too.

With mobile devices, tablets, and similar gadgets gaining ground faster than most organisations can keep up, it forces organisational stakeholders to address the issues encompassing user interactions and user design with regards to the delivery of their courses on the latest devices. But where do they start? What is the difference between adaptive and responsive design and which one is better suited to the needs, budgets and goals of the project?

The difference between Adaptive and Responsive design:

The primary difference between the two approaches is in regards to how they handle content on screen. The quick definition of a responsive design is that it will fluidly change and respond to fit any screen or device size, whereas the quick definition of an adaptive design is that it will change to fit a predetermined set of screen and device sizes. But what does that actually mean?

Responsive design:

Wikipedia describes it as “an approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).” This is done by using fluid grids, which is a term for a design that works no matter what the screen size is. So no matter how much you resize the screen, that same layout will automatically respond to that size, like a single ball growing or shrinking to fit through several different hoops.

Adaptive design:

Adaptive Design is different from Responsive Design in that there isn’t one layout that always changes. Instead, there are several distinct layouts for multiple screen sizes, and the layout used depends on the screen size used. For example, there could be a specific layout for mobile phones, tablets, and desktop computers – each of which are made in advance. These three designs wait on standby until someone visits the site; the site detects the type of device used, and delivers the pre-set layout for that device. So instead of a single ball going through several different-sized hoops, you have several different balls to use depending on the hoop size.


So which one is best for my project?

Well that’s a very good question and there is not really any one good answer. There are communities of people out there working on solutions today that solve the mobile learning challenge through one or even a combination of responsive and adaptive design approaches. So it is technically possible to create elearning once and for it to work on all device sizes today, in fact it is reasonably easy to do so.

But how about the end-user experience? Can you reasonably expect a user to see everything on a PC/Tablet sized screen and on a smartphone in exactly the same way? What if you wanted to watch a video and alongside it have a summary of the key takeaways flash up on the screen?

You cannot offer this when using all types of smartphones so this is why some people view smart phones as more a performance support tool when building training courses. But this also has its problems as it assumes everyone has a PC or tablet to start with. And this is before you consider developing countries who are now skipping PC’s altogether and their first internet experience is on a smartphone. They say necessity is the mother of all inventions and if you have never experienced in PC and all you have is a smartphone then maybe it is OK to view a 30 minute e-learning course on it?

To get an idea of how complicated this could be, you also have another consideration: The subject matter! Perhaps there are some subject areas that are better conducive to either a responsive or adaptive design but which ones?

Final thoughts

At Gavisus we work with our clients to better understand their target audience and the learning goals, and then suggest the best use of technology married with instructional design to deliver against your learning goals. And we use both responsive and adaptive designs, and sometimes both at the same time!

Generally speaking, it is safe to say that you should view a tablet screen and a PC screen as one and the same. When we make our courses this is what we do (responsive design). When it comes to our clients who also want a smartphone version however, then there are generally two options: a) dedicated smartphone course/app used as a performance support tool, or; b) Using adaptive design to make one single course.

There are costs differences, pedagogical differences, maintenance issues to consider over the lifetime of the content, the end-user experience, course design limitations, course size and therefore load times and many other factors to consider. So if you are considering making mobile courses and are not sure where to start? Call us and we will help you identify the right subjects to start with to ensure you deliver exceptional learning outcomes.