Responsive design using elearning authoring tools

Aug 14, 2019

Overview

In today’s world of evolving workplace with smartphones and tablets, it is necessary for the content provider to deliver a course that automatically adapts to a wide variety of devices. Making elearning course smart enough to cater to all these devices requires a responsive design approach.  Responsive design can be achieved via different ways and multiple elearning authoring tools. Every authoring tool available in the market handles responsive design in its own way. Let’s have a quick look at the different design approaches that turns your course mobile friendly.

Scalable Approach

Scalable approach exists from Adobe Flash days. In this approach, the entire content shrinks to the device size making overall page available at once.  This approach is not mobile friendly as it squeezes content to device viewport size. Users need to pan and zoom to interact with different sections of the page.   Scalable approach is recommended only if you are designing course for desktop, laptop and tablet to some extent. Articulate Storyline, Adobe Captivate (Non scalable mode) and Lectora can be used to get the job done.

Scalable with Responsive player

As the name suggests, it is an enhancement to the earlier scalable approach. In this approach, the course player and its controls fluidly respond to screen size and orientation of any mobile device for the best viewing experience. However, your content container still follows the scalable approach.  Responsive player improves ease of access, however, the user still needs to zoom in certain areas to view the content on mobile devices.  This approach is recommended  if you are designing course for desktop, laptop, tablet and mobile phone to some extent. Articulate Storyline 360  can be used to achieve this behaviour.

Responsive Breakpoints

Responsive breakpoints allows you to realign the layout of the course on different device width catering to a wide variety of devices, from the latest and greatest smartphones to traditional desktop computers. This approach is suitable for mobile first design but it requires course authors to tweak slides for every device the learner will use, which will impact the overall production effort. Adobe Captivate 2019 has tried its best to automate the process with fluid boxes. Go for this approach if you want an output that fits on desktop to mobile devices.  Recommended tool is Adobe Captivate 2019 and Lectora 18.

Responsive Templates

Most authors love this approach as it uses predefined responsive templates to achieve responsive design. You only need to focus on content, rest is all handled by the templates. This approach is suitable for rapid development of content that demands mobile first design. The only drawback of this approach is customization constraint. It will be difficult to achieve the design if you don’t have a template for it. Articulate Rise is the best option to go for.

Leave a Reply

avatar
  Subscribe  
Notify of
Let's talk
Request a demo