Content Gone Mobile

In This Presentation

• Concepts of content for mobile reading

• Mobile content best practices

• A look at Technical instructions gone mobile

Mobile devices are…

• Portable• Hand held • Usually refers to

Smart Phones or Tablets (with a touch screen)

Picture from jquerymobile.com

Mobile in 2013• Brand wars will fuel innovation (devices)

• Apps evolving and becoming more useful not just “time killers”

and games.

• Digital wallets

• Flexible devices

• Personal cloud

• Seamless user experience

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

Content 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

Technical Content Gone Mobile

Picture from 123rf.com

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

Where to Find Further Information• Tapworthy Designing Great iPhone Apps

By Josh ClarkPublisher: O'Reilly Media

• Content Strategy For MobileBy Karen Mcgrane

• www.SmashingMagazine.com• Mobile Summit• Mobile Mondays (www.momotlv.com)

Thank You•mayairv@yahoo•@Maya_Regev