Making Courses More Tablet-Friendly

As of February, 2012, 19% of American adults own a tablet (with a prediction that this number will increase significantly [some predict it will more than double like it did in 2011] by then end of the year).  As the use of tablets increases, chances are good the people taking online courses will want to access them from the comfort of their tablets–whether you designed the courses to be tablet-friendly or not!

While I can’t guarantee that every course element will work on every tablet, here are some things you can do that won’t add extra time or cost when building the course that can help make a tablet-user’s experience better.

Design tappable buttons.

When you design the interface for the course, design buttons that are bigger than the end of your finger!  The other day I took a course on my iPad that was clearly designed to be accessed on a computer.  How did I know, you ask?  Because I couldn’t move through the course with the tiny next button!

Use buttons instead of text links.

If you have the need to link your course to a website, online document, etc., instead of onscreen text that says, “Click here to find out more about our test of mobile device simulators.”  Consider adding a larger button that is easier to click like the one here with instructions to click it to see the latest blog on the subject.


Crop images.

Smaller screens on a tablet means the text and images can be harder to see.  Most images can be cropped by about 25% and still serve their purpose.  Then, you can enlarge the cropped image to fill up the previous space, making the important parts easier to see.

Compress images.

Depending on the image you choose, you may not need to use the original, raw file.  When I have custom photography, each file may be 2 MB or more depending on the megapixel of the camera.  To eliminate file bandwidth issues, it helps to compress those images even for a course created for a computer.  This can become even more important for a tablet.  My tablet uses a 3G signal, and I do much of my testing using that to check download speed.  I can tell when an image hasn’t been compressed–not because of poor graphic quality, but because of the lag time of the download.

Include onscreen transcripts.

Making sure your interface design has the option for an onscreen transcript gives the tablet-user more options for where and when they will view the material.  For example, just because I have my iPad with me doesn’t mean I’m in a place (such as a library or the local café) where I can listen to it–especially if I’ve forgotten my earbuds.  If I can read the material, I’ll have a greater chance to be able to get the benefit of learning from my tablet.

Know what your authoring tool will and will not convert.

You can’t assume that a course that works on the computer will work on a tablet (just as you can’t assume that because you plan for students to view it on a computer doesn’t mean they aren’t going to try to view it on a tablet anyway).  Many authoring tools such as Articulate Storyline, Adobe Captivate, and Lectora publish to mobile-friendly HTML5 format.  But you’ll need to know what will and will not convert properly.  You can’t just assume that you can fill your course with Flash content and that the authoring tool will convert it all for you.  Sometimes it will, and sometimes it won’t.  You need to know.  For example, if I put an .flv video (not iPad-friendly) in a Storyline course and publish it to HTML5, Storyline converts the video to .mp4 format, which will play on an iPad.  But if I import a .swf animation that I had custom-built in Flash, it will not convert.

Be careful about being so mobile friendly that you lose PC compatibility.

HTML5 is a new and evolving standard.  Older browsers (which are still very prevalent in corporate and home environments) may not play that content.  For example, we have a client whose browsers cannot play .mp4 videos.  Fortunately, many authoring tools (such as Storyline and Captivate) let you publish to traditional and HTML5 content at the same time, with the best version being displayed to each student.

What are you doing to help make your courses more tablet-friendly?

Desiree Pinder
Artisan E-Learning

5 Responses to “Making Courses More Tablet-Friendly

  • Paul Schneider
    8 years ago

    I would add make sure you test on the tablet devices your audience might use. Not all tablets use HTML5 the same and if you are using an app (or have to) make sure they can install the app.

  • Sue Raffensperger
    8 years ago

    Great information! Thanks Desiree!!

  • Hi Desiree (Ward) Pinder

    got to know that with the emerging technologies there is a also a need to change the courses you provide to the learners. clear description of each point.

  • Thomas Abrahams
    6 years ago

    Hi , i am new when it comes to using tablets, i have designed a course with alot of transitions, is this a mistake ? will it work ?

    • Paul Schneider
      6 years ago

      Hi Thomas,,

      This really depends on the tool. Technically there is no reason it won’t work. I know with our tool Claro, this will work (in fact better than older browsers like IE) but I’ve seen with some others it isn’t supported and/or depending on your users tablet it might make the course hard to use. Some of the tools available now don’t handle “older” tablets too well (performance issues). In any case you want to test to your lowest common denominator – a bit like with earlier days with elearning on the web.

Leave a Reply to Paul Schneider Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.