A collections of tips, guidance and download linksfrom the Tribal mobile learning team
April 2012
Creating mobile content
April 2012
Developing mobile content: starting points and models
When building mobile content / mobile courses / mobile apps, there are two critical decisions that inform the rest of the development:
1)What does success look like? How do we know if the app has succeeded?
For example, if you make a smoking cessation app you want to know: “have more people actually stopped?” rather than “does it contain all the critical info?”
2)What is the “informational design metaphor” or “content model”. This informs the higher level structural design of the app, and dictates the content flow.
Examples of different content models are:
-eBook (The metaphor is a book, with lots of text, a linear flow and page turning)
-eCourse ( A course, with similar linear flow, but more interactivities, multiple modules, completion tests etc)
-News feed (Blog style: a time-based flow of single-page info, accessed via a summary page listing the latest items)
-HowTo guides (Similar to news feed, but categorized by theme. This is very common on mobile e.g. dictionaries, recipes, travel info, etc)
-Performance support / On the Job training (These are more a combination of content, and tool. Functionality to help you do a task better, referring to the content to help you e.g. Fitness apps, which include advice, information, calorie counting tools, BMI calculators etc)
-Hybrid versions of the above
In Global MedAid we have explicitly decided to use a hybrid of several of these models, as an exploration of what people might like to use at different times. This model could also be used for the Malaria app, although content could fit into several different models, depending on what the ultimate aim is.
When designing new m-learning content, some good starter questions are:
-What reference materials are you using to create the training course?
-How is the training currently delivered? As a course? For reference? During face to face training?
-How do you want it to be used? As reference? As a course with a completion test? Alone? In a group?
-Does the content lend itself to being broken down into sections?
-What is the desired end state? Do you aim to change behaviorseg mosquito nets / understanding risk, or to provide support for e.g. identifying disease?
Development cycle
When planning mobile content, you need an awareness of several different dimensions:
Idea
Try to clarify exactly what your app is intended to do. Think about what you want to include and how you want to categorize the information.
Check other similar apps – for good ideas, and to learn from their mistakes!.
Keep the idea in focus with reference to the desired end state, during all the stages of its development.
Who is your app aimed at? Be clear about your intended users, especially if this covers different types of users.
Be as clear as you can about your success criteria. How can you be sure you have succeeded?
What testing have you put in place?
Technology
What are your target platforms: iPhones? Smartphones? All phones? (We are assuming “smart”).
Will people pay for the app?(We are assuming not).
Online or Offline? (We are assuming, much like Global MedAid, that offline is important).
Navigation of the app:how does the user navigate through the information?
Content
What devices are you designing for? Think about the screen size and if the screen needs to rotate.
Plan how you will use the content that you have, and where it will fit within the schema you have designed for the app. You may have to revisit this as you proceed.
Don’t make the app too text heavy, or info-heavy. Mobile works best in short (usually 5 minute) chunks. Be succinct, and if necessary find alternative ways to present information.
Make the content engaging: mix up interactivities and use interesting assets.
We recommend prototyping: design one module, and build / test it before writing the others. This will give you the opportunity to understand the metaphor better, and to make any required adjustments.
Be creative in using different interactions for questions: multi-choice, single select, drag and drop, matching activities.
Use media/visuals to enhance the content (but not as unnecessary “decoration”). Add rich media in the form of images (photo or illustrated), audio, video.
Make the content appropriate and relevant to the intended user(s).
User experience
Test your app at all stages: it will improve the finished product enormously and give you more confidence and credibility with the app.
Try to find testers who are as close to your intended users as possible.
Observe how the user interacts and where they get stuck. They will spot what you don’t see.
Ask users questions about their experience, and/or get them to “think aloud” as they are using the app. This will give you very useful information.
Limit the size of the app. The bigger it is, the less space will be on the device and the slower it may run, which may add to a user’s frustration.
Guidelines
If you are creating an iOS or Android app, check out their design guidelines. Last thing you need is to be refused at the store!
Mobile media
Introduction
Where possible, all file formats, and data standards for creating course content will be as open and platform-independent as possible. To this end, the base format of all JKO mobile courses will be governed by “mobile web standards”, or open media standards. In addition we aim to have these as optimised as possible, for smaller file size
The basic design principles are:
•All core content to be delivered in HTML5 and associated web formats. This allows for maximum portability.
•As much of the interactivity as possible to be delivered via browser-supported interactivity and styling (javascript, CSS, etc).
•Media should be formatted for cross-platform playback, instead of using platform specific formats.
In the rest of this guide, we look at both “mobile courses” (packages of html pages), and “mobile media” interchangeably. The courses would typically require a higher level of technical expertise to create than the individual media files.
- Video & audio
- eBooks
Video & audio
There are many different audio and video formats out there, and most devices (such as the iPod) and programs (such as Windows Media Player) will only take a few specific formats. An AVI or WMV movie will not play on an iPod, for example, without being converted into an MP4 file.
There are a few formats, however, that DO have close-to-universal support from smartphones. Our recommendation is to use these file formats to ensure cross platform support, and optimize them for as small a size as possible.
Audio:
File format: MP3 or AAC
Video:
Video Codec: H.264
File format: MP4
Audio codec: AAC
VIDEO: shoot for mobile. When creating mobile images / video, you need to plan your shoot differently. More close-ups. Less background distraction. Simpler shots.
Free audio & video format conversion programs
There are quitefew programs that will do this for free, with more popping up all the time. They tend to fall into a few general categories:
Device-oriented programs have very easy-to-use settings and many device presets but few, if any, user-editable settings. They are meant for converting audio and video so it can play on a portable device, such as an iPod. Suggested…
–Miksoft Mobile Media Converter:
–Pazera Video Converters Suite:
–Handbrake:
Hybrid programs make compromises to handle both types of jobs well. Suggested…
–Freemake Video Converter:
–iWisoft Free Video Converter:
–Format Factory:
Custom-oriented programs have lots of settings and the ability to save custom formats, but fewer device presets and more complicated interface. They are meant for unusualdevices or expert users. Suggested…
–FFCoder:
–Super:
Audio-only programs use their narrow focus to make the interface simpler. Suggested…
–XRecode II:
Online Conversion Websites allow you to upload a file and have it converted for you. You can then re-download the new format. There are sometimes file-size restrictions with these services, but they offer the convenience of being accessible from any browser. Suggested…
–Zamzar:
–Media converter:
We tend to use: Handbrake, Miksoft, MediaConverter, FFCoder, Super
There are many Video conversion tools available. We recommend Handbrake as a good, free one ( The settings in Handbrake we use are:
Video Codec: H.264
File format: MP4
Framerate: same as source
Ext: .mp4
Audeo codec: AAC
Web optimized: on
Modulus: 16
Output file size: 480x272 px
Average Bitrate: 960 kbps
eBooks
There are multiple formats for eBooks, but luckily you only REALLY need to know about a few:
- ePub: rapidly becoming the gold standard. Works on almost all eBook readers (except some Kindles, and older phones):
- MobiPocket (.mobi): The gold standard for mobile phone based readers. It is not dissimilar to ePub (some treat it as an earlier format of ePub).
- AZW (Amazon’s Kindle format): this is exactly the same as .mobi, but renamed (can be .mobi, .prc or .azw)
All three of these are based on XHTML / CSS (so a bit like a package of web pages). Although the eBook readers themselves are very much like web browsers, they have MUCH more limited layout controls. Most only use their own inbuilt fonts (ignoring what you tell them)
- pdf (Acrobat): All modern smartphones can load pdf files directly. This is good (for portability), but the format is BAD for mobile optimized legibility. Unlike the formats above, the layout is fixed. The page does not reflow to fit the screen. This makes for tricky reading
eBook creation and editing tools:
Most word processing and layout tools will let you EXPORT to ePub / mobi / AZW formats, however none to it particularly well, and it is very easy to create a bloated, oversized, badly formatted book. The ideal approach is to strip a book back to raw text, then re-assemble into ePub.
- You need a good conversion tool (like
- You need a raw editing tool (like Sigil at
- If your book contains images, you will need an external tool to compress these
- Make sure you test your ePub on several devices (especially the lower spec ones), and on several DIFFERENT readers. We install Aldiko, Kindle, Moon+, Stanza ...
Further tips, links, tricks and stuff:
Premade eBook templates available here:
Nice (technical) guide to the format, here:
Watch your text flow. If converting from fixed layout (like indesign / pdf) you may have hidden line breaks
Watch your markup. Most contents pages are auto-generated, based on html markup defining which heading is a chapter head, and which merely a subheading. If the markup is wrong, the index page won’t work.
Images
Android:
Devices & displays:
Screen support:
Visual design for mobile
Mobile design pattern gallery:
iOS design patterns:
Tools for building mobile friendly mock-ups:
- Blueprint / Blueprint viewer:
- Proto.io:
- MockApp: (this is the simplest one – build powerpoints)
HTML (mini course) development
Courses are self contained HTML packages (not unlike SCORM packages, or the W3C Widget definition). Developers are free to use any combinations of CSS and JS to support their course, and add richer functionalities
Any functionality supported by the local webview (web browser) is available to course developers. There are 2 different technical approaches you might adopt:
- Pure html, generic JS: by only using html and javascript with 100% browser support you can ensure that your content is truly “develop once, play on all devices”, but you are limited in the richness of the interactivity
- Optimised for different devices: If you would like to exploit a wider range of device-specific features, you can create adaptive JS calls that detect the browser type, and render optimised pages for each.
Good examples of this are by using JQueryMobile, or perhaps using WebKit specific JS calls to achieve animated effects. If you go with this approach, you are responsible for ensuring proper playback across all devices you aim to support and graceful degradation where these features are not supported
Because the content is displayed via the local browser, developers can test their content by running it live in a browser, or by downloading it direct to a mobile device.
We build our courses with our own, custom made html and javascript libraries. In addition, we use the following open source ones:
Phonegap – Access to device native capabilities
Version 1.3
JQuery Mobile – UI elements and visual effects
Version 1.5
Persistence.js - Offline capabilities
Version 0.1.1
Jsii – Javascript OO inheritance(this was built by Tribal)
Version 1.0.0
Spinning Wheel – iOS widget
Version 1.0
Flot – Charting library
Version 0.7
Sprite.js – Animation library
Version 0.9.1
Technical design for mobile
Jacob Neilsen’s advice on “designing for mobile” is relevant here:
As is this one (of MANY) sites advising on mobile web design:
Bear in mind that about 90% of the advice applies to mobile courses, but the remaining 10% are only useful for a live site (not a downloaded course)
main points:
-cut features, to eliminate things that are not core to the mobile use case;
-cut content, to reduce word count and defer secondary information to secondary pages;
-design with a fluid layout to cope with different screen sizes (min-width: 320px);
-use css3 for visual effects (not loads of image slices);
-enlarge interface elements, to accommodate "fat fingers" (suggest 44x44px).
Finally, some top tips from us ...
Top tips from Tribal:
- Smartphones = tactile interactions = good for engagement
- M-learning is all about context of use
- Cross platform = good value for money
- Allow offline working, but online tracking
- Beyond courses = performance support and job aids
- Make use of the phone!
GPS / Camera / Speech / Connectivity - Not about the technologies themselves, but how they are used. Mobile is a tool, not just a channel
- Keep projects agile
Links
And guidance from the US Gvt ...
ADL mLearning guide ( suggests you use methods and strategies you already know from instructional design and from web or e-learning development may also apply to mobile. However, additional attention should be paid to:
•Confirming that mobile delivery makes sense
•Understanding the targeted end-users and their contexts
•Meeting the specific goals and requirements for project
•Making a clear distinction between "learning" and "performance support"
•Creating content that is short and to the point
•Designing the user interface, especially the navigation
•Creating a storyboard with modules that can be accessed from any point
•Designing non-linear content
•Creating the smallest possible modules - smaller chunks of context-independent content
•Considering using phrases like “For more information” or “To learn more.”
•Prototype, prototype, prototype (start small, think big)
•Determining tracking requirements
•Planning for the disconnected mobile user
•Guiding the learner to other content where they can catch up or explore further
•Thinking “transform” not “transfer”
Development Tips ()
•Avoid placing important text inside graphics
•Optimize the size of graphics for faster download
•Avoid background graphics
•Use Post-it notes or stencils for storyboarding
•Increase use of color, bold, and font types to boost effectiveness / prevent loss of emphasis
•Use bullets to make contextual information more concise
•Avoid using pop-up windows, frames, tables and columns
•Do not requiring scrolling to the right; content should fit the screen dynamically
•Interactivity is not nearly as relevant in performance support
•A good checklist could be worth much more than an interactive game
•Develop for the users instead of the devices
•Consider utilization of some of the new capabilities of mobile devices as long as it improves the user experience
•Know the limitations and capabilities of the technologies involved
•Flash is not universally supported
•Plan to support HTML5 & CSS3
•Develop the appropriate learning content or experiences for mobile
Creating mobile content / Page 1April 2012