Recently one of our customers asked us for some advice on how to optimize their courses for mobile devices. They want to design courses for every type of device to boost the engagement and adoption of their training. There are a number of things to consider when thinking about designing courses for mobile devices. In this post I explain responsive design, how to create responsive courses, and what to keep in mind in terms of course design to optimize for mobile and tablet devices.
mlearning or Mobile learning describes a learner being able to access their eLearning courses wherever they are, on any device. The phrase was coined because of the proliferation of devices allowing a learner to take their courses with them. The effect of mLearning is to increase convenience and align learning strategies more with the actual behaviour of learners. In theory, this will increase adoption of training and increase engagement. Accessing content ‘on the go’ is a new norm, and that is no different for learning. The issue is that it is not as easy to say ‘just access the courses on the device of your choice’. A lot of thought and design has gone into the most accessible content. If you regularly use your cell phone or tablet to shop online you will already have seen that flagship retailers have websites that are designed slightly differently in comparison to their desktop versions to ensure a positive user experience. This increases their sales because the content is displayed in an aesthetically pleasing fashion and your ability to navigate is easy. The mantra can be applied – ‘Impression and progression.’
You will want to frame the content correctly and also remove any frustration that may arise. Let’s examine how websites change size to accommodate and optimize for the device being used.
Responsive design is a term that was coined by independent web designer Ethan Marcotte in his article ‘A List Apart’. A website that has responsive design ensures that the content is resized and adapted to the size of the screen being used. It ensures that visibility of text and images is sufficient for the content to retain its value. That is, if the images stay the same size the text may not be readable or it may partially clip the image. As you can imagine there is a difficulty with standardizing sizes of objects with the variety of devices and screen sizes currently available. Being responsive allows the objects to adapt or scale to the device rather than just register to the nearest breakpoint (the point at which a website changes to accommodate the various sizes of devices).
Scaling versus responsive
A quick note that there is a big difference between a solution that scales versus being responsive. Scaling can allow for certain device sizes to cater for mobile phones and tablets. The issue that you may encounter is that text and images scale to be unreadable whereas true responsive design maintains the size and shape of content so that it can be consumed.
Breakpoints are the points where a website’s content responds to provide the best possible layout for the size of the device. Breakpoints in screen sizes are the various points to which a website resizes, in order to accommodate each specific device being used. A tool like the Chrome plugin window resizer allows you to preview how a web page will look on a specific webpage sizes. Breakpoints are useful in an eLearning context as they can inform the way in which you design your courses. Whether you are creating SCORM courses from scratch or you are using an authoring tool, they allow you to think about structure. That being said, a much better methodology for responsive design is not to pick a number of set ‘sizes’ to adhere to, but rather to develop your website to be fluid. Our web application LearnUpon is, for example, responsive to changes in the browser size. Dragging the window to a smaller size perfectly demonstrates a fluid response.
Aspect ratios need to be maintained so that an image is not skewed when viewed on different devices. As you can see below, as LearnUpon is subjected to size changes the web application ‘responds’ and changes the format of the page to maintain image aspect ratios, text sizes and navigation options.
Selecting an authoring tool to create SCORM or xAPI files can be a difficult task. I have used a number of the best-known options, and each has its own pros and cons. If you are pursuing a mobile learning-centric strategy, it is very important to use an authoring tool that produces responsive SCORM or xAPI courses. That way, when a learner accesses the LMS from a mobile browser it will adapt to the screen size, and the course will launch in the size and shape appropriate to the device.
Authoring tools are now providing options to export courses in HTML rather than flash. Actually, they provide options for both, allowing for full Desktop and Mobile device support. The course is capable of detecting which device, Desktop or Mobile, the learner is using, and it will provide the course view in HTML or Flash as needed. It is important however to ensure that your authoring tool does provide for HTML export features, in order to have full mobile support in your course content.
This allows for the HTML5 and CSS to scale content to appropriate sizes and locations (it may not be sufficient to just scale down to device size; you might have to change the location of navigation or content to meet the needs of the learner).
Here is a list of some authoring tools that will output to responsive HTML content:
- Adobe Captivate 9 – the best responsive projects on the market at the moment, and the best all rounder in terms of authoring tools.
- Articulate 360 – Two options of note within the one subscription:
Articulate Storyline – requires a separate app to play the responsive content which is not ideal, but the responsive wrapper works well enough.
Articulate Rise – a web-based application available when you have an articulate 360 subscription which is built to be responsive. It looks amazing, but it is less flexible in its design with fewer interactions. An excellent option for those who want to produce SCORM content without the clunky exercise of a traditional authoring tool.
- Elucidat – The responsive slider is great for examination of the various breakpoint sizes for content. Elucidat is very easy to use and supports the ability for multiple content creators to collaborate simultaneously on a single project. This makes version control a lot easier.
Producing content that will have an impact for different types of devices takes a little bit more thought than just having an authoring tool that produces responsive output. You should think about not only the devices being used but also how and where they are being used.
Once you have reviewed the table above you will see that the style of learning is actually very different for each. An emerging school of thought is to design for mobile first, but I disagree with this. Speaking from a very pragmatic point of view some courses are perfect for mobile, some are not. Think about your own personal use of devices; there are tasks that you delay doing until you are at your desktop, usually those that require substantial amounts of input or detailed reading. If your course contains lots of videos, some learners would not be happy using up their monthly data package to view your content.
In terms of course design, sometimes less is more. The key here to creating compelling and consumable courses for mobile and tablets is simplicity. Use shorter more digestible modules so that the courses are easily accessible. Use simple interactions and choices so that navigation and answer selection suit all types of devices.
Navigation should follow the same mantra in terms of simplicity- keep it simple and accessible. Referring to the table above once again you will see that the input is different for different devices. The most successful course design allows for those inputs to be considered. With an authoring tool like Adobe Captivate you can use gestures as a means of navigation, allowing someone to swipe to scroll or pinch to zoom.
Let’s take Facebook as an example; the main navigation is scrolling through a feed using your thumb on a mobile device. This is designed for ergonomic purposes. If you build courses where someone can simply scroll downwards to access more content this will mirror their learned behavior for using such a device. I love how Articulate Rise’s simplistic SCORM courses are clean and minimalist, but can actually contain a huge amount of content to scroll through. Use your authoring tools’ ‘breakpoints’ to preview how the courses are to be navigated.
Within a SCORM course the learner may have to perform certain interactions or choices. Test various sizes to make sure that these are practical and frustration free on all sizes.
Knowing your audience allows you to make choices on content and structure of your courses. How are your learners most likely to consume the courses? You can produce more streamlined content for those accessing the courses through devices other than a desktop. If a proportion of them do decide to use a desktop or laptop the simplicity will be minimalist rather than out of place. A good authoring tool will render the course in a clean, modern fashion to help this.
Choose subject matter that responds (no pun intended) to the devices being used. Certain courses are more appropriate for a desktop. This is generally dictated by the volume of text and the level of interaction involved. Think about whether or not a person can derive information from a particular course whilst also “on the go”. Perhaps smaller individual modules may be better suited than a longer form course. Optimization is not just about technical choices, it can be as simple as dedicating certain content to a mobile strategy and others to a more desktop reliant subject matter.
Use your screen real-estate carefully. The ability to preview in multiple device sizes will be key here. I love Elucidat’s view slider that seamlessly shows the content as you move down through the breakpoints. You may have to make compromises with the quality of the image and video used for a very specific reason: if your learners are dependent on data rather than wifi it might be wise to not use Hi-Res images and video. If they are in areas of weaker signal or are sensitive to data use, large amounts of required data transfer may deter them from completing the course. If you do have to make compromises go for a lighter resolution of the video, and if you are using images, use jpeg and gif rather than png. Lossy compression reduces the sizes of the files.
If your authoring tool simply scales down courses to optimize for the size of the device, you should also think about whether or not this will reduce the size of the text to a point where is is illegible.
When you are creating courses for an audience on the go, it’s important to think from both a content and user point of view. Select an appropriate authoring tool to allow you to build content that will respond to the size of various devices. The one key takeaway I would recommend is to keep things simple and as frustration free as possible. With that in mind, it will be easy to optimize your courses for every device.