Designing E-Learning for Desktop vs. Tablet vs. Mobile

Jul 24, 2014

Hey gang,

I was just following another forum discussion about HTML5 and responsive design and community member Jerson Campos made this great point: "If you're planning to have your training courses available for tablets, PCs, and phones, you will have to design the course for each delivery option....There is no one size fits all option that will work across all platforms." I thought this was a really great and valuable point that is worthy of further discussion.

In fact, that is one of the key points I made recently at the mLearn Con Session I delivered on building Scenarios for Mobile Devices. The scenarios you build for a tablet device would be different than the scenarios you build for a smartphone. This is because those two devices have inherently different use cases: people using tablets are more likely to be sitting down and have time to delve into the content at hand, people using phones are busy, on-the-go and often interrupted. A course that works well for one medium likely won't work as well for the other medium.

Obviously you have more screen real estate on a desktop, versus on a tablet, and definitely more than on a phone screen. There's also bandwidth, video card, memory, etc. differences between a desktop and a mobile device, and these are things that would probably influence how you design your course.

I'd love to hear the community's opinions and ideas on designing a "one-size-fits-all" course and what are some other instructional design and visual design considerations that should be looked at when designing a courses for multiple devices?

6 Replies
Tim Danner

The obvious considerations for me are the devices themselves and the browsers that people have installed on them and are using -- Flash supported, HTML5 compatibility, etc. I've also run into issues with different LMS's. One LMS we use doesn't support any mobile devices. A second one we use supports mobile devices and the Articulate-based material displays/works fine for the most part. The third one we use supports mobile devices but doesn't display material correctly in Mobile Safari. (The material displays correctly on the second LMS when using Mobile Safari.)

When I was a web designer in the late 1990's, I used to think it was a pain designing for IE and Netscape browsers, AOL, and Mac operating systems. What I've encountered designing/developing for mobile devices has been a much bigger nightmare. At some point, when I have time to breathe, I'm going to re-think our approach to development to better account for the ever-increasing environments.

tim price

Yes you are correct that elearning should be considered different for different devices and in an ideal world with lots of time to do stuff, this would be the way to go.

But when you are on a budget and a time constraint, the ability to create one course and have it fit automatically desktop, tablet and mobile is a nice thing. I notice the Captivate v8 has this now, Im hoping the Storyline crew have responsive design on their list for the next version!!

Ashlee Smith

Tim Danner ~~ I totally & Completely agree with You that building mobile courses is a huge challenge, and E-Learning developers must now face the reality web developers have lived with for a LONG time ~~~ Developing for multiple browsers, devices, etc...

Tim price ~~ To clarify your point Adobe Captivate 8 does NOT have the ability to create one course and have it fit automatically for desktop, tablet, and mobile.

You actually have to manually create three different courses at once. There's a tab for how the course looks on desktop, a tab for how it looks on tablet and a tab for how it looks on mobile. And as far as I can tell, all three outputs are fixed dimensions (so if I choose my Phone course to be the correct size for iPhone, it wont be the correct size for an Android device). You must actually build out the course in all three views, and as you add/remove objects in one view, it does affect the others, so it's an endless cycle of tweaking between three views. This has been the case for me any-how. If Anyone has Better method or tips for me, Please let me know.

As far as I can tell I can essentially do the same thing in Storyline right now by creating three projects with different story sizes.

I have yet to personally see a course that works on a desktop as well as a Smartphone. and I don't mean TECHNICALLY I mean when it comes to the Instructional Design and Visual Layout of course...


Jerson  Campos

"You actually have to manually create three different courses at once."

That is what web designers do as well. They create different layouts for the different targeted devices and browsers. They don't just move things around. In the CSS (the document that controls the layout), they will have different layouts setup when it detects the device and screen size. But before all this, most of them will design the layouts either on paper or graphic software before they even begin writing code. Yes, there are plenty of tools and software that helps them do this a lot faster, but they have a lot of work to do when creating for multiple devices.

The biggest nightmare isn't the extra work well have to do, its the browsers and the different way they interpret HTML5. Until they settle on what the standard is, I don't think we could create a course that would work on every device and every browser. For this situation I always like to fallback on a simple solution. Put a disclaimer on your course/html page that says "Best viewed on IE9+ (or Chrome, or safari)"

Joshua Roberts

Very good post. I think that people have envisaged that mobile output is simply a check-box option when publishing a completed Storyline project. There is far more to it than this, as Jerson has already mentioned, if you are creating courses for a plethora of outputs then you must also design for those outputs.

One thing that cannot be stressed enough (for me personally) is the need to continually test the project on all of the relevant devices. If you have not created for mobile/tablet then this may be a steeper learning curve and whilst everything in Storyline may look great when you open it up in your device it may not appear so wonderful. Please keep testing and making sure the content you are designing is reflected equally well in your device.

This discussion is closed. You can start a new discussion or contact Articulate Support.