Designing Mobile Learning

1,927 views

Published on

This session will provide you with the foundation and resources to get started in mobile design. You’ll learn best practices for designing for mobile and what challenges you may face in platforms, frameworks, and technology including smartphones vs. tablets vs. next-generation touch devices. We’ll discuss and provide techniques for designing mobile apps that work from sketching to prototyping, the tools you can use to help visualize concepts, and how to prototype quickly. You’ll learn about development tools and how you can use HTML5 and CSS3 with responsive frameworks to create courses and apps that can be delivered to mobile and desktop devices.

Published in: Mobile, Education, Technology

Designing Mobile Learning

  1. 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. 2. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 2 of 105
  3. 3. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 3 of 105
  4. 4. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 4 of 105
  5. 5. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 5 of 105
  6. 6. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 6 of 105
  7. 7. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 7 of 105
  8. 8. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 8 of 105
  9. 9. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 9 of 105
  10. 10. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 10 of 105
  11. 11. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 11 of 105
  12. 12. Learning & Training deliver everywhere replace compliment mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 12 of 105
  13. 13. desktoptabletphone Content Strategy mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 13 of 105
  14. 14. Content Strategy mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 14 of 105
  15. 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. 16. desktoptabletphone Think Mobile First mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 16 of 105
  17. 17. desktoptabletphone Think Mobile First mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 17 of 105
  18. 18. desktoptabletphone Think Mobile First Progressive Enhancement mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 18 of 105
  19. 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. 20. Specifications mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 20 of 105
  21. 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. 22. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 22 of 105
  23. 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. 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. 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. 26. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 26 of 105
  27. 27. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 27 of 105
  28. 28. Classifying Apps mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 28 of 105
  29. 29. Flat Pages mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 29 of 105
  30. 30. Apple Weather mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 30 of 105
  31. 31. Yahoo Weather mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 31 of 105
  32. 32. Tab Bar mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 32 of 105
  33. 33. Apple Clock mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 33 of 105
  34. 34. Tree Structure One Two Three Four Five Six mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 34 of 105
  35. 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. 36. First Aid mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 36 of 105
  37. 37. First Aid mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 37 of 105
  38. 38. First Aid mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 38 of 105
  39. 39. Innovation > mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 39 of 105
  40. 40. evernote mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 40 of 105
  41. 41. evernote mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 41 of 105
  42. 42. Pulse mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 42 of 105
  43. 43. Pulse mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 43 of 105
  44. 44. Zite mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 44 of 105
  45. 45. Zite mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 45 of 105
  46. 46. Responsive Design mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 46 of 105
  47. 47. getskeleton.com mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 48 of 105
  48. 48. twitter.github.io/bootstrap/ mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 49 of 105
  49. 49. Focus on the Audience mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 50 of 105
  50. 50. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 51 of 105
  51. 51. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 52 of 105
  52. 52. Sketching where ideas begin mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 53 of 105
  53. 53. Visual Thinking mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 54 of 105
  54. 54. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 55 of 105
  55. 55. Adobe IdeasEvernote Skitch mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 56 of 105
  56. 56. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 57 of 105
  57. 57. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 58 of 105
  58. 58. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 59 of 105
  59. 59. Prototyping test driving your idea mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 60 of 105
  60. 60. Tools: • Wireframes – Powerpoint / Keynote Quick Prototyping Techniques mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 61 of 105
  61. 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. 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. 63. simplify everything mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 64 of 105
  64. 64. keynotekungfu.com mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 65 of 105
  65. 65. Custom Template in Keynote mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 66 of 105
  66. 66. Adobe Acrobat mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 67 of 105
  67. 67. Adobe Acrobat Pro | Building Prototypes with PDF Links mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 68 of 105
  68. 68. POP - Prototyping on Paper mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 69 of 105
  69. 69. POP - Prototyping on Paper mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 70 of 105
  70. 70. POP - Prototyping on Paper mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 71 of 105
  71. 71. POP - Prototyping on Paper mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 72 of 105
  72. 72. POP - Prototyping on Paper mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 73 of 105
  73. 73. balsamiq.com mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 74 of 105
  74. 74. Sketchy & iMockUps mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 75 of 105
  75. 75. www.teehanlax.com/tools/ mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 76 of 105
  76. 76. User Interface | UI mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 77 of 105
  77. 77. User Interface | UI mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 78 of 105
  78. 78. User Experience | UX mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 79 of 105
  79. 79. Amazon A Quick Example mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 80 of 105
  80. 80. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 81 of 105
  81. 81. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 82 of 105
  82. 82. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 83 of 105
  83. 83. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 84 of 105
  84. 84. Amazon Windowshop mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 85 of 105
  85. 85. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 86 of 105
  86. 86. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 87 of 105
  87. 87. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 88 of 105
  88. 88. Design for Flexibility mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 89 of 105
  89. 89. Challenges mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 90 of 105
  90. 90. Testing mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 91 of 105
  91. 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. 92. What’s next... mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 93 of 105
  93. 93. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 94 of 105
  94. 94. ResourcesTo help you grow. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 95 of 105
  95. 95. w3schools.com mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 96 of 105
  96. 96. LearnToProgram.tv mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 97 of 105
  97. 97. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 98 of 105
  98. 98. RESPONSIVE WEB DESIGNby ETHAN MARCOTTE mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 99 of 105
  99. 99. kuler.adobe.com mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 100 of 105
  100. 100. Adobe Kuler kuler.adobe.com mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 101 of 105
  101. 101. reflectorapp.com mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 102 of 105
  102. 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. 103. mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 104 of 105
  104. 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

×