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

Mobile Learning on the iPhone - Getting Started

by Paul Clothier

April 19, 2010

Feature

by Paul Clothier

April 19, 2010

Start developing and distributing basic mobile content quickly and simply with the tips in this article. Starting with some static content, then adding mp4 videos and HTML, you’ll get your feet wet and begin to appreciate the possibilities, challenges, and unique design considerations inherent in developing content for the small screen. You’ll learn what works, what doesn’t work, and what you’ll need to start developing world class mLearning!

Are you eager to start creating some mLearning content but feel like you don’t have the right skills, tools or technology? Interested in developing an mLearning application but not ready to learn Objective C, hire a developer or invest in a full blown mobile solution? No problem.

In this article I’ll show you how to get started creating mLearning for the iPhone or the iPod Touch. I’ll show you some very simple techniques, using common file formats and free (or nearly free) tools. Using these simple tools and techniques you will be able to create some impressive mLearning content within a few hours. What’s more, you’ll begin to discover some of the design skills that are needed to design effectively for the small screen.

Basic Formats

The iPhone has built-in document viewers for doc, docx, htm, html, PDF, txt, xls, and xlsx documents. It can also view gif, jpg and png graphic files and mpeg4 video files.

One of the easiest ways to develop and deliver content is to use one of these formats. Most people are familiar with the tools that create these formats and so designing mLearning content for the iPhone is simply a matter of applying your existing content development skills on a smaller canvas. In this article, I’ll address developing content in:

  • Word (doc and docx)
  • PowerPoint (ppt and pptx)
  • Portable document format (PDF)
  • Hypertext markup language (htm and html)
  • MPEG 4 video (mp4/m4v)

Word, PowerPoint and PDF work well for simple static content. If you need more sophisticated navigation and interactivity, use HTML. For animation and narration, use mp4 video.

Design considerations

One of the first things to consider is how to best utilize the available screen space. When you are faced with the tiny screen of a mobile device, you need to rethink your design approach. You must pare your content down to the very essentials and make each word and graphic count. You need to use every millimeter of your canvas to good effect. One of the advantages of designing mLearning is that it forces us to express the most with the least; it compels us to design concise, elegant content and remove the superfluous.

Screen size

If your content is primarily textual then you may only have space for about 100 words. With a graphic in addition to the text you may have half that. With such limitations you need to choose words and design graphics carefully. Reusing text and graphics from a traditional e-Learning module is not going to work. Design your content from the outset for the small screen. This is one of the reasons why narrated content is well suited to mobile learning because you are less restricted by screen size to deliver information. We will talk about narrated content later in this article.

Refrain from forcing the learner to zoom in to read text (whether it is content or labels on a graphic). Your default text size should be easily readable. (See Figures 1 and 2.) Whenever possible use the whole screen or a large portion of the screen for graphics, particularly labeled graphics. This is often the source of trouble when content developers attempt to reuse existing e-Learning content for mobile. See the section “Porting content” for more guidelines on converting traditional e-Learning to mLearning.

 

iphone screen displaying very small graphics

Figure 1: Text and graphics too small

 

iphone screen showing properly sized graphics

Figure 2: Graphic adjusted for small screen

 

Aspect ratio and template

The aspect ratio is the ratio of the longer dimension to the shorter dimension of a shape. When you view any content on a desktop or laptop the aspect ratio of a page or screen of content is not too important because whichever way you view it on the screen it will be easily readable. You don’t need to develop your content to have the exact same aspect ratio as your monitor. When developing content for the iPhone, it’s important to have your content aspect ratio match as close as possible that of the iPhone screen. Smaller would be wasteful and larger would obscure content.

The iPhone screen is 9 cm (3.5 in) across. The pixel size is 480 x 320 which gives it an aspect ratio of 3:2. If you want to take advantage of this whole screen then you need to create content sizes of this ratio when using PowerPoint, Word, mp4 video or any other format. When using PowerPoint or Word a page size of 11” x 7.3” will provide this aspect ratio and will ensure that when the content is viewed on the iPhone it fits snugly to the whole screen. (See Figures 3 and 4.)

 

iphone screens showing an image too small for the screen

Figure 3: PowerPoint aspect ratio results in cropping content

 

good image sizing and placement within iPhone screen

Figure 4: Content with correct iPhone aspect ratio


Don’t create mobile content in Word or PowerPoint using the default templates and font sizes. Create a specific template for the iPhone,based on the 11”x 7.3” page size. Use a font size no smaller than 26 point to ensure readability.

Creating the content

Determine the purpose and context of your content. Is it a quick reference, a short learning module, or support material for an instructor-led workshop? Keep in mind that mobile content is typically digested in short time frames – at a bus stop, on the train, in the coffee shop, in line at the grocery. Chunking content needs to be more rigorous for the mobile device. If traditional e-Learning involved 30-60 minute modules, mLearning content is best delivered in 5-10 minute chunks for learning modules and usually no more than 5-6 pages of reference materials (I am making these numbers up but they sound about right).

Using PowerPoint and Word

You can develop content in Word or PowerPoint but you will find that the viewers do not always render the content accurately. In the case of Word, line spacing, font size and font type rarely view correctly and in PowerPoint some more complex graphics and images get completely lost. By converting your Word and PowerPoint files to PDF format you can overcome these limitations and have the added advantage of a much smaller file size. PDF also gives you more responsive navigation and zooming. (Download the free Microsoft “Save as PDF” add-in for Microsoft Office 2007 if you don’t have a good PDF converter. This provides a high quality conversion.)

If you want continuously scrolling pages on the iPhone, create and deliver the content in Word format. (See Figure 5.) If you want individual screens or pages use Word or PowerPoint converted to PDF. I recommend creating content in PowerPoint because it’s easier to set up a simple template and manipulate graphics.

 

iphone showing page with pleasant person image and supporting text

Figure 5: Continuous scrolling content in Word


Here’s how you create content in PowerPoint or Word.

  1. Create an iPhone template for your page or slide. (Have any default font be about 26pt or larger if you are using the recommended 11”x 7.3” page size.)
  2. If you are using Word reduce the margins so that text and graphics are closer to the edges of the screen.
  3. Develop your learning content on the PowerPoint slides or Word pages.
  4. Convert your content to PDF format. (Or leave it in Word format if you want continuously scrolling text without page breaks.)
  5. Distribute the PDF (or .doc file) to your learners.

Hyperlinking

Hyperlinks to external sites or content will work perfectly fine with the built in Word and PowerPoint viewers. However, a hyperlink to another page or slide within the same document will not work and it will occasionally hang the viewer. Links to bookmarks or other slides do work when you convert the content to PDF but I have found that the behavior of these links is inconsistent. Sometimes a link in a PDF will take you to the right page but in other cases it will take you to the page after the one you linked to. I have not found a satisfactory resolution to this problem. If hyperlinking to other pages or screens is crucial to your content design, consider using HTML content.

Using HTML

If you are familiar with simple HTML, a great way to develop mLearning content is by using iPhone Website kits such as iWebKit, iUI, prettyMobile and ModelBaker to name a few. These tools provide a simple way of creating an iPhone formatted Website or Web application. With simple HTML skills you can very quickly put together mobile content in the framework of a Web application. With iWebKit, for instance, all you do is download the kit – which is a complete set of demo pages – edit the pages, and add your content to the templated pages. You then simply upload the content to your server and the user can then view it via the iPhone Safari browser.

The advantage of using this approach is that you can very easily create a nicely designed iPhone site with a main page or main menu that links to all your learning content. You can easily add hyperlinks to text and graphics. Your content can be written directly in HTML and you can use JavaScript for any programmatic requirements. These tools are simple to setup and use and you can create content very quickly. The menus are designed to look and behave as if you were using a native iPhone application so the result is elegant and user friendly. See Figures 6 and 7 for examples.

 

iphone showing a selections menu

Figure 6: mLearning Web site created with iWebKit


iphone with text, images, questions, and link to video answer

Figure 7: mLearning content page created with iWebKit


iWebKit also comes with samples of form elements, such as text entry fields, checkboxes and radio buttons. To build a page with these elements you simply copy and edit the sample HTML and write some JavaScript for any conditional logic. This way you can get feedback from learners and create simple quizzes, surveys, and evaluations.

Fullscreen support

When you use the iPhone Safari Web browser to access content, you see the navigation toolbars on the screen (see Figure 8). This is good if you need to navigate Web pages when surfing but not so good for your mobile content because it reduces the viewable area. You can resolve this and have your content take up the whole screen by removing the navigation bars as follows:

  1. Launch your mobile content in Safari
  2. Press the “+” at the bottom of the screen
  3. Choose “Add to Home Screen”
  4. Type a short title for your learning module/content

After completing the steps above, an icon will appear on the home screen of your iPhone as if it is a native application. (See Figure 9.) When you tap the icon, your mobile content will launch without the navigation bars. (You can design your own home screen icon for this. If you are using iWebKit, just replace the .gif file in the pics folder.)

 

iphone screens showing a page module

