Your Source for Learning
Technology, Strategy, and News
ARTICLES       RSS feed RSS feed

Quick and Simple mLearning Content for the iPhone

by Paul Clothier

June 6, 2011

Feature

by Paul Clothier

June 6, 2011

“The approach outlined here is quite simple — I don’t recommend it for large scale rollout of mobile learning in an organization — but the process of developing a small project like this will provide you with some important insights that will guide you when you start to invest in larger-scale mLearning projects.”

Everyone seems to be voicing their opinion about mLearning — about the impact it will have on work, productivity, education ... and how it could, in fact, solve world hunger. The truth is that very few people or organizations have actually developed any mLearning, and their opinions are often more philosophical than pragmatic. My intention in this article is to focus on the pragmatic — to help you get your hands dirty so you can speak about mLearning from the perspective of having actually developed some.

Getting started developing eLearning content is relatively easy; you grab a rapid eLearning tool — maybe a PowerPoint-to-Flash tool — develop some content, a few animations, interactions, add narration, and publish it. You might use a screen-recording tool to create a simulation. You can play around with it, see what’s possible, and try it out on some unsuspecting learners.

It’s a little different with mobile learning. There are very few simple mLearning tools available to the mobile content developer. There are a myriad of different devices — such as native apps, Web apps, hybrid apps. What should you create? Should you adapt some of your eLearning and place that on a smartphone? Create some quick references and have them be accessible on a mobile device? Develop mobile performance support content? The challenge is manifold: finding easy-to-use development tools, developing for multiple devices, and most importantly, determining the right context for the mLearning content we are going to create.

Before investing thousands of dollars in an mLearning solution for your organization, you might want to experiment with designing some simple content first. It’s only by playing around with real content that you’ll begin to discover the possibilities and limitations, and start to generate creative ideas for your own mLearning needs.

I’ve aimed this article at providing you with a very basic vehicle for creating simple mLearning content, so that you can get started quickly, see what’s possible, understand the pitfalls, and begin to figure out how you might blend mLearning into your existing training or learning strategy. The approach outlined here is quite simple — I don’t recommend it for large scale rollout of mobile learning in an organization — but the process of developing a small project like this will provide you with some important insights that will guide you when you start to invest in larger-scale mLearning projects.

Starting simple with PDF

Most people have some level of PowerPoint skills so this can be a good basic development tool to get started with. You can design and develop your content in PowerPoint and then convert it to a PDF file. PDF is a much better portable format than a ppt or pptx file, and much smaller in size. Although many smartphones can now display PowerPoint files, the file sizes are still large and typically will not render all the graphics and fonts correctly. Also, hyperlinks will not work on most of the PowerPoint viewers on smartphones.

On the other hand, PDF readers are now supported on most types of smartphones —iPhone, Android, Blackberry, and Symbian. The best PDF reader I’ve found for the iPhone (and iPad) is GoodReader. (See the sidebar for details.) The Getting Started Guide below helps you to use a tool like this to develop mLearning content.

Getting Started Guide

This is a step-by-step guide to creating simple mLearning content for the iPhone using PDF files and GoodReader. Although this is for the iPhone, you can adapt it to whatever smartphone you may be using, as long as it has a good PDF reader.

1. Determine the type of content you want to create

How can mLearning add value to what you are doing? What would be appropriate to your organization’s learning goals — a short online module, a quick-reference guide, a job-aid? Think this through carefully and determine the most important requirements. Don't just add learning content to a mobile device — figure out how you can use the mobile device to facilitate an approach to learning that didn't previously exist. How can it complement what you are currently doing? How can you utilize the fact that people will be carrying the mobile device around all day?

2. Create a page size of the correct aspect ratio

Once you have determined the type of content you need, you can begin to make design decisions. Determine the primary orientation you want for your content — portrait or landscape. Set up your PowerPoint page size with the correct aspect ratio. The iPhone is 2:3, Blackberry Curve 4:3, Droid 9:16. In the template provided with this article I have set the page size to 7.3” x 11” which is approximately the iPhone’s 2:3 portrait aspect ratio. (The iPhone will change the view of your content based on orientation, but it is best to stick to one or the other so you can create an optimal experience for the user.)

3. Design a PowerPoint template for mobile use

Adapt an existing template or create a completely new template design for your content. Use master templates to add consistency to your page design. Make sure the template or design complements the device you are using, as well as the purpose of the mLearning. Avoid using standard PowerPoint templates.

I’ve provided an iPhone template to get you started; you’ll find directions for its use in the section below headed “Using the iPhone template.”

4. Create content

Make sure form follows function. Use font sizes that are easily readable on the target device. For the iPhone, I recommend a minimum of 23 points for the provided template. Design legible graphics to avoid the need for zooming. Decompose complex graphics into simpler ones. (See the template for content examples.)

Add any interactions where needed. Consider using links within your content to simplify navigation in the PDF. In the template, I used links to create a main menu, to link from page to page, and to link to online content.

For linking to other pages in your content choose Insert Hyperlink “Place in This Document”

For linking to external URLs choose Insert Hyperlink “Existing File or Web Page”

(Some PDF readers do not support hyperlinks, so test this out first.)

5. Convert to PDF

Convert your PowerPoint content to PDF. I recommend downloading the free Microsoft “Save as PDF” add-in for PowerPoint; it converts content extremely well. With this add-in loaded, choose Save As PDF within PowerPoint.

6. Load content into GoodReader

There are several ways to load the PDF file into GoodReader.

  1. E-mail the PDF to your audience. When they open the e-mail attachment in the iPhone mail reader they can tap the top-right icon and choose “Open in GoodReader.”

  2. Choose the “WiFi-transfer” icon in GoodReader, connect to the IP address provided, and use your browser to upload the PDF directly into GoodReader.

  3. Host your PDF on a Website. In GoodReader choose “Web Downloads,” and either browse to the location on the site or enter the URL of the content. This will download the PDF directly into GoodReader.

Using the iPhone template

As mentioned earlier, I have developed a simple PowerPoint template for the iPhone that you can download to get started immediately. The template is preformatted for the aspect ratio of the iPhone in portrait orientation. This design provides a starting point that you can edit and adapt to your specific needs.

The template has examples of a few different types of content to prompt you to think about what mLearning you might wish to develop.

Slide 1 — Main menu

This shows you how you can make a PDF look and behave like a typical iPhone app menu. (Figure 1) The first three buttons have links to other pages and the last button has a link to an external Web site. GoodReader provides an embedded browser, so you can visit an external link on a Web page and then press the top-left button and return to the PDF content.

The buttons are for easy navigation, but if you want users to complete the content linearly then remove them and just rely on the swipe left and right feature of GoodReader and iBooks (as opposed to scrolling vertically down the PDF.) It feels very natural for users of touch screen devices like the iPhone to move through screens by swiping right to left.

 

iphone screenshot of main menu with navigations of Module, Quick Reference, Performance Support, Web links

Figure 1. Slide 1: Main menu

 

Slide 2 — Simple content

This is an example of a simple content page with a graphic. (Figure 2) Something like this could be part of a short module; something developed specifically for mobile or maybe adapted from an existing eLearning module. To ensure readability, don’t make the text size any smaller. Never force the user to have to zoom in to see text.

 

screenshot with title Sustaining Focus, and paragraphs explaining that topic

Figure 2. Slide 2: Simple content

 

Screen 3 — Quick reference

Figure 3 is a design for a quick reference. It is something your users access when they need to review concepts, procedures, or commands — or a job aid they can use as they are working on a task.

On this screen, I have added a button for the user to easily navigate back to the main screen. You may wish to consider having screen/page numbers (as shown), so that users know where they are.

If you do build quick references, then have your users take advantage of the search functions of GoodReader on the lower menu.

 

Screenshot title Unix Quick Reference, with glossary of Unix codes

Figure 3. Slide 3: Quick reference

 

Screen 4 — Performance support

The design of the page shown in Figure 4 is as an aid to use on the job to accomplish a specific task. In this case, the task is to successfully wire a system.

Because this is a PDF, the user can zoom right into the graphic to see detail. (This is probably the only time you want to have the user pinch-zoom in to a screen, because you cannot easily decompose and show a detailed graphic on multiple screens.)

 

screenshot with title, Wiring Diagram, technical drawing, and instruction

Figure 4. Slide 4: Performance support

 

Slide 5 — Interactive diagram

Another nifty option you can use for graphics is to make them interactive. The user taps parts of the diagram that will link them to a screen that addresses that element. A button provides a link back to the main diagram. (Figure 5)

 

screenshot with title, Interactive Wiring Diagram and technical drawing

Figure 5. Slide 5: Interactive diagram

 

Slide 6 — External links

Figure 6 shows how you can link to external content. The picture links to a YouTube video, and the button links to a Web site. One advantage of using GoodReader is that it has its own built in browser. This means that when you follow a link, you see the content in a browser within GoodReader and can navigate right back to the original content.

The external links can also be direct links to mp3 audio content or mp4 video content.

 

screenshot title TED Talks, with thumbnail linking to video

Figure 6. Slide 6: External links

 

Slides 7-10 — Scenario

You can use links to create scenario/branching and navigation to different parts of a module depending on the user response. (Figure 7)

 

screenshot of choice screen titled What's my favorite ice cream? with options vanilla, chorolate, and strawberry

Figure 7. Slide 7: Scenario

 

Slides 11-16 — Layouts

These slides are just possible design layouts you may wish to use for your content. (Figures 8 and 9) After choosing a particular design layout, copy it to the PowerPoint slide master so you can have it appear whenever you choose “New Slide.”

 

screenshot of template for generic content, Title, Some Graphic, and Some text here

Figure 8. Slide 11: Sample layout

 

Second sample layout with, Title, Some other title, and Some text here

Figure 9. Slide 12: Sample layout

 

A word about links

GoodReader supports links on the iPhone and iPad. Many other PDF readers, including the built-in iPhone reader, do not. If you use other PDF readers, test them to see if they support links.

When you tap links, make sure they are short, quick taps. If you keep your finger down on a link too long, you may bring up the annotation menu in GoodReader. Whenever possible add the hyperlink to an area or a button rather than to text. It will be easier to tap, and look much better.

iBooks

When you receive a PDF attachment in an e-mail or choose “Actions” in GoodReader, you get the option “Open In …” which opens a list of all the PDF readers you have on your iPhone. One of those readers will be iBooks, and if you choose this GoodReader will place your PDF content in the PDF section of your iBooks bookshelf. When you launch it, you can view the whole content with all the iBook options and all the links will work.

The nice thing about iBooks and GoodReader is that if you choose not to use links you can move from screen to screen in your PDF by swiping your finger right to left (which feels very natural) rather than continuously scrolling downwards.

Finally

Treat this tutorial simply as a means to get started thinking about mLearning content design. You probably won’t end up implementing mLearning using only PDF documents. After adapting this template for some of your own content, and experimenting a bit, you should begin to get an idea of some of the pros, cons, and design issues inherent in the design of mobile content.

Using PDF content in this way is a very rudimentary approach to developing mobile content but it will get you thinking about the right things. It will help you become acclimated to designing for the small screen, and help you think about what type of content might complement your own needs or learning environment. I hope that after creating some content using this template you’ll begin to come up with some unique ideas of how you might utilize mLearning in your own organization.

 

Using GoodReader for mLearning

GoodReader could be the best $2 you ever spend. Apart from being a great PDF reader, there are many other reasons why it’s such a useful tool. Here are a few.

Complete file system

GoodReader provides what the iPhone does not have: a file system. You can use the app as a repository for virtually all of your documents and files. It supports doc, docx, ppt, pptx, pdf, xls, and xlsx as well as most of the common graphics, audio and video files. You can create folders and subfolders and use it as you would use the file system on your PC with a few minor limitations.

Loading content

You can load content into GoodReader directly from e-mail attachments, by uploading via wireless from your PC and by downloading content from a Website. This means you can distribute content to your users very easily via e-mail or by having them download from a Web site.

Navigating

One of the nice features of GoodReader is the ability to move from page to page by swiping the screen right to left — the same behavior you would expect from an e-reader or book app. (You can enable this by going to Settings → Viewing PDF files → Horizontal swipe.) You can also leave it in the default mode where it will “click” to a full-page view (as opposed to continuously scrolling).

Searching and bookmarking

The search facilities of GoodReader are excellent. You can search your complete content for a word or a phrase. You can also very easily add a bookmark or navigate to a bookmark.

 


Topics Covered

(64)
Appreciate this!
Google Plusone Twitter LinkedIn Facebook Email Print
Comments

Login or subscribe to comment

The article was good. I would like to make one suggestion concerning the template. Would you mind swapping out the picture of the women. I had to change them inorder to share them with my collegues. They are rather sexist. Maybe something a little less fleshy and mouth wide open. Kinda pushin it.
I have relayed your concerns to the author.
Thank you for your article. I download your template and converted it to PDF. All the links work in GoodReader except the one which leads to the YouTube video. Why?
Thanks.
akun, thanks for the feedback. I will see if I can figure out what the problem may be. The link worked when we checked it during editing, but the gremlins stay busy all the time.
I'm getting inconsistent results when I try it. I'll have to check further and will get back to you.
Hi Akun - This is Paul Clothier, the author. It looks like the latest version of GoodReader is causing the problem. The solution is to go into the PPT template, create a 100% transparency box over the top of the image you want to link to and add the YouTube URL hyperlink to that. I tested it - works fine.
Hi Paul,
Thank you very much for the tip. Yes, the 100% transparency box did the trick. :-) It also works when I open the PDF file in iBooks now. Cool! ;-)
I downloaded the template but did not see the actual PowerPoint file just the published conent. Did I miss something?
Hi, I can't seem to figure out how to save and use the template? I know that's basic, but do you need to save it to a template directory, or its own directory... Unzip and start where? Thanks.
The template is just a PowerPoint file (template1.pptx). It isn't zipped. When you choose the link, the file should show up in your Download directory.
When I click on the template link, I do not get a ppt or pptx file. I get the choice to open or to save the file... no matter which I choose I get a complex set of Winzip files that seems to contain many, many xml files. When I unzip the zip file, I get three folders, one of which is a ppt folder containing 19 different xml files... However I just tried right clicking on the link and saving the target... I decided to try renaming the file giving it a ppt extension instead of the .zip extension it was tying to give itself. That actually worked. Now I'm actually seeing the template in PowerPoint. Cool, but not intuitive.
When you hover over the link it says it's a PPT (http://elearningguild.net/LS11/mag/Template1.pptx) but when you click to download it's downloading it as template1.zip. After extracting there is no PPT file... only xml files which power point is saying is corrupt.
Same happened as other users - the link opens a zip file. Save the zip file, and change the extension to .pptx, then open the file.
Related Articles