With the number of mobile phone users in the world expected to pass the five billion mark by 2019 and with mobile devices accounting for 49.7 percent of web page views worldwide, it is evident that devices like smartphones, tablets etc will be the widely used medium to access the internet. These figures are a wake up call to the designers to focus more on designing content that can be best viewed on mobile devices, rather than focusing only on desktops and laptops.
This trend is not only limited to the websites and social media but has also made a substantial headway into the world of learning. So let us now understand what is responsive learning.
What is Responsive Learning ?
Before we understand the concept of responsive learning its essential to revisit the fundamentals by starting with responsive design.
The term “Responsive Design” was first coined by the web designer and developer Ethan Marcotte in his book, Responsive Web Design. In simplest terms, responsive design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation thus ensuring that users have an enjoyable user experience.
Taking a cue from responsive design, responsive learning is “One content multiple devices”, which means the ability of e-learning content to resize itself as per the device to give the learner a uniform and enjoyable learning experience.
Needless to say responsive learning offers the benefits of easy reading and navigation with minimum efforts from the learner like resizing , zooming, scrolling, thus giving a complete experience to the learners. For the organizations responsive e-learning saves a lot of time and cost involved in developing learning courses for different devices.
While we saw the benefits of responsive learning, it is not easy to implement the responsive design in e-learning correctly, if you don’t follow the three main principles which are-.
1.Fluid Grid Systems- A flexible, grid-based layout,
2.Fluid Image Use- Flexible images and media,
Let us now understand each of these principles briefly.
1.Fluid Grid systems
In fluid grids, the grid is divided into a specific number of columns to keep the layout clean and easy to handle.Instead of designing a layout based on rigid pixels, a fluid grid is more carefully designed in terms of proportions.
In fluid grid system, the designers’ then design each element with proportional widths and heights instead of pixel based dimensions.
So whenever the device or screen size is changed, elements will adjust their widths and heights by the specified proportions.
2.Fluid Image use
A flexible layout isn’t flexible when some of the component parts are fixed like the images and media. Images form an important part of every site or learning content and for a design to be responsive these images should be flexible which means that they should scale proportionately depending on the screen size of their display to fit the containers automatically.
Media queries provide a way of detecting the device dimensions and other physical properties, be it any device like smartphones, ipads or tablets the media queries would return with the screen size and then directs the fluid grids and flexible images to align appropriately to fit the device screen sizes.
These three principles are woven in together with the content, because in e-learning content is the ultimate king around which the entire design is centered.
However thanks to some popular rapid authoring tools like Elucidat, Gomo, Adapt, H5P, Articulate Rise, which have eased out the programming burden from the e-learning designers to offer responsive e-learning designs through a set of pre built templates.
With the modern day learners, who prefer to learn from mobile devices more than using desktops and laptops, responsive learning will be the chosen path in most of the organizations.