Think Mobile Upwards Design Desktop Downwards

If I was to sum up my approach to designing responsive courses in a single phrase it would be “think mobile upwards - design desktop downwards”.

It does sound a bit clumsy but what i mean by this is that you need to firstly think about the constraints of the mobile screen in terms of content. On a mobile screen your textual content will be best displayed in short, easily digestible paragraphs of no more than 4 or 5 lines long. Therefore, when creating your learning materials, starting on a desktop slide with long blocks of text is a bad idea (large blocks of text are not a good idea for reading on screens anyway). Remember it's a responsive e-learning course, so the same content is used for all modes of learner.

Your desktop view of the content will therefore also have short paragraphs of text. This, however, is where you need to design downwards, making the best of your content by using space and clean lines to best present it, and then gracefully reworking your design downwards for smaller screens. As you have first set the correct amount of content to display this will be a much simpler process.

Below is an example from my e-learning of the same slide displayed on a desktop and a smart phone. The text and animation fit perfectly on the mobile phone screen. This also dictates the amount of content on that slide for the desktop. Now some might think it looks a bit sparse but you can get creative with extra imagery or design elements if you wish but you must never be afraid of empty space. It helps the content breathe.

Slide numbers

When I started producing e-learning I never thought about numbering the slides. I don't think I ever saw it done by anyone else either. However when one day a learner called in to report a bug I realised how useful such things could be. The learner reported that there was a problem in a section of one of the units of their e-learning. Unfortunately that section had over thirty slides and they were no more specific about what the problem was (which was in the content itself) in it so tracking down the problem took ages.

So I had the brainwave to number slides. Doing it manually was a no-no of course as it would take ages and any later edits or updates which required adding/removing slides would mean many of the slide numbers would become incorrect.

Luckily Captivate includes a number of system variables which you can use in your e-learning courses. The ones of use here are $$cpInfoCurrentSlide$$ (the number of the current slide) and $$cpInfoSlideCount$$ (the total number of slides). The latter I use too as I like learners to know how far they are through the e-learning (we hide the playbar for... reasons).

When you insert a variable you get the below window pop-up, you need to select System in the "Variable Type" list and then you will see a long list of variables which you can select and insert into your slide in a text-box (but if you know what the variable is you can type it in as well, put a double dollar sign at both ends of the variable). By the way I've found its best to add the slide numbers to the master slide.

Getting started with mobile learning

Hopefully my earlier post has persuaded you to produce responsive learning materials that can be used both on a desktop and mobile device.

So how do we start? The first thing you should do before you do any design work or create any slides is think about how the learner will consume your content. Using a mobile device is quite different to using a traditional computer.

Using a mobile device is a much more personal experience; the screen is generally held much closer to the learner’s face than a static screen. Its also a much less predictable computing environment. Your learner may be interrupted regularly, they maybe learning while commuting to work for example, or receive Facebook notifications! Therefore, you need to make sure your content can be digestible in the few minutes they may have between interruptions.

Using a mobile device is also a much more tactile and immediate environment for interaction. The learner will generally be using their fingers to navigate through your content not a mouse pointer; they may also be pinching and zooming to see more of your content.

Try viewing some websites on a mobile device, sites you are familiar with on your desktop. See how the content adjusts, what works well, and - perhaps more importantly - what does not! In future posts we will go into more specifics on how to develop mobile learning but the first important step is to think about how the content you eventually produce will be consumed.

Tables in Captivate

If you are producing learning materials, especially for school or college courses, then sooner or later you are going to need to include tables of data (and some courses will need a lot!) Therefore it is rather strange that Adobe Captivate (at least up to v8, i haven't used later ones - yet) has such poor functionality for tables. There is a table tool but it is very limited and fiddly, and doesn't allow you to apply any formatting selectively to the data.

Luckily there is a way around this. Captivate can import HTML5 to embed into a slide by clicking on Media and then selecting "HTML5 Animation".

Now this was originally intended for HTML5 animations of course but luckily Captivate doesn't care what the HTML is you import, as long as it's zipped up. So you can create your tables in HTML and import them that way. I was so relieved when I found out you could do this, I was working on a Nutrition Consultant course at the time which needed a lot of tables!

This is an example of a table I've embedded in a course slide. The heading and three lines of text are a normal Captivate textbox but below that is an imported HTML table (and a note underneath).

One important thing to remember is to make your HTML responsive (as you are making your course mobile friendly right?) It isn't hard to do, you just need to add a CSS media query in the HTML to make sure all your font sizes match Captivate. You can find out how to do media queries here.

Should you be producing responsive e-learning?

So you have begun producing some e-learning... but should you be designing for mobile as well as desktop? I think you should.

These days I think all e-learning content should be viewable on mobile devices - unless there are any particular corporate or technological reasons why not. In 2016 mobile devices overtook desktops and laptops for web browsing and this trend will only continue as data speeds increase and devices improve (5G is on the way). Many people, especially the young, no longer possess or use what we might term “traditional” computers and instead only use mobile devices - tablets or smartphones - to access the internet.

With people leading ever busier and complicated life styles its no longer sustainable for course materials to only be accessible on a traditional "static" computer. Learners need materials they can dip in and out of when they have spare minutes and materials they can fit around their busy lives.

First of all lets define some terms. Responsive websites are designed to be equally (or close to) usable on both desktop and mobile devices. There is just one version of the website needed which is correctly rendered depending on the device the user is viewing it on, the days of having to maintain separate desktop and mobile versions of websites have now thankfully long gone.

An example of my e-learning, the same content viewed in desktop and mobile mode

However creating a responsive website entails a whole new set of considerations and complications. On this blog I will look at some of these as they relate to creating responsive e-learning and m-learning in future articles. Obviously the sort of tools you can use and need will depend on your own circumstances and project needs; though you need at least to have authoring tools which can create responsive courses in HTML5, such as Adobe Captivate. Older tools such as Flash are a big no-no as far as mobile development is concerned. Many mobile devices (especially of the Apple variety) cannot load Flash and in any case Adobe is slowly killing it off.

Why Not An App?

You could of course create a learning app instead of creating responsive HTML5-based e-learning. Many companies do this for their staff training, there are some very good examples out there, and there are valid reasons why apps are a good idea in some training scenarios such as when you have control over the learners’ choice of device or require bespoke specialised functionality.

However, if you do go down the app route for the general public, you will need to provide multiple versions of the app (iOS and Android at least) and have to rely on your learners keeping the app up to date. This is a big investment. Installing an app is also another obstacle between your content and the learner beginning to study. With responsive e-learning materials, the only app you will need is the web browser built into every mobile device.

Welcome to my E-learning Blog

Welcome to my e-learning blog. Here I will write tips and tricks on how to get the best out of the online training and educational materials you might be developing as well as highlighting some cool e-learning I have come across.

I will give some hints on getting the most out of Adobe Captivate 8 (I know there are later versions but thats what I use daily so thats what I can give advice in). Other software I use will also be featured. Even if you don't use the same software I hope a lot of the hints and tricks I will give will also be applicable.

Just a few details about me: I was one of the first professional web developers in the UK way back in 1995. In 2013 I moved to producing e-learning and responsive m-learning and several thousand published SCORM packages later I hope I've got some advice to give!