content gone mobile
DESCRIPTION
Concept and tips for creating content for mobile.TRANSCRIPT
![Page 1: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/1.jpg)
Content Gone Mobile
![Page 2: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/2.jpg)
In This Presentation
• Concepts of content for mobile reading
• Mobile content best practices
• A look at Technical instructions gone mobile
![Page 3: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/3.jpg)
Mobile devices are…
• Portable• Hand held • Usually refers to
Smart Phones or Tablets (with a touch screen)
Picture from jquerymobile.com
![Page 4: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/4.jpg)
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
![Page 5: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/5.jpg)
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
![Page 6: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/6.jpg)
Content Design Considerations
Picture from www.mlwebco.com
![Page 7: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/7.jpg)
“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/
![Page 8: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/8.jpg)
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.
![Page 9: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/9.jpg)
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/
![Page 10: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/10.jpg)
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
![Page 11: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/11.jpg)
Keep it Light
• Heavy graphics and media slow down the phone and can cause time out.
Picture from www.tested.com/
![Page 12: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/12.jpg)
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
![Page 13: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/13.jpg)
Mobile Language
Source: http://static.lukew.com/TouchGestureCards.pdf
![Page 14: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/14.jpg)
Technical Content Gone Mobile
Picture from 123rf.com
![Page 15: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/15.jpg)
Sample of Help
http://mobiledesignpatterngallery.com
![Page 16: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/16.jpg)
Sample of Demo
Source: www.inspireux.com/
![Page 17: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/17.jpg)
Sample of Tutorial
Source: www.inspireux.com/
![Page 18: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/18.jpg)
Sample of Walkthrough
Source: www.inspireux.com/
![Page 19: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/19.jpg)
Sample of Screen Overlay
www.inspireux.com/
![Page 20: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/20.jpg)
http://mobiledesignpatterngallery.com
![Page 21: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/21.jpg)
http://mobiledesignpatterngallery.com
![Page 22: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/22.jpg)
Sample of instructions
![Page 23: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/23.jpg)
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)
![Page 24: Content gone mobile](https://reader034.vdocuments.mx/reader034/viewer/2022042714/54c859094a7959d7758b46ed/html5/thumbnails/24.jpg)
Thank You•mayairv@yahoo•@Maya_Regev