Designing Learning formobile devices
Nick [email protected]/NickFloro
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 1 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 2 of 79
Understanding the Technology
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 3 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 4 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 5 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 6 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 7 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 8 of 79
desktop
Content StrategyDesigning for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 9 of 79
desktoptabletphone
Content StrategyDesigning for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 10 of 79
desktop
tablet
phone
Content StrategyDesigning for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 11 of 79
Content Strategy
desktoptabletphone
> Think Mobile FirstDesigning for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 12 of 79
• Documents• Audio• Video• Web
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 13 of 79
Designingyour mobile content
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 14 of 79
Flat Pages
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 15 of 79
Apple Weather
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 16 of 79
Yahoo Weather
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 17 of 79
Tab Bar
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 18 of 79
Apple Clock
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 19 of 79
Tree Structure
One
Two
Three
Four
Five
Six
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 20 of 79
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 21 of 79
First Aid
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 22 of 79
Innovation
>
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 23 of 79
evernote
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 24 of 79
evernote
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 25 of 79
Pulse
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 26 of 79
Pulse
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 27 of 79
Zite
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 28 of 79
Zite
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 29 of 79
App or Web Delivery
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 30 of 79
Google Chrome 31% Yes
Mozilla Firefox 20% Yes
Internet Explorer 7-8 11% No
Internet Explorer 9-10 10% Yes
Apple Safari 15% Yes
iPhone / iPad 4% Yes
Google Android 2% Yes
Other 4% No
Market Share HTML5 Support
Browser Stats 2014Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 31 of 79
Web AppServer
Game / SimulationTool
Hybrid
InfoTool
Resources
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 32 of 79
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
Which is right for your project?
Enterprise Deployment
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 33 of 79
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 34 of 79
PhoneGap.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 35 of 79
• network latency• input mechanism• memory
• form factor
• computational power
• context• battery
Mobile Factors
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 36 of 79
AmazonA Quick Look
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 37 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 38 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 39 of 79
The mobile environmentsingle early failure = non-returning user
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 40 of 79
The mobile environmentcrucial first 30-60 seconds usage
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 41 of 79
The mobile environmentFewer options
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 42 of 79
Examples
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 43 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 44 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 45 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 46 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 47 of 79
Focus on the
Audience1
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 48 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 49 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 50 of 79
is the keyContent
2
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 51 of 79
Transparent
Interface3
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 52 of 79
Designing Apps
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 53 of 79
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 54 of 79
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
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 55 of 79
Design for Flexibility
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 56 of 79
Testing
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 57 of 79
Test on Windows 8, 7, Vista, XP• Internet Explorer 6, 7, 8, 9, 10, 11
• Firefox 4.0, 10-13 +
• Chrome 15 - 19 +
Test on OS X− Safari 5 - 7+
− Firefox 20 - 23 +
− Chrome 25 - 33 +
Test on Mobile− iOS 4.x - 7.x
− Android 2.x - 4.x
− Windows 8
− Tablet vs Phone
− Portrait vs Landscape
Testing CodeDesigning for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 58 of 79
Test for Usability
• Have someone with fresh
eyes test drive your site to
make sure it accomplishes
both user goals and site
goals
• Survey
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 59 of 79
Capture & Analyze
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 60 of 79
Using CoverFlow view and Preview of Graphics
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 61 of 79
MoreExamples
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 62 of 79
Downloads
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 63 of 79
ResourcesTo help you grow.
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 64 of 79
kuler.adobe.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 65 of 79
abookapart.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 66 of 79
SmashingMagazine.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 67 of 79
Nancy Durate Garr Reynolds
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 68 of 79
Screencasts 101 Mini-Session
JingProject.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 69 of 79
html5rocks.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 70 of 79
www.uxmag.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 71 of 79
www.twitter.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 72 of 79
www.lrnchat.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 73 of 79
evernote.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 74 of 79
reflectorapp.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 75 of 79
Don’t Settle
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 76 of 79
Download the Presentation at:http://www.slideshare.net/nickfloro
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 77 of 79
www.launchcycle.com
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 78 of 79
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Designing for Mobile Devices Nick Floro
Learning Solutions 2014 | eLearning Guild 03/21/14 79 of 79
Recommended
