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.

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