Embed Size (px)
DESCRIPTION
Learn how to design and architect mobile apps for learning. Whether you are looking to develop a web based app, course or tool or if you want to deliver a native app. Resources included for best practices, sketching, wireframing, prototyping and design.
Citation preview
Nick [email protected]/NickFloro
Mobile AppsPutting Learning in the Palm of your Hand
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 1 of 117
Mobile devices everywhere
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 2 of 117
138.5million smartphones in US
58% of phone market
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 3 of 117
4.5 billionsmartphones by 2018
60% on LTE
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 4 of 117
70 billion apps in 2013
Smartphones 58 billion and 14 billion to tablets
estimated
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 5 of 117
How do you define mobile?
a. smartphoneb. tabletc. laptopd.all of the above
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 6 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 7 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 8 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 9 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 10 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 11 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 12 of 117
Understanding the Technology
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 13 of 117
A great pocket computer.PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 14 of 117
Content consumption.
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 15 of 117
Create & organize.
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 16 of 117
Games, games, games.
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 17 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 18 of 117
desktop
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 19 of 117
desktop
phone
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 20 of 117
desktop
tabletphone
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 21 of 117
desktop
tablet
phone
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 22 of 117
desktoptabletphone
Think Mobile First
Progressive Enhancement
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 23 of 117
7 Questions to Define a Project
What is the goal?What are the learning objectives?
Who is the audience and how will they use it?
What is the timetable?
Current technology or solution in place?
What is the budget?
Does the content exist?
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 24 of 117
• network latency• input mechanism• memory
• form factor
• computational power
• context• battery
Mobile Factors
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 25 of 117
App or Web Delivery
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 26 of 117
Web AppServer
Game / SimulationTool
Hybrid
InfoTool
Resources
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 27 of 117
Web App Native App
• Use web standards
• Easy to deploy & update
• Support all devices
• Faster development cycle
• Works everywhere
• Requires web connection
• Faster performance
• Unique platform features
• Requires programming
• Deploy via Store models
• iOS / Android / Amazon
• Increase Costs per OS
Which is right for your project?
Enterprise Deployment
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 28 of 117
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 29 of 117
Responsive DesignPMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 30 of 117
Create a Road Map
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 31 of 117
Does everything need to be mobile?
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 32 of 117
AmazonA Quick Look
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 33 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 34 of 117
Amazon AppHybrid App
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 35 of 117
The mobile environmentsingle early failure = non-returning user
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 36 of 117
The mobile environmentcrucial first 30-60 seconds usage
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 37 of 117
The mobile environmentFewer options
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 38 of 117
Graphics Location Storage Speed
Solving Developer Challenges
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 39 of 117
Examples
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 40 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 41 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 42 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 43 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 44 of 117
Develop once, deliver everywhere.
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 45 of 117
What do I really need to know?
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 46 of 117
Focus on the
Audience
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 47 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 48 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 49 of 117
Content is Key
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 50 of 117
simplify.
write it down
cut in halfcut it again
breakcut it by half
wrap
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 51 of 117
Designing Apps
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 52 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 53 of 117
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x 640
iPhone480 x 320
Galaxy1280 x 720
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 54 of 117
Do I need to know ALL of this?
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 55 of 117
Flat Pages
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 56 of 117
Apple Weather
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 57 of 117
Yahoo Weather
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 58 of 117
Yahoo Weather
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 59 of 117
Tab Bar
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 60 of 117
Apple Clock
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 61 of 117
Tree Structure
One
Two
Three
Four
Five
Six
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 62 of 117
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 63 of 117
First Aid
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 64 of 117
First Aid
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 65 of 117
First Aid
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 66 of 117
Innovation
>
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 67 of 117
evernote
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 68 of 117
evernote
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 69 of 117
Pulse
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 70 of 117
Pulse
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 71 of 117
Zite
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 72 of 117
Zite
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 73 of 117
Sketching where ideas begin
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 74 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 75 of 117
keynotekungfu.com
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 76 of 117
Sketchy & iMockUps
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 77 of 117
Prototyping test driving your idea
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 78 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 79 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 80 of 117
Adobe Acrobat
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 81 of 117
POP - Prototyping on Paper
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 82 of 117
POP - Prototyping on Paper
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 83 of 117
POP - Prototyping on Paper
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 84 of 117
POP - Prototyping on Paper
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 85 of 117
POP - Prototyping on Paper
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 86 of 117
Is prototyping really necessary?
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 87 of 117
Design for Flexibility
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 88 of 117
Testing
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 89 of 117
Test on Mobile− iOS 6.x - 7.x
− Android 2.x - 4.x
− Windows 8
− Tablet vs Phone
− Portrait vs Landscape
Test on Windows 8, 7, Vista, XP
- Internet Explorer 6, 7, 8, 9, 10
- Firefox 19 +
- Chrome 20 +
Test on OS X− Safari 4, 5+
− Firefox 19 +
− Chrome 20 +
Testing Code
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 90 of 117
Test for Usability
• Have someone with fresh
eyes test drive your site to
make sure it accomplishes
both user goals and site
goals
• Survey
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 91 of 117
Capture & Analyze
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 92 of 117
Using CoverFlow view and Preview of Graphics
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 93 of 117
My project is different, is this all relevant to me?
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 94 of 117
What ideas will you apply from today?
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 95 of 117
ResourcesTo help you grow.
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 96 of 117
Encourage your team to be creative.
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 97 of 117
Development & Content Tools HTML5 / CSS / JavaScript
Dreamweaver Adobe Crea5ve Cloud Jquery.com Sencha Touch Edge Code, Inspect Adobe Crea5ve Cloud
Graphics Fireworks Photoshop
HTML Canvas Anima8on Edge – Adobe Crea5ve Cloud Sencha Animator Hype (mac only)
Video (H264 for mobile / html5) Camtasia Video Editor (Vegas, Premiere) Adobe Media Encoder QuickTime Telestream Cleaner Adobe ASer Effects
Audio Audacity (open source – free) Adobe Audi5on (crea5ve cloud)
CMS WordPress (BuddyPress), Joomla, Drupal Blogs/Wikis
Rapid (mul8media) Content Tools Adobe Cap5vate Ar5culate StoryLine Lectora RapidIntake
Adobe Acrobat Social Tools
Facebook, YouTube, TwiZer, Google Plus, Yammer, MicrosoS Sharepoint
Wireframing / Sketching Keynote / PowerPoint Balsamiq Briefs (mac only) Notebook and Crayons
Mobile Development with Nick Floro
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 98 of 117
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 99 of 117
kuler.adobe.com
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 100 of 117
Adobe Kuler kuler.adobe.com
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 101 of 117
abookapart.com
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 102 of 117
www.smashingmagazine.com
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 103 of 117
Nancy Durate Garr Reynolds
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 104 of 117
evernote.com/skitch/
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 105 of 117
html5rocks.com
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 106 of 117
www.uxmag.com
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 107 of 117
www.twitter.com
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 108 of 117
www.lrnchat.com
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 109 of 117
reflectorapp.com
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 110 of 117
Don’t Settle
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 111 of 117
How it works.
www.apple.com/designed-by-apple/
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 112 of 117
Download the Presentation at:http://www.slideshare.net/nickfloro
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 113 of 117
what’s next...
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 114 of 117
Are you ready?
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 115 of 117
LaunchCycle.com
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 116 of 117
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
PMI Networks Forum 10/3/13
Understanding Mobile Apps for Learning 10/04/13 117 of 117
