DesigningMobile Learning Design & Strategy
Nick [email protected]/NickFloro
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 1 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 2 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 3 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 4 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 5 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 6 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 7 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 8 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 9 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 10 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 11 of 105
Learning & Training
deliver everywhere
replace
compliment
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 12 of 105
desktoptabletphone
Content StrategymLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 13 of 105
Content StrategymLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 14 of 105
Adaptive A unique version for each device type.
desktoptabletphone
Requires maintenance on each version.
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 15 of 105
desktoptabletphone
Think Mobile FirstmLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 16 of 105
desktoptabletphone
Think Mobile FirstmLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 17 of 105
desktoptabletphone
Think Mobile First
Progressive Enhancement
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 18 of 105
Things to consider
Browser Support
Content
Current technology or solution in place?
TimePerformance
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 19 of 105
Specifications
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 20 of 105
Selecting a SizePixels & Aspect Ratio
iPhone 4960 x 640
iPhone480 x 320
iPhone 51136 x 640
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 21 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 22 of 105
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x 640iPhone
480 x 320
iPhone 51136-by-640
Galaxy1280 x 720
Galaxy S41920 x1080
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 23 of 105
Android Xoom1280 x 720Galaxy SIII
1280 x 720
Selecting a SizePixels & Aspect Ratio
Droid960 x 540
Kindle Fire 71024 x 600
Galaxy Note 21280 x 720
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 24 of 105
Android Xoom1280 x 720
Selecting a SizePixels & Aspect Ratio
iPad 3rd gen +2048 x 1536
iPad1024 x 768
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 25 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 26 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 27 of 105
Classifying Apps
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 28 of 105
Flat Pages
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 29 of 105
Apple Weather
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 30 of 105
Yahoo Weather
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 31 of 105
Tab Bar
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 32 of 105
Apple Clock
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 33 of 105
Tree Structure
One
Two
Three
Four
Five
Six
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 34 of 105
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 35 of 105
First Aid
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 36 of 105
First Aid
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 37 of 105
First Aid
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 38 of 105
Innovation
>
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 39 of 105
evernote
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 40 of 105
evernote
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 41 of 105
Pulse
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 42 of 105
Pulse
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 43 of 105
Zite
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 44 of 105
Zite
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 45 of 105
Responsive Design
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 46 of 105
getskeleton.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 48 of 105
twitter.github.io/bootstrap/
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 49 of 105
Focus on the
Audience
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 50 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 51 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 52 of 105
Sketching where ideas begin
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 53 of 105
Visual Thinking
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 54 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 55 of 105
Adobe IdeasEvernote Skitch
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 56 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 57 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 58 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 59 of 105
Prototyping test driving your idea
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 60 of 105
Tools:
• Wireframes– Powerpoint / Keynote
Quick Prototyping Techniques
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 61 of 105
This is my question example where you would tell a story and ask for a response?
option 1
option 2
option 3
option 4
option 5
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 62 of 105
This is my question example where you would tell a story and ask for a response?
Answer example the user could select from one of the options.
Answer example the user could select from one of the options.
Answer example the user could select from one of the options.
Answer example the user could select from one of the options.
Answer example the user could select from one of the options.
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 63 of 105
simplify everything
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 64 of 105
keynotekungfu.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 65 of 105
Custom Template in Keynote
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 66 of 105
Adobe Acrobat
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 67 of 105
Adobe Acrobat Pro | Building Prototypes with PDF Links
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 68 of 105
POP - Prototyping on Paper
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 69 of 105
POP - Prototyping on Paper
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 70 of 105
POP - Prototyping on Paper
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 71 of 105
POP - Prototyping on Paper
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 72 of 105
POP - Prototyping on Paper
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 73 of 105
balsamiq.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 74 of 105
Sketchy & iMockUps
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 75 of 105
www.teehanlax.com/tools/
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 76 of 105
User Interface | UI
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 77 of 105
User Interface | UI
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 78 of 105
User Experience | UX
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 79 of 105
AmazonA Quick Example
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 80 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 81 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 82 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 83 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 84 of 105
Amazon Windowshop
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 85 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 86 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 87 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 88 of 105
Design for Flexibility
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 89 of 105
Challenges
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 90 of 105
TestingmLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 91 of 105
Test on Mobile− iOS 4.x - 6.x− Android 2.x - 4.x− Amazon Fire− 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 25 +- Chrome 25 +
Test on OS X− Safari 4, 5+− Firefox 25 +− Chrome 25 +
Testing CodemLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 92 of 105
What’s next...
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 93 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 94 of 105
ResourcesTo help you grow.
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 95 of 105
w3schools.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 96 of 105
LearnToProgram.tv
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 97 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 98 of 105
RESPONSIVE WEB DESIGNby ETHAN
MARCOTTE
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 99 of 105
kuler.adobe.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 100 of 105
Adobe Kuler kuler.adobe.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 101 of 105
reflectorapp.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 102 of 105
How it works.For Homework: www.apple.com/designed-by-apple/
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 103 of 105
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 104 of 105
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 105 of 105