Consider Responsive E-Learning Designs to Better Engage Your Learners
Recently, we had a client who came to consult on how to optimize their e-learning courses for the mobile devices. In brief, they were looking for designs for every type of devices that they could target to boost the adoption and engagement of their training.
Since present conditions and learners demand that all e-learning content should be available and accessible via mobile devices- it has become a compulsion as well as a necessity for academic organizations to go responsive.
Before we move on to features or elements of responsive e-learning design, it is important to understand the term clearly.
Responsive web design means designing a site for optimal viewing experiences on various devices by using latest technologies to make it flexible and adaptive to the media that renders them.
Responsive designs do not target specific resolutions or even screen sizes, but it aims to design for multiple screens so that the content responds according to the target environment and fits into different layouts on the bases of display type and size.
Factors that have driven the need to go responsive in e-learning are:
Device orientation: Most mobile phones come with dual orientation and the learners also expect the content to align as per their orientation choice – landscape or portrait.
Device availability: Numerous mobile devices are now available in the marketplace and this have multiplied the learners’ expectations. Today, the mobile masses demand both convenience and flexibility and also expect content to be available at any time of the day.
BYOD: Another latest trend is people’s insistence on bringing their specific device to the workplace or learning sessions. Colleges and universities are now encouraging their students to bring their devices to better exploit the potential learning. This allows individuals to take their learning courses on the phone.
Understanding the key features of responsive design:
Before planning for a responsive e-learning design strategy, it is crucial to understand some fundamental responsive design characteristics and features. The designs chiefly rely on JavaScript, HTML5 and other three core elements of CSS that combine, so as to adjust the content and layout for all the devices.
The key elements are:
Fluid grids: When you consider a traditional website design, it consists of frames, tables and images. Each element has a fixed or absolute value that specifies how wide or long the webpages will be displayed.
Is It Time for Mobile Moodle E-Learning? Yes!
But with fluid grid design, the size of the cell in the grid and also the contents in it are defined in relative terms that is in proportion to the container. Fonts and images are also assigned relative instead of absolute values.
Flexible images: The fluid grid design allows the images to move and scale according to the screen size. Another option is to use the CSS that can crop the images around the focus area and this eliminates the need to upload many versions of the same image on the server.
Media queries: This has become a W3C recommended standard and they return information based on the physical specification of the device. This allows different styles to be delivered for different devices and offer the best user experience. It helps the designers to build multiple layouts, but it is not specifically a mobile or a tablet solution.
“A good, responsive e-learning design should work efficiently on all devices and help to maintain the size and shape of the content so that it can be easily consumed by the viewers.”