We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. View Privacy Policy
Published on:
February 5, 2021

Responsive Design: eLearning on Any Device

Responsive design is a feature that allows a website to fit on the screen of any device, including smartphones and tablets. Developers are keen on this especially because most people are using mobile devices. Hence, they develop websites that fit on any screen and still display all the information.

The term ‘responsive design’ was coined by Ethan Marcotte, a web designer. He described it as a web design feature that would optimize websites to be viewed on any device.

He proposed the idea that web designers should use responsive design to give an enhanced user experience. This would be achieved by preserving a website’s content and features regardless of the screen size or device.

In the early 2000s, there was an explosion of mobile device users. To serve this growing number of users, web developers had to create multiple versions of a website, copied from the original. These were created to serve mobile users with different devices.

Indeed, this approach was time-consuming and expensive considering the demand for mobile content was growing. As more devices were sold in the market, it became clear that a mobile-specific approach would not scale to serve the rising number of mobile users.

Responsive design is one of the most common elearning topics. For information on other popular elearning topics, visit this page.

Technically, responsiveness is a CSS3 specification that defines how web developers should resize, reposition, hide, or swap content for various screen sizes and resolutions. Hence, for responsive design, the hard work is left for the browser.

For instance, a web designer might specify that content should adjust from one column to two columns depending on the available pixels on a horizontal space. Therefore, such content can be viewed on a device with a narrow display such as a smartphone. Similarly, the same content would adapt to two columns on a device with a wider display such as a desktop computer.

Responsive design helps to address some of the challenges associated with delivering content to a variety of devices. The same concept is being used by elearning developers to create content that can be accessed by learners on multiple devices.

In elearning, however, there are challenges that arise when trying to develop responsive learning content.

Challenges in eLearning Responsive Design

Most web pages contain vertical scrollable content that is a mix of text, images, and videos. On the contrary, elearning content is slide-based and has a horizontal layout. It also relies on elements remaining in one fixed position relative to others.

eLearning slides contain text, images, videos, and media-rich interactions that prompt users to engage in a certain way.

In the case of normal web pages, responsive design works since the positioning of content does not matter. It would still make sense if content adjusted from two columns to one or if images repositioned to a different location on a screen.

However, this is not the case with elearning content. Slide-based content would become confusing if objects repositioned themselves or if they disappeared to accommodate some screen sizes. Therefore, for elearning content, the positioning of the elements must not change regardless of the screen size.

How then do elearning developers create content that fluidly adapts to various devices and screen sizes?

Some organizations have addressed this by ditching the slide-based model. Instead, they have adopted a web-style elearning format. This is similar to normal websites. Hence, they create micro-websites that can be scrolled in a vertical fashion.

Such content is made by web design tools. This means that despite being mobile-friendly, it does not have the same repositioning requirements as slide-based content.

The disadvantage of this approach is that such content is not made by elearning content authoring tools. Traditionally, creating elearning content meant that developers had to have web development tools and coding skills. They also required more time to create learning content.

Today’s elearning developers do not have to worry about that. So, what are the solutions?

Solutions to eLearning Responsive Design

The solution lies with systems that do all the hard work for eLearning developers. Specifically, course content developers use course authoring tools. They can opt for a third-party course authoring tool or a learning management system with inbuilt course authoring.

Course authoring tools use the same concept used by web developers to create responsive content. They are developed with features specifically tailored for elearning.

These tools allow developers to add text, images, videos, and other media to their courses. No coding or tweaking is required by the developers. Instead, they feature simple functions such as drag-and-drop to create mobile-friendly learning content.

Modern LMS platforms also have advanced course players that detect the type of devices being used and fluidly adapt to different screen sizes and resolutions. These course players maximize the screen content and hide other elements such as menus to create a mobile-friendly experience.

Importantly, a course player keeps the dimensions of a slide show just as it was designed. The elements of a slide show are kept in a fixed position, while the course player does the work of adapting to the user’s device.

In essence, the developers of the course authoring and course playing tools are the ones responsible for the coding and programming elements of a responsive design. Not the course developers.

Why is Responsive Design Important?

If organizations want learners to keep enrolling for their elearning courses, they should have responsive design in their minds. Currently, internet users are shifting from desktop computers to mobile devices. The advancements made in the field of mobile technology have made this shift possible. Also, the portability of mobile devices appeals to many users since they can access the internet on the go.

It has been reported that a typical mobile user interacts with their mobile phone about 2,617 times per day. The same users are also switching between devices depending on their locations.

Today’s learners also expect elearning content to be available on their mobile devices. In a 2016 survey, it was found out that 70% of learners used their mobile phones for elearning, while 52% used their tablets.

Responsive design is all about giving learners the freedom to choose what device they want for elearning. They expect to have such options and still have a smooth transition. Responsive design also helps to embrace newer technology. New devices with advanced features are being released each year. This concept ensures that learning content will work for all these devices.

How Responsive Design Works