Figure 8: Browser navigation reducing content area


iphone home screen showing programs installed

Figure 9: Home screen icon (Project Mgmt)

MP4 video

You can take advantage of the video player in the iPhone by converting your content to the MPEG-4 (mp4) video format. There are many tools that allow you to create screen recordings or convert animated PowerPoint content to mp4. You can use these tools to create the equivalent of a self-running Adobe Presenter or Articulate Presenter module on the iPhone. Since the iPhone does not support Flash, you can leverage mp4 videos to create some very engaging self-paced learning modules. There are a couple of simple ways to create video from your learning content: using a Web screen-recording tool or converting a PowerPoint file directly to mp4.

Screen recording tools

There are many tools that record screen activity and convert it to mp4 format. One of my favorites, TechSmith’s Camtasia, makes it really simple for you and provides an output template for iPhone mp4 videos. Whatever you record on the screen, you can publish to iPhone format. Camtasia has a nice “Zoom-n-Pan” facility that lets you zoom in to see detail; this is even more important with a small screen like the iPhone. (You can create desktop software demonstrations on the small iPhone screen with the zoom and pan feature; I’ve created quick reference SAAS tool demonstrations using this approach, and these have been very successful.)

Articulate’s Sceenr and TechSmith’s Jing are two of the many Web tools that let you record anything from your screen and immediately post it to a server in Flash or mp4 format. The Screenr mp4 output is free; with Jing you need a Pro account ($14.95/yr). These two tools are designed to create a screen recording and instantly share the content online in Flash format. Automatically converting the content to mp4 and providing a Web link is a huge asset when you want to quickly create mLearning video content for the iPhone.

Here are the steps to create a short mp4 video of animated, narrated PowerPoint content with Screenr. (The approach for Jing and other tools will be very similar.)

  1. Develop your content in PowerPoint, with an iPhone template as described previously.
  2. Add your custom animations.
  3. Use “Set up Show” in PowerPoint and change the show type from “full screen” to “window”
  4. Run the slideshow and adjust the window so that it is the right aspect ratio. (I suggest 6”x4.”)
  5. Run the recording tool and resize the frame to just cover the PowerPoint content.
  6. Start Screenr, run the slideshow and record your narration as you invoke the slides and animations.

When you have finished recording, Screenr will publish to Flash and create an mp4 version of the content. To access the mp4 video content, you either link to a (very short) url from the iPhone or download the mp4 and distribute it as you wish (email, a file manager app, a Web application, install it from iTunes, etc.).

Screenr has a limit of 5 minutes of recording, but for mobile use this should be adequate for most projects. If you need something longer, use a fully loaded screen recording tool like Camtasia that can publish to mp4.

Another method that I like to use is to screen record narrated, animated Flash content from another tool. For example, screen recording a learning module from Articulate Presenter or Adobe Presenter. This way you will be able to sync the audio with the narration in the tool before you screen record. This approach can also be useful if you want to quickly transfer some existing Flash learning content to the iPhone. (Whenever possible you should design content for the mobile device rather than re-purposing existing e-Learning. See the section, “Porting content.”)

PowerPoint to mp4 tools

If you want straight conversion of PowerPoint (with animations and narration) to an mp4 format, there are a lot of tools available that do this. Google the phrase “PowerPoint to mp4” and you’ll see many tools such as Moyea PPT to Video Converter, Wondershare PPT2Video Pro, and AuthorStream. With these tools, you create your content in PowerPoint, add animations, synch narration and convert directly to mp4 video format. Camtasia Studio also allows you to directly record your PowerPoint content and publish it to mp4 by choosing the built in iPhone production preset.

Porting content

One of the biggest mistakes mLearning content developers make is porting content directly from e-Learning modules or instructor presentations. Training or e-Learning content that was designed for a desktop screen is not suitable for mLearning. Placing content of this nature on a mobile device doesn’t make it mLearning any more than a PowerPoint deck converted to Flash makes it e-Learning. If you have existing content that you want to convert to mobile format, deconstruct the content first and reconsider the instructional design.

Not only is the mLearning context completely different, but the content density is greatly reduced. (Content density is defined as the amount of readable text, graphics, or media that can reside on a single screen.) The information conveyed on one screen for an e-Learning module may need the equivalent of three or four screens on the mobile device. Viewing content that was designed for a larger screen on the iPhone display will necessitate zooming in and panning, which is highly undesirable for the design of mLearning.

If you have to or want to port content from a pre-existing project, either rethink the whole instructional design for mobile or, if you want the exact same content per “screen”, consider presenting the content in multiple scrollable pages. If you choose the former, which is preferable, take into account the context and characteristics of mLearning – keep the content short, clear and engaging. Learners will probably not be sitting still for 20 minutes paging through screens of content as they may in your e-Learning modules.

If you choose the latter, where you want to use exactly the same text and graphics as in an existing e-Learning module, convert it to a few scrolling iPhone pages to display the same amount of text.

Porting content from other delivery modes can impose a form and context that doesn’t fit the mobile medium. The best use of mobile content for your particular context might simply be a quick reference guide, a podcast, a short video or quiz. Don’t drop other learning content directly into a mobile device and hope it will suffice as effective mLearning. Rethink and re-design. The best mLearning design comes not from adapting existing content for the small screen but from looking at the characteristics of the mobile device and determining how these characteristics can best support your learning objectives.

Delivering the content

Once you have your content developed in PDF, PowerPoint, Word, or mp4 format, you determine how you want to distribute it to your users. There are three main ways of delivering or accessing the content:

  1. Via email
  2. Loading onto the iPhone
  3. Via the Web

Email

A quick and easy way of sending learning content to a mobile user is to email it as an attachment. Short mLearning content distributed in PowerPoint, Word or PDF is going to be small enough not to strain your email server. Tapping on an attachment in the iPhone email client invokes the corresponding viewer and the learner has immediate access to the content.

Once you have viewed the content, it will reside locally on the iPhone so that even when you have no wireless or 3G access, you’ll still be able to view the content if you go back to the original email. If you do distribute content this way you should encourage recipients to set up some “content” folder and have them move the email with attachments from their Inbox to this folder. This way they can build a repository of all their mLearning content. (There are also some iPhone apps, such as ReaddleDocs and Files that let you download and save attachments directly from emails.)

One of the drawbacks of viewing content from emails is that the top of the screen has a menu title bar that obscures some of the content. Another drawback is that hyperlinks in PDF content do not function. To overcome these limitations you can load content directly onto the iPhone and view it in a third-party viewer.

Loading onto the iPhone

The best way to access mobile content is to load it directly onto the iPhone. There are many free apps that let you do this. Search for “file manager” in the Apple App Store. One of my favorites is Files which has a free Files Lite version. It accepts all the standard file formats you would need and displays everything with a full-page view (no persistent status bars or menus). You can upload content into the Files app via a browser by using the same wireless connection your iPhone is using.

If your learners install a free copy of Files Lite, they can upload the mLearning content you send them. In the full “Files” version you can add a bookmark, navigate to specific pages as well as directly email any saved content. I use Files constantly to test any mLearning content I’ve created in Word, PowerPoint or PDF – it’s a great app. (ReaddleDocs is another great app for uploading and reading files on the iPhone.)

Via the Web

The most convenient way of accessing mobile content is via a Web link. As with email attachments, a link to any standard format will invoke the built-in document viewers and video/audio players. One of the advantages of Web access is that the user pulls the content when they need it rather than you pushing it to them.

When you create a Web page for mLearning content, make sure that you create an iPhone-formatted Website. Don’t require your learners to access content by zooming in to standard Web pages. There is simple code that you can add to your existing Web pages that detects iPhone access and redirects the browser to a mobile version of the site. Google the phrase, “How do I detect an iPhone user coming to my site” for details of how to set this up. If you have a WordPress site it’s even easier; you simply load an add-in that automatically switches the view to iPhone format. You can also use WordPress for the iPhone which is designed specifically for the iPhone. (See Figure 10.)

 

Wordpress site components shown on the iphone screen

Figure 10: iPhone WordPress site

 

Downloading content from a Web page

The default Safari browser in the iPhone has no facility to download content from the Web. You can view any of the supported formats but cannot save the content onto the device. This is not a problem when you have constant 3G or wireless access but when you are without connectivity - an iPod Touch with no wireless connection for example - this can be a problem if you want to view the Website content.

One way around this is to use a special browser app that lets you download content. Two apps I recommend are DownLoad Manager Pro and ReaddleDocs, both of which you can download from the App Store. These apps have browsers that can download content from any Website. The file is saved in a folder and you can then access your content at any time you want.

Mobile evaluations, surveys, polls and quizzes

There are some free tools available that you can use to conduct evaluations, surveys, polls and quizzes on the iPhone.

SurveyMonkey (Figure 11) offers a free account which allows up to 15 questions and 100 responses for surveys or evaluations. (If you need hundreds of responses and unlimited questions, you can upgrade for $20.) At the beginning or end of your mobile content you can survey your learners with a simple link. SurveyMonkey detects that an iPhone browser is accessing it and formats the survey accordingly. Afterwards you simply log in and collect the responses.

 

surveymonkey on iphone

Figure 11: SurveyMonkey on the iPhone

 

Another useful tool is Polleverywhere.com. (Figure 12) This lets you quickly create a polling question and have your audience respond via SMS, Twitter, or a mobile browser. It’s free for up to 30 responses per poll. Within moments you can view and email a graph of all your responses.

 

polling app on the iphone screen with submit button

Figure 12: Voting with Poll Everywhere

 

Other polling, survey and quizzing apps to check out are Show of Hands, iVote, SurveyGizmo, and mobiQuiz.

Summary

The purpose of this article is to enable you to start developing and distributing some basic mobile content quickly and simply. Start with some static content and then experiment with mp4 videos and HTML. Once you’ve got your feet wet, you’ll begin to appreciate the possibilities, challenges, and unique design considerations inherent in developing content for the small screen. You’ll then be in a good position to start visualizing and designing more sophisticated mLearning content. By the time you are ready to invest in custom-designed mLearning tools and technologies, you’ll know what works, what doesn’t work, and what you’ll need to start developing world class mLearning.


Topics Covered

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

Login or subscribe to comment

This was excellent and timely information. Thanks.
Many Thanks, very usefull for me.
I just have one question, Paul. Are you willing to admit that you are an iPhone fanboy?

Everybody seems to be jumping on the iPhone as "THE" platform, but the fact is, iPhone accounts for only 14-15% of all smart phone users. Most people want more out of a smart phone. Like, multi-tasking, or simple copy/paste functions.

According to a February article in TechCrunch, iPhone at the time was at 14% of the market (edging out Microsoft, who has fallen to just 9%), while Symbian and RIM accounted for 47% and 20%, respective.

Why not show some support for the majority market? Better still, why not explore a method that doesn't even _require_ a SmartPhone and an expensive data plan to facilitate mobile learning?

The article mentioned: http://techcrunch.com/2010/02/23/smartphone-iphone-sales-2009-gartner/
...and don't even go there with Android. They are barely posting 4% market share.
Okay, I did a bit more research, and in the U.S. market ONLY, iPhone is around 25% and steady, but is still well behind BlackBerry (increasing), and not that far ahead of Windows Mobile (decreasing).

Reference: http://comscore.com/Press_Events/Press_Releases/2010/4/comScore_Reports_February_2010_U.S._Mobile_Subscriber_Market_Share/%28language%29/eng-US
Honestly, I think designing with a WAP web browser in mind, and focusing on minimalist content approach, and micro-learning (just one objective at a time, please) is the best mobile design. No Flash (iPhone can't do it), minimal video (too many format issues). Stick to WAP safe content, and you can't go wrong.
Very much appreciate the practical advice and suggestions on specific tools and steps. Great article!
CrisJolliff, are you offering to write an article on developing mLearning that runs on the Blackberry? Or on designing mLearning based on WAP-safe content?

I'd be happy to see a proposal from you if either is the case. I'm the Managing Editor, you can email me at bbrandon (at) elearningguild (dot) com.

Bill
Thank you, it's very usefull for me
@CrisJolliff, Cut/Copy/Paste for the iPhone was added almost a year ago (June of 2009).

http://en.wikipedia.org/wiki/IPhone_OS_version_history#3.x:_Third_major_release_of_the_iPhone_OS

I have to wonder whether it's people who want BlackBerries, or companies... RIM smartphones seem to be the standard in corporations, but looking around at the people I know, iPhones seem much more prevalent. I'll have to look for those stats…

Agreed, stay away from Flash for mlearning, but not just because of iPhones. As of right now, Adobe has not released a full version of Flash that will run on any mobile devices. This release has been delayed several times. So while we pretty much *know* that Apple devices aren't gonna run Flash, it's not just Apple that is making it a good idea to stay away.

Ultimately, I agree that you have to do a lot of lowest-common-denominator design for mlearning -- particularly mlearning that works across multiple platforms. But this article did not aim to do that; the title clearly states that it will discuss mlearning design for the iPhone. It’s a much more ambitious task to write a guide for mlearning design across the majority of devices – both in terms of technical requirements and sound instructional design. But I would love to see it; maybe you should take Bill up on his offer.
An article discussing mlearning development would be great!
iphone is very hot recently. its function is so powerful and we can download many apps to it to make it stronger. if you like qr code. you can download a barcode reader. i knew a website providing free stuff . you can hace a look.http://www.onbarcode.com/products/java_barcode_reader/
Related Articles