The document appears to be a presentation by Nick Floro on designing mobile learning. It discusses various topics related to designing for mobile such as content strategy, responsive design, prototyping techniques, and testing. It provides examples and recommendations for how to approach designing effective mobile learning experiences and applications. The presentation was delivered on June 24, 2014 at the mLearnCon conference.

1. DesigningMobile Learning
Design & Strategy
Nick Floro
Nick@sealworks.com
Twitter.com/NickFloro
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 1 of 105

2. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 2 of 105

3. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 3 of 105

4. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 4 of 105

5. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 5 of 105

6. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 6 of 105

7. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 7 of 105

8. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 8 of 105

9. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 9 of 105

10. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 10 of 105

11. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 11 of 105

12. Learning &
Training
deliver
everywhere
replace
compliment
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 12 of 105

13. desktoptabletphone
Content Strategy
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 13 of 105

14. Content Strategy
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 14 of 105

15. 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

16. desktoptabletphone
Think Mobile First
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 16 of 105

17. desktoptabletphone
Think Mobile First
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 17 of 105

18. desktoptabletphone
Think Mobile First
Progressive Enhancement
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 18 of 105

19. Things to consider
Browser Support
Content
Current technology
or solution in
place?
Time
Performance
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 19 of 105

20. Specifications
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 20 of 105

21. Selecting a Size
Pixels & Aspect Ratio
iPhone 4
960 x 640
iPhone
480 x 320
iPhone 5
1136 x 640
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 21 of 105

22. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 22 of 105

23. Android Xoom
1280 x 720
HTC Incredible
800 x 480
Selecting a Size
Pixels & Aspect Ratio
iPad
1024 x 768
iPhone 4
960 x 640iPhone
480 x 320
iPhone 5
1136-by-640
Galaxy
1280 x 720
Galaxy S4
1920 x1080
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 23 of 105

24. Android Xoom
1280 x 720Galaxy SIII
1280 x 720
Selecting a Size
Pixels & Aspect Ratio
Droid
960 x 540
Kindle Fire 7
1024 x 600
Galaxy Note 2
1280 x 720
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 24 of 105

25. Android Xoom
1280 x 720
Selecting a Size
Pixels & Aspect Ratio
iPad 3rd gen +
2048 x 1536
iPad
1024 x 768
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 25 of 105

26. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 26 of 105

27. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 27 of 105

28. Classifying Apps
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 28 of 105

29. Flat Pages
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 29 of 105

30. Apple Weather
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 30 of 105

31. Yahoo Weather
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 31 of 105

32. Tab Bar
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 32 of 105

33. Apple Clock
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 33 of 105

34. Tree Structure
One
Two
Three
Four
Five
Six
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 34 of 105

35. 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

36. First Aid
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 36 of 105

37. First Aid
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 37 of 105

38. First Aid
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 38 of 105

39. Innovation
>
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 39 of 105

40. evernote
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 40 of 105

41. evernote
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 41 of 105

42. Pulse
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 42 of 105

43. Pulse
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 43 of 105

44. Zite
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 44 of 105

45. Zite
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 45 of 105

46. Responsive Design
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 46 of 105

47. getskeleton.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 48 of 105

48. twitter.github.io/bootstrap/
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 49 of 105

49. Focus on the
Audience
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 50 of 105

50. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 51 of 105

51. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 52 of 105

52. Sketching
where ideas begin
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 53 of 105

53. Visual Thinking
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 54 of 105

54. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 55 of 105

55. Adobe IdeasEvernote Skitch
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 56 of 105

56. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 57 of 105

57. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 58 of 105

58. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 59 of 105

59. Prototyping
test driving your idea
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 60 of 105

60. Tools:
• Wireframes
– Powerpoint / Keynote
Quick Prototyping Techniques
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 61 of 105

61. 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

62. 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

63. simplify everything
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 64 of 105

64. keynotekungfu.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 65 of 105

65. Custom Template in Keynote
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 66 of 105

66. Adobe Acrobat
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 67 of 105

67. Adobe Acrobat Pro | Building Prototypes with PDF Links
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 68 of 105

68. POP - Prototyping on Paper
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 69 of 105

69. POP - Prototyping on Paper
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 70 of 105

70. POP - Prototyping on Paper
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 71 of 105

71. POP - Prototyping on Paper
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 72 of 105

72. POP - Prototyping on Paper
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 73 of 105

73. balsamiq.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 74 of 105

74. Sketchy & iMockUps
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 75 of 105

75. www.teehanlax.com/tools/
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 76 of 105

76. User Interface | UI
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 77 of 105

77. User Interface | UI
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 78 of 105

78. User Experience | UX
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 79 of 105

79. Amazon
A Quick Example
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 80 of 105

80. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 81 of 105

81. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 82 of 105

82. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 83 of 105

83. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 84 of 105

84. Amazon Windowshop
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 85 of 105

85. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 86 of 105

86. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 87 of 105

87. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 88 of 105

88. Design for Flexibility
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 89 of 105

89. Challenges
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 90 of 105

90. Testing
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 91 of 105

91. 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 Code
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 92 of 105

92. What’s next...
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 93 of 105

93. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 94 of 105

94. ResourcesTo help you grow.
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 95 of 105

95. w3schools.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 96 of 105

96. LearnToProgram.tv
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 97 of 105

97. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 98 of 105

98. RESPONSIVE WEB
DESIGNby ETHAN
MARCOTTE
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 99 of 105

99. kuler.adobe.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 100 of 105

100. Adobe Kuler kuler.adobe.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 101 of 105

101. reflectorapp.com
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 102 of 105

102. 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

103. mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 104 of 105

104. Thank You
Nick Floro
nick@sealworks.com
twitter.com/NickFloro
Download the Presentation at:
http://www.slideshare.net/nickfloro
mLearnCon Nick Floro sealworks.com
Designing Mobile Learning 06/24/14 105 of 105