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?