While creating responsive elearning content, developers are aware of the fact that their users might switch devices. Indeed, most learners are on the move and this guarantees you as a content creator that your learners will access content on various devices.

In another case, despite some organizations providing computers for their learners, some learners prefer to bring their own devices for convenience.

With the introduction of elearning responsive design frameworks - that include course authoring and course playing tools - elearning developers can use HTML5 to create content that is accessible on various devices.

Open-source elearning software such as Adapt is an example of a solution that creates responsive course content. It does this by replacing the ‘next’ button on a slideshow with vertical scrolling. Thus, on a desktop, a user will see the slideshow horizontally as originally designed. However, on a mobile device, a learner will view images stacked vertically.

The content is, therefore, not lost. It is only cleverly arranged to suit different devices.

Tagging is another feature characteristic of responsive frameworks such as Adapt and CSS3. It ensures that mobile users are not overloaded with information by hiding elements such as decorative images. 

By hiding such content, the learner only has important elearning material displayed on the screen. Consequently, they are able to meet their learning objectives since there are no distractions.

Factors to Consider When Creating Responsive Courses

You should consider the following when incorporating responsive designs into your elearning courses:

Navigation menu: You should organize your content in such a way that the menu is straightforward and not confusing. For instance, if your learners spend too much time navigating the menu to find a specific section, the overall learning experience is affected.

Unnecessary elements: If you organize your screen in a way that gets rid of unimportant elements, user interaction will be greatly improved. It will also enhance your page loading speeds.

Simple interactions: Since mobile learners won’t have keyboard shortcuts, you should include simple interactions to achieve the same purpose as the shortcuts.

How will the design appear on a small screen? Have an outline of how your content will be displayed on a small device such as a smartphone. This will help you to identify the most important elements to include in your course for an overall enhanced user experience.

To add, note that learners will mostly use landscape mode to view your content. However, they will still expect the same content to have the same appeal when viewed in portrait mode.

After having an outline of how your content will be displayed on a smaller screen, come up with a plan on how to create such content. Course authoring tools will help you create content that fits on any screen size and resolution, and works on any device with ease.

Benefits of Responsive Design

Learning Anywhere at Any Time

Flexibility in learning is something desirable to all learners. eLearning courses offer flexibility allowing them to access learning content anywhere at any time. Responsive design helps to achieve this by making content viewable on any device.

Learners can, for instance, use their computers at school or at work and then switch to mobile devices while on transit or at home.

Cuts Training Costs

If you choose a reliable course authoring tool, you will have the advantage of creating courses with a responsive design. You will also create courses in shorter amounts of time compared to traditional methods.

Such a tool will cut down your training costs and save you time and resources. For instance, you won’t have to create separate courses for mobile, PC, and tablet. Your training software will take care of this.

A responsive design also serves learners in different locations. This saves money that would have been used to pay for physical lecture rooms, trainer fees, and other expenses. Indeed, one responsive training course will suffice.


It is vital for the learner to navigate through the courses without facing any challenges regardless of the device that they are using. Responsive design helps to achieve user-friendliness by using design elements such as swiping and zoom in and out functions.

Greater Audience Reach

Responsive design ensures that elearning content is accessible through a variety of devices. Consequently, a greater number of users with different devices will be able to interact smoothly with your courses.

Anticipates the Future

Responsive design is future-proof. Technology is dynamic and ever-changing. More and more devices with advanced features are being released each year. With the absence of responsive design, developers will have the tedious task of creating content for all these devices.

However, with responsive design, the future is already taken care of. Developers will create content which they are sure will be viewable on devices that will be introduced years to come.

Supports HTML5

Responsive design is a product of HTML5 which is the current code for producing web pages and viewing web content. HTML is responsible for the way a web page runs. It allows elements such as audio, video to operate smoothly without the need for extra software such as Flash.

Most current browsers are based on the HTML5 framework. Indeed, we rely on this framework so much when browsing the internet even without noticing it.

eLearning developers do not have to be worried about coding or programming in HTML5 language. All they need is a HTML5-compliant course authoring tool to take care of everything.


Today’s learners have the choice to choose which devices to use for their elearning purposes. They are also always on the move and, therefore, need to access learning material anywhere at any time.

A responsive design offers learners such flexibility. A modern LMS platform comes with an inbuilt course authoring tool that helps to create responsive elearning content.

Read More
Tovuti 10-Minute Demo

Quick and comprehensive video recording of the #1 Ranked Learning Management System.

Watch Video
Tovuti 10-Minute Demo

Quick and comprehensive video recording of the #1 Ranked Learning Management System.

Tips and Trends
Tovuti is on the cutting edge of online learning and has curated tips and trends for those involved in the e-learning and LMS space.
Visit the Blog

Get in touch with us.

Take the next step toward a next-generation LMS

Say goodbye to hard-to-use, disconnected dinosaur tech. A powerful and easy-to-use LMS is only a few clicks away.