A beautifully designed elearning course can enhance a user’s learning experience. One of the critical aspects, which defines a good e-learning course from an average one is its layout.

Layout refers to the arrangement of elements on a page, referring to the specific placement of image, text, buttons, navigation etc but is not limited to the placements alone and includes the color schemes, design style etc.

Every e-learning courses typically follow a similar structure, which includes:

1.Introduction screen
2.Table of contents
3.Objectives and course goals
4.Directions and instructions
5.Course content
6.Quizzes, assessments, and surveys
7.Summary and final instructions.

Once the generic structure of an elearning course is identified, we can start the process of designing the layout.

Imagine an e-learning module where the first page is stuffed with all sort of content and information.Such a design will definitely lose the visual appeal as the learners will find it difficult to find the genuine and important information. So what is the perfect way to do it?

In my view, the layouts should be clean and concise and the viewer or the learner should be able to get the information quickly. The layout chosen should be able to communicate the message clearly to the users.

As the elearning industry has already started to shift towards the responsive design approach, it becomes important for every learning to follow the principles of responsive design. Flexibility is the key when designing for responsive e-learning as the content and layout elements need to resize and align to fit different screen sizes and resolutions.

In this blog, let us see some examples of the tips of designing responsive e-learning layouts and how these layouts vary across desktop, tablets, and smartphones.

1.Choose the right tool to design the layout

There are plenty of tools available in the market which allows you to build wonderful elearning layouts. Choose the appropriate tool which matches your learning strategy.
For example, if the organisation is more focused on building contents on mobile devices, then the designer should prefer a tool which gives more flexibility for designing layouts on mobile devices.

2.Create the layout

The layout should contain the basic building blocks of your e-learning course design like buttons, borders, text boxes, and logos.
For example, in power point, there are different slide layouts options with different placeholders for placing the text, images, graphics etc.

Recent studies reported that the aesthetics of a course, particularly the layout, the  use of graphics and the ease of use were important in motivating learners to engage and persist in web-based learning (Scribner,2007; Glore 2010).

The designer starts his brainstorming process here where he builds various layouts to choose from.

The above image represents some  common design layouts.

Here, I have taken three examples or scenarios in e-learning to explain, how and what are the best layouts designs which can be used for building elearning modules on desktop, tablets and smartphones.

1.Simple Presentation

This is one of the most commonly used style in e-learning to place text. This is comparatively an easy task for the designers as they can use text blocks along with icon/images to represent the text content as shown in the image below.

Desktops: The graphic, image and text combination is laid out horizontally on desktop monitors. The user can easily read through the texts and media in this simple layouts.

Tablets: On tablets, the layout changes to vertical from horizontal with different frames or blocks arranged on top of one another. Vertical scrolling (with a swipe action) may be introduced based on the length of the content.

Smartphone: Single pieces of content will appear at a time with their relevant images and or graphics in different frames.

Learners can view the next section of content by tapping the navigational elements like the next button or using the swiping function etc.

2.Story/Scenario in an e-learning module

Let us now see the layout for story/scenarios in an e-learning module across devices.


The written content appears on top and then there comes a separate horizontal frame block.
The frame has clear and fixed borders and the story is displayed inside this frame.
The navigation buttons are closely attached usually to the bottom left and right of the frame.


The layout remains more or less the same on tablets, but the frame is scaled down to suit the size of the tablet screen as that is what responsive design is about. Learners can navigate through the same navigation buttons conveniently placed below the panel or the frame. Additionally, they can also navigate by swiping across the screen to bring up the next or previous screen.


The layout here will change completely, as the screen space available is very less.Hence there are two common ways the layout can be designed.

1. The instructions and the textual contents will be shown first on a separate screen and the story will utilise a full-screen layout of the mobile device. This is commonly done with the help of an internal or external player which pops up

2. In the second approach, the layout will show the instructions on the top and the story is now shown in the form of a conversation, with text for speech/thoughts appearing alongside characters’ mug shots in a non-interactive vertical layout.
Learners can read through the story by swiping up or down.

3. Interactive Modules

The above image represents how an interactive scenario module can be designed across the devices

Desktops: Buttons and interactive elements are placed vertically, one below the other, Selecting each interactive element opens a popup on the side with text and a graphic/image next to the interactive elements.

Tablets: On tablets, the buttons or other interactive elements are placed horizontally, below each other.Selecting each interactive element opens a popup with text and a graphic/image below the set of interactive elements.

Smartphones: On smartphones, the learners need to tap the horizontal bars to reveal the layered content.


Assessments have become a part of every elearning module, with various assessment options used by the designers, it becomes the responsibility for them to ensure that the Let’s see how a simple multiple choice question can be effectively designed.

Desktop: With the abundant screen space, the designers need not worry much about the design layout of a multiple choice assessment.
The text box frame placed horizontally holds the question followed the options, which are again placed horizontally one after the other.

Tablet: The tablet screen design approach takes the landscape mode to fit the contents perfectly and for better viewing, the text box frames again take the design style from the desktop versions

Smartphone: With the smaller screen size the text boxes are placed one below the other, the text frame get resized automatically

These are some of the popular and awesome responsive e-learning layout designs, which you can follow while designing your next  responsive e-learning modules.