Nick [email protected]/NickFloro
HTML
Launching a Mobile AppConcept to Launch
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 1 of 123
How do you define mobile?
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 2 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 3 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 4 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 5 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 6 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 7 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 8 of 123
What technology will you support?
a. smartphoneb. tabletc. laptopd.all of the above
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 9 of 123
Mobile devices everywhere
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 10 of 123
138.5million smartphones in US
58% of phone market
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 11 of 123
4.5 billionsmartphones by 2018
60% on LTE
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 12 of 123
70 billion apps in 2013
Smartphones 58 billion and 14 billion to tablets
estimated
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 13 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 14 of 123
Define
Design
Develop
Deliver
ProcessMobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 15 of 123
Focus on the
Audience
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 16 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 17 of 123
Content StrategyMobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 18 of 123
desktoptabletphone
Content StrategyMobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 19 of 123
Create a Road Map
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 20 of 123
desktoptabletphone
Think Mobile FirstMobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 21 of 123
desktoptabletphone
Think Mobile FirstMobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 22 of 123
desktoptabletphone
Think Mobile First
Progressive Enhancement
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 23 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 24 of 123
What is Design?Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 25 of 123
How it works.
Homework: Watch www.apple.com/designed-by-apple/
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 26 of 123
It’s about communication and problem solving.
Homework: Watch www.apple.com/designed-by-apple/
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 27 of 123
Content is Key
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 28 of 123
Content Strategy
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 29 of 123
Sketching where ideas begin
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 30 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 31 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 32 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 33 of 123
Visual Thinking
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 34 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 35 of 123
Quick Prototyping Techniques
Tools:
• Fujitsu SCANSNAP – Scan direct to pdf– includes full Acrobat Pro
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 36 of 123
Prototyping test driving your idea
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 37 of 123
Paper by FiftyThree
Adobe IdeasEvernote Skitch
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 38 of 123
Tools:
• Wireframes– Keynote / PowerPoint
Quick Prototyping Techniques
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 39 of 123
keynotekungfu.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 40 of 123
Custom Template in Keynote
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 41 of 123
Adobe Acrobat
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 42 of 123
Adobe Acrobat Pro | Building Prototypes with PDF Links
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 43 of 123
balsamiq.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 44 of 123
Sketchy & iMockUps
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 45 of 123
teehanlax.com/tools/
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 46 of 123
User Interface | UI
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 47 of 123
User Interface | UI
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 48 of 123
User Experience | UX
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 49 of 123
Development: App or Web Delivery
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 50 of 123
Native App
• Faster performance
• Unique platform features
• Requires programming
• iOS / Android / Amazon
• Increased Costs per OS
AppWeb App
• Use web standards
• Easy to deploy & update
• Support all devices
• Faster development cycle
• Works everywhere
• Requires web connection
Web
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 51 of 123
How will you distribute?Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 52 of 123
How will you distribute?
App Store
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 53 of 123
How will you distribute?
App Store Deployment
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 54 of 123
How will you distribute?
App Store Deployment Web
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 55 of 123
How will you distribute?
App Store Deployment Web
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 56 of 123
How will you distribute?
App Store Deployment
Data Analytics / Reporting
Web
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 57 of 123
How will you distribute?
App Store Deployment
Data Analytics / Reporting
Web
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 58 of 123
How will you distribute?
App Store Deployment
Data Analytics / Reporting
Updates
Web
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 59 of 123
WebApp
HTML Javascript CSS API’s
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 60 of 123
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 61 of 123
html5demos.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 62 of 123
html5demos.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 63 of 123
html5demos.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 64 of 123
html5demos.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 65 of 123
Chrome
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 66 of 123
Create and deliver everywhere.Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 67 of 123
Responsive DesignMobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 68 of 123
getskeleton.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 69 of 123
twitter.github.io/bootstrap/
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 70 of 123
• bandwidth• input mechanism• context
• form factor
Mobile Factors
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 71 of 123
Technology is a tool.
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 72 of 123
Tools for Development
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 73 of 123
Adobe Creative Cloud
‣ Cloud Based Subscription
‣ Subscription Options‣ Single App $19.99 per month‣ Upgrade $29 per month‣ New $49 per month
‣ www.adobe.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 74 of 123
Adobe Captivate 7
‣ $899 Purchase
‣ 1 Year 19.99 per month
‣ 29.99 month to month
‣ www.adobe.com/products/captivate.html
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 75 of 123
TechSmith Camtasia Studio
‣ $299
‣ http://www.techsmith.com/snagit.html
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 76 of 123
Articulate Storyline
‣ $1,398 Purchase
‣ Platinum Plan Optional Add-On‣ 1 Year $559‣ 2 Year $979‣ 3 Yar $1,328
‣ www.articulate.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 77 of 123
PhoneGap.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 78 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 79 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 80 of 123
Flow chartAPI’sMobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 81 of 123
Flow chartAPI’smotion camera gps sensors
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 82 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 83 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 84 of 123
// the geolocation api brings browser based location to your apps
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 85 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 86 of 123
You are entering research. Learn More>>
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 87 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 88 of 123
Example
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 89 of 123
Star WalkMobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 90 of 123
Star WalkMobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 91 of 123
Getting InspiredUI/UX
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 92 of 123
Flat Pages
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 93 of 123
Apple Weather
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 94 of 123
Yahoo Weather
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 95 of 123
Tab Bar
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 96 of 123
Apple Clock
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 97 of 123
Tree Structure
One
Two
Three
Four
Five
Six
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 98 of 123
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 99 of 123
First Aid
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 100 of 123
Innovation
>
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 101 of 123
evernote
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 102 of 123
evernote
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 103 of 123
Pulse
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 104 of 123
Zite
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 105 of 123
Zite
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 106 of 123
Design for Flexibility
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 107 of 123
TestingMobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 108 of 123
Test on Mobile− iOS 4.x - 6.x
− Android 2.x - 4.x
− Windows 8
− Tablet vs Phablet vs Phone
− Portrait vs Landscape
Test on Windows 8, 7, Vista, XP
- Internet Explorer 6, 7, 8, 9, 10
- Firefox 15-21 +
- Chrome 15 - 19 +
Test on OS X− Safari 4, 5+
− Firefox 15-21 +
− Chrome 20 - 26 +
Testing CodeMobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 109 of 123
BrowserStack.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 110 of 123
Capture & Analyze
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 111 of 123
Using CoverFlow view and Preview of Graphics
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 112 of 123
what’s next...
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 113 of 123
ResourcesTo help you grow.
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 114 of 123
w3schools.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 115 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 116 of 123
www.uxmag.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 117 of 123
typekit.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 118 of 123
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 119 of 123
reflectorapp.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 120 of 123
airserver.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 121 of 123
abookapart.com
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 122 of 123
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Mobile - Concept to Launch Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 123 of 123
