Designing Mobile Learning
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Designing Mobile Learning

on

  • 690 views

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

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.

Statistics

Views

Total Views
690
Views on SlideShare
643
Embed Views
47

Actions

Likes
8
Downloads
28
Comments
0

1 Embed 47

https://twitter.com 47

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing Mobile Learning Presentation Transcript

  • 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