Responsive Vs Adaptive Design for eLearning

 Responsive Vs Adaptive Design for eLearning

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?

Author:
Hands-on, dynamic and energetic executive, Amol has a multi-year experience in diverse technology industries and functions, in both Sales and Marketing and Operations. Engineer by graduate and an MBA professional, he started his career in 2004 as a Regional Sales Manager for one of the largest US MNC based out of India continues to live his passion for sales till date. Currently an eLearning and LMS consultant and & Board Member of Knowzies Technology Solutions, his responsibility is to manage the company's growth in the Americas, India and APAC, and encourage its Global expansion through his network of 1000+ qualified Elearning and SaaS experts. Amol is a serial blogger and a have delivered many webinar’s in his past engagements. He likes to write largely about latest eLearning technology trends, mobile learning, and learning technologies. His passion for eLearning makes him the perfect blend for designing solutions for large enterprises especially where the cost is the constraint. Prior to his current venture, Amol had a blast leading the International Business Operations for various leading LMS and eLearning organisations globally. Amol successfully managed a talented pool of professionals and partner companies (Channel network implementation) enabling the acquisition of many leading enterprises. A solid credo in business ethics and knowledge sharing are its key business drivers. He is what the Urban Dictionary would call a straight shooter, enjoys playing cards on the table and doesn't deal with fuss. Big in creating new connections and value to its network (because the network is quite everything), he is hungry for innovation and falls in love for true out-of-the-box thinkers. Cricket and food are superior passions. Loves the family and is blessed with two happening daughters and a caring wife. Over weekends you will find him in kitchen experimenting with new dishes. In case of any queries, you can reach to him on amol@knowzies.com.

Leave a Reply

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