Going mobile writing content for mobile

Going MobileWhat you need to know

to create content for mobile devices

In This Presentation

• Mobile and Mobile devices

• Types of technical content to write for mobile

• Design considerations (layout, language)

• Look at instructions for mobile devices

• Publishing to mobile (Out put types, Tools, Single sourcing)

What is mobile?“It’s not about the platform or technology its

about the context. And when we differentiate by context, mobile as a concept, and a device, … into a range of scenarios: from interacting with the barcodes in a shop, to checking the bus schedule on your way to the station, playing games hours on end or spending 10 minutes reading through an article ...” Helge Tenno

What are Mobile devices

• Portable• Hand held • Usually refers to

Smart Phones or Tablets (with a touch screen)

Picture from jquerymobile.com

The Big 3

From left: Lumia 900, iPhone 5, Samsung Galaxy S3

Picture from : www.cnet.com/iphone-5/

Mobile (R)EvolutionMOCOM 2020 - The Future of Mobile Media and Communication

Source: www.businessinsider.com/the-future-of-mobile-deck-2012-3?op=1

Mobile in 2013• Brand wars will fuel innovation

• Apps evolving and becoming more useful not just

“time killers” and games.

• Digital wallets

• Flexible devices

• Personal cloud

• Seamless user experience

Using mobile devices for instruction

Katy ISD -- A New Vision for Mobile Learning

What kind of technical content can we write for mobile devices?

Non APP Content on Mobile• User instructions• Technician instructions• Installation • On-site service information• Reference material• Programming Maps• Code samples and snippets• Instruction videos

Instructions for APPs

• Help• Content Sensitive Help • Tutorial, Walk-through and Demo• Reference material• Instruction videos

APP Types• Native APPs

• Native to the devices operating system, are installed and run directly on the device.

• Has access to the devices features, hardware, ect.• Do not work cross platform

• Web APPs• Runs in the mobile device’s web browser.• Limited access to the device’s native features • Can run in different devices as long as they have a

browser.

Picture from http://info.actionpaper.net

Design Considerations

Picture from www.mlwebco.com

“Reading Mobile Content Is Twice as Difficult”

Jakob Nielsen reader comprehension on mobileSummary: When reading from an iPhone-sized screen, comprehension scores for complex Web content were 48% of desktop monitor scores. Analysis of Facebook's privacy policyResults:Desktop screen: 39.18% comprehension scoreMobile screen: 18.93% comprehension score

Source: www.nngroup.com/articles/mobile-content-is-twice-as-difficult/

Keep it Focused

• Clutter free main page with links to other topics.

• Each page should focus on a topic.• Reading on small devices is hard - text is often

skimmed. • Useful information should be found at a

glance.

Keep it Vertical• Handheld devices are usually used in vertical

mode.• Scrolling down is fine,

sideways is okay sometimes. Scrolling up, down left & right is disorienting.

Picture from www.funnyjunk.com/

Keep it in Style• Mobile Users have mobile design expectations

layout, buttons, mobile language • Apps have character

Picture from wt.blog.ictea.com/?cat=11

Keep it Light

• Heavy graphics and media slow down the phone and can cause time out.

Picture from www.tested.com/

Design for Easy Thumb Reach

Picture from//mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/

• Controls at the bottom• Scrollable content and buttons

in the middle.• Headers for viewing only on

top.• Consider left handers

Mobile Language

Source: http://static.lukew.com/TouchGestureCards.pdf

Sample of Help

http://mobiledesignpatterngallery.com

Sample of Demo

Source: www.inspireux.com/

Sample of Tutorial

Source: www.inspireux.com/

Sample of Walkthrough

Source: www.inspireux.com/

Sample of Screen Overlay

www.inspireux.com/

http://mobiledesignpatterngallery.com

http://mobiledesignpatterngallery.com

Sample of instructions

Publishing to Mobile

Picture from 123rf.com

Output Types

• Instruction APP• Stand alone PDFs• Widget or Mobile Website• Help

• Mobile help• HTML5

• ePub for Reading devices

Tools

• Wiziapps – for making APP’s• Iridize – on page instructions, walkthrough

demos• PDF• Flare (Web APP and HTML5) • Robohelp 10 (Android native APP & Web APP)

Single Sourcing

• Flare (Web APP and HTML5) • Robohelp 10 (Android native APP & Web APP)

• Plan for Mobile content:• Skins• Page breaks• Mobile language• Remove or trim graphics

Where to Find Further Information• Tapworthy Designing Great iPhone Apps

By Josh ClarkPublisher: O'Reilly Media

• Content Strategy For MobileBy Karen Mcgrane

• Neil Perlin • Tom Johnson - idratherbewriting.com• www.SmashingMagazine.com• Mobile Summit• Mobile Mondays (www.momotlv.com)

Thank You•mayairv@yahoo•@Maya_Regev