PortfolioMenu

 Responsive Vs Adaptive Design for eLearning

Share in

Years ago when eLearning first gained traction, it was basically just learning delivered on desktops. Over the years the modes of delivery changed and at present it covers everything from computers to smartwatches and more. An evident difference among those devices being the screen sizes. With this, what really changes with respect to eLearning?

eLearning content or the way it is rendered. This is where the design styles enter.

The terms Responsive and Adaptive design originated from the web design point of view and stand for two different ways of rendering the content on different devices/screen sizes. And this gradually transcended to eLearning too. And subsequently gave birth to the age old debate on which is better. Before answering that, we ought to really know how these differ or rather how the designs work.  

To begin with both these designs work on the basis of ‘breakpoints’- now in purely programming terms it has something to do with code breaks, however in this case it is nothing but the  different screen sizes identified initially, across which the learning content is delivered. Each size here, is a breakpoint based on which the content responds/adapts to provide the user with the best possible layout.

Responsive Design

Ethan Marcotte coined the term responsive web design- in a May 2010 article in ‘A List Apart’. According to Wikipedia, “Responsive web design (RWD) is an approach to web design, where the content adjusts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the media rule aimed at allowing desktop webpages to be viewed in response to the size of the device one is viewing with.”

Well, for a layman’s understanding Responsive design is just like water-based on the container (in this case device), the content reflows to fit the screen and how does it do that? Through scripting/coding. The design involves defining specific breakpoints based on which the content restructures itself.

For instance what you may see as a three column structure on desktops, becomes two column structure on tablets and one continuous column on mobile devices- all determined by the codes that run in the background.

Adaptive Design

The term Adaptive Web Design was coined by Aaron Gustafson in 2011. Adaptive design uses the components of Progressive enhancement. Basically it uses different pre-designed layouts for different screens, along with CSS and JavaScript.

So, if we have say six different screen sizes to cater to, then in adaptive design it means creating six Content layers, presentation layers and also device specific script. When someone accesses the course the designs are in standby, and once the device size or in other terms the ‘breakpoint’ is determined- the pre-set design for that device is fetched and delivered.

In layman terms, Adaptive design is what we would call ‘ice’. For ice to fit into different containers properly, it has to be solidified that way, or cut into shape- which is precisely what is being done when we talk about creating the pre-designed content layers in adaptive design.

With the basic definitions in place, here’s a quick comparison table in terms of design, modification efforts and finally the content delivery.

  Responsive Design Adaptive Design
Design Initial coding definitely needs more care and attention in order to ensure that the content fits each and every screen that accesses it. Initial design involves creating different content layouts, and also develop and maintain separate HTML and CSS code for each layout.
Modification Basic modification in single source code and content. More complex since it’s likely that you’ll have to recreate the layouts, and check that everything else works too at the time of implementation.
Content Rendering As it actually shuffles the content around in order to fluidly fit the device window, we need to pay attention to the order in which content is displayed- or else you may end up having content with no meaning. It gives us the discretion to decide how the content will be displayed and as the designs are custom made enhancements can be done accordingly.

Well, that explains the basic mechanics of how the design styles function. And we know that both designs are capable of delivering optimum output on devices of different sizes. But which design to use, depends on various factors, including the content being delivered and various other parameters, but primarily its target audience. So, once you know who they are, and what devices they are likely to use, then the layout to be chosen will come right in based on the type of content.

So, what would you choose-  Responsive Design or Adaptive Design?

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe With Us

Knowzies Voice
Let’s connect and spread knowledge together
Recent Posts
July 2, 2020
Why Microlearning And Mobile Learning Is an Essential Combination in Today’s Age For L&D

In a modern world driven by app-based technologies and workplace applications, mobile is an essential device. A Deloitte report states that “consumers today check their

Read More
June 25, 2020
Importance of eLearning in Remote On-boarding of Employees

eLearning is important for remote onboarding. Instead of going the traditional way of listing out the importance, what if we use a scenario instead?

Read More
June 17, 2020
Re-Evaluating Your eLearning Development Strategy in Wake of Pandemic - Key Tips

Almost half a year has gone by and individuals, organizations, families, institutes, and mankind as a whole has been finding ways to adapt to a situation that had never been foreseen.

Read More
June 3, 2020
Converting Heavy Text into e-Learning - Key Tips

In interesting research published under the title, “Don’t throw away your printed books: A meta-analysis on the effects of reading media on reading comprehension”, researchers from Spain and Israel discussed the screen inferiority effect

Read More
May 21, 2020
Key Tips for Rapid eLearning Video Development

Start. Action. Cut. Is that how you perceive video development? Well, can’t say that’s wrong as far as the popular concept of directing videos goes.

Read More
Recent Case Studies
December 19, 2020
Only Assessment Skill Assessment App

Knowzies Team developed a solution that consisted of a responsive web application with admin and user functionality. The admin can create assessments and assign those to users based on time and date. There are 6 different types of questions that can be created or bulk uploaded by the admin. This is a highly scalable architecture and is built to handle the load of as much as more than 5000 concurrent users. It had 4 types of users viz super admin, evaluator, and user.

Read More
December 17, 2020
On the cloud.io: SAAS Software Review Platform

Knowzies team offered a solution that consisted of a responsive web application that is available in 4 different languages- English, Spanish, Italian, and French. The main portal offered an excellent search facility to search the required product based on category, feature, pricing, country, etc. It also showed the latest trends in the industry and top 3 products based on the user’s reviews. It had 5 different types of modules like Main Page, Categories (further split into subcategories), market analysis and trends, and some useful resources.

Read More
December 14, 2020
Compliance Training App

Knowzies team created a solution that consisted of a responsive web application with multi-portal functionality. The main portal was integrated with the client’s website. An iOS, as well as an Android mobile app, is also part of the solution. It had 4 types of users viz super admin, master admin, sub-admin, and learner. Knowzies team adopted SCRUM methodology for managing this solution which was built across 8 sprints.

Read More
Knowzies is one of the leading eLearning development companies in the US. Let’s trigger a mind-blowing digital transformation in your organization!
© 2021
 All Rights Reserved
Privacy PolicySitemap
envelopecrossarrow-up linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram