Designing Mobile Learning #LSCON13

9,195
-1

Published on

This session will provide you with the foundation you need to get started in mobile development. You'll learn best practices for designing for mobile and what challenges you may face in platforms, smartphones vs tablets vs next generation touch devices . We'll discuss and provide techniques for designing mobile apps that work, from sketching to wire framing to developing the final designs. What tools can I use to help visualize concepts and how to prototype quickly without breaking the bank. Learn about development tools and how using HTML5 and CSS3 can provide a solution for creating web based applications for mobile to desktops and optimizing for each platform. 

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,195
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
97
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Designing Mobile Learning #LSCON13

  1. Designing for Mobile LSCON13 Designing Learning for mobile devices Nick Floro Nick@sealworks.com Twitter.com/NickFloronick@sealworks.com 03/15/13 1 of 111
  2. Designing for Mobile LSCON13 Understanding the Technologynick@sealworks.com 03/15/13 2 of 111
  3. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 3 of 111
  4. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 4 of 111
  5. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 5 of 111
  6. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 6 of 111
  7. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 7 of 111
  8. Designing for Mobile LSCON13 desktopnick@sealworks.com 03/15/13 8 of 111
  9. Designing for Mobile LSCON13 desktop phonenick@sealworks.com 03/15/13 9 of 111
  10. Designing for Mobile LSCON13 desktop phone tabletnick@sealworks.com 03/15/13 10 of 111
  11. Designing for Mobile LSCON13 desktop phone tabletnick@sealworks.com 03/15/13 11 of 111
  12. Designing for Mobile LSCON13 7 Questions to Define a Project What is the budget? What is the goal? What are the learning objectives? Does the content exist? What is the timetable? Who is the audience and how will they use it? Current technology or solution in place?nick@sealworks.com 03/15/13 12 of 111
  13. Designing for Mobile LSCON13 App Application Game / Simulation Tool Hybridnick@sealworks.com 03/15/13 13 of 111
  14. Designing for Mobile LSCON13 App Web Application Info Game / Simulation Tool Tool Resources Hybridnick@sealworks.com 03/15/13 14 of 111
  15. Designing for Mobile LSCON13 App Web Application Info Game / Simulation Tool Tool Resources Hybrid Web App | Coursenick@sealworks.com 03/15/13 15 of 111
  16. Designing for Mobile LSCON13 • form factornick@sealworks.com 03/15/13 16 of 111
  17. Designing for Mobile LSCON13 • form factor • network latencynick@sealworks.com 03/15/13 17 of 111
  18. Designing for Mobile LSCON13 • form factor • network latency • input mechanismnick@sealworks.com 03/15/13 18 of 111
  19. Designing for Mobile LSCON13 • form factor • network latency • input mechanism • memorynick@sealworks.com 03/15/13 19 of 111
  20. Designing for Mobile LSCON13 • form factor • network latency • input mechanism • memory • computational powernick@sealworks.com 03/15/13 20 of 111
  21. Designing for Mobile LSCON13 • form factor • network latency • input mechanism • memory • computational power • batterynick@sealworks.com 03/15/13 21 of 111
  22. Designing for Mobile LSCON13 • form factor • network latency • input mechanism • memory • computational power • battery • contextnick@sealworks.com 03/15/13 22 of 111
  23. Designing for Mobile LSCON13 Amazonnick@sealworks.com 03/15/13 23 of 111
  24. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 24 of 111
  25. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 25 of 111
  26. Designing for Mobile LSCON13 The mobile environmentnick@sealworks.com 03/15/13 26 of 111
  27. Designing for Mobile LSCON13 The mobile environment single early failure = non-returning usernick@sealworks.com 03/15/13 27 of 111
  28. Designing for Mobile LSCON13 The mobile environment crucial first 30-60 seconds usagenick@sealworks.com 03/15/13 28 of 111
  29. Designing for Mobile LSCON13 The mobile environment Fewer optionsnick@sealworks.com 03/15/13 29 of 111
  30. Designing for Mobile LSCON13 Solving Developer Challenges Graphics Location Storage Speednick@sealworks.com 03/15/13 30 of 111
  31. Designing for Mobile LSCON13 Sample Simulation with HTML 5nick@sealworks.com 03/15/13 31 of 111
  32. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 32 of 111
  33. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 33 of 111
  34. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 34 of 111
  35. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 35 of 111
  36. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 36 of 111
  37. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 37 of 111
  38. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 38 of 111
  39. Designing for Mobile LSCON13 Pixels & Aspect Ratio Selecting a Size iPhone iPhone 4 iPhone 5 1136 x 640 480 x 320 960 x 640nick@sealworks.com 03/15/13 39 of 111
  40. Designing for Mobile LSCON13 Pixels & Aspect Ratio Selecting a Size Android Xoom 1280 x 720 iPad 3rd gen + 2048 x 1536 iPad 1024 x 768nick@sealworks.com 03/15/13 40 of 111
  41. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 41 of 111
  42. Designing for Mobile LSCON13 Pixels & Aspect Ratio Selecting a Size Droid Android Xoom Galaxy SIII 1280 x 720 960 x 540 1280 x 720 Galaxy Note 2 1280 x 720 Kindle Fire 7 1024 x 600nick@sealworks.com 03/15/13 42 of 111
  43. Designing for Mobile LSCON13 Pixels & Aspect Ratio Selecting a Size Android Xoom 1280 x 720 HTC Incredible iPad 800 x 480 1024 x 768 Galaxy 1280 x 720 iPhone 4 960 x 640 iPhone 480 x 320nick@sealworks.com 03/15/13 43 of 111
  44. Designing for Mobile LSCON13 Web Appnick@sealworks.com 03/15/13 44 of 111
  45. Designing for Mobile LSCON13 Web Appnick@sealworks.com 03/15/13 45 of 111
  46. Designing for Mobile LSCON13 CSS3 APIs HTML 5 JAVASCRIPT AJAX JQuerynick@sealworks.com 03/15/13 46 of 111
  47. Designing for Mobile LSCON13 Which is right for your project? Web (app) App • Use web standards • Faster performance • Easy to deploy & update • Unique platform features • Support all devices • Requires programming • Faster development cycle • Deploy via Store models • Works everywhere • iOS / Android / Amazon • Requires web connectionnick@sealworks.com 03/15/13 47 of 111
  48. Designing for Mobile LSCON13 Examplesnick@sealworks.com 03/15/13 48 of 111
  49. Designing for Mobile LSCON13 reflectorapp.comnick@sealworks.com 03/15/13 49 of 111
  50. Designing for Mobile LSCON13 Clientsnick@sealworks.com 03/15/13 50 of 111
  51. Designing for Mobile LSCON13 Clients Timeframesnick@sealworks.com 03/15/13 51 of 111
  52. Designing for Mobile LSCON13 Clients Timeframes Developmentnick@sealworks.com 03/15/13 52 of 111
  53. Designing for Mobile LSCON13 Clients Timeframes Development Communicationnick@sealworks.com 03/15/13 53 of 111
  54. Designing for Mobile LSCON13 How should we Design?nick@sealworks.com 03/15/13 54 of 111
  55. Designing for Mobile LSCON13 Understand Designnick@sealworks.com 03/15/13 55 of 111
  56. Designing for Mobile LSCON13 It’s about communication and problem solving.nick@sealworks.com 03/15/13 56 of 111
  57. Designing for Mobile LSCON13 Design is how it works.nick@sealworks.com 03/15/13 57 of 111
  58. Designing for Mobile LSCON13 desktop phone tabletnick@sealworks.com 03/15/13 58 of 111
  59. Designing for Mobile LSCON13 mobile firstnick@sealworks.com 03/15/13 59 of 111
  60. Designing for Mobile LSCON13 Focus on the Audiencenick@sealworks.com 03/15/13 1 60 of 111
  61. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 61 of 111
  62. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 62 of 111
  63. Designing for Mobile LSCON13 Content 2 is the keynick@sealworks.com 03/15/13 63 of 111
  64. 3Designing for Mobile LSCON13 Transparent Interfacenick@sealworks.com 03/15/13 64 of 111
  65. Designing for Mobile LSCON13 Today’s Appsnick@sealworks.com 03/15/13 65 of 111
  66. Designing for Mobile LSCON13 Flat Pagesnick@sealworks.com 03/15/13 66 of 111
  67. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 67 of 111
  68. Designing for Mobile LSCON13 Tab Barnick@sealworks.com 03/15/13 68 of 111
  69. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 69 of 111
  70. Designing for Mobile LSCON13 Tree Structurenick@sealworks.com 03/15/13 70 of 111
  71. Designing for Mobile LSCON13 < Back Screen One > Screen Two > Screen Three > Screen Four > Screen Five > Screen Six > Tree Structurenick@sealworks.com 03/15/13 71 of 111
  72. Designing for Mobile LSCON13 > Innovationnick@sealworks.com 03/15/13 72 of 111
  73. Designing for Mobile LSCON13 weathercubenick@sealworks.com 03/15/13 73 of 111
  74. Designing for Mobile LSCON13 Prototyping Prototypingnick@sealworks.com 03/15/13 74 of 111
  75. Designing for Mobile LSCON13 Quick Prototyping Techniques Tools: • Sketchesnick@sealworks.com 03/15/13 75 of 111
  76. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 76 of 111
  77. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 77 of 111
  78. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 78 of 111
  79. Designing for Mobile LSCON13 Quick Prototyping Techniques Tools: • Wireframes – Powerpoint / Keynotenick@sealworks.com 03/15/13 79 of 111
  80. Designing for Mobile LSCON13 Custom Template in Keynotenick@sealworks.com 03/15/13 80 of 111
  81. Designing for Mobile LSCON13 keynotekungfu.comnick@sealworks.com 03/15/13 81 of 111
  82. Designing for Mobile LSCON13 balsamiq.comnick@sealworks.com 03/15/13 82 of 111
  83. Designing for Mobile LSCON13 Sketchy & iMockUpsnick@sealworks.com 03/15/13 83 of 111
  84. Designing for Mobile LSCON13 teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/nick@sealworks.com 03/15/13 84 of 111
  85. Designing for Mobile LSCON13 When was the last time you sketched a interface, a idea to help illustrate your idea? If in the last week, get yourself a cookie. If not, you have until Friday to sketch something.nick@sealworks.com 03/15/13 85 of 111
  86. Designing for Mobile LSCON13 Exercisenick@sealworks.com 03/15/13 86 of 111
  87. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 87 of 111
  88. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 88 of 111
  89. Designing for Mobile LSCON13 Design for Flexibilitynick@sealworks.com 03/15/13 89 of 111
  90. Designing for Mobile LSCON13 Testingnick@sealworks.com 03/15/13 90 of 111
  91. Designing for Mobile LSCON13 Testing Code Test on Windows 8, 7, Vista, XP • Internet Explorer 6, 7, 8, 9 • Firefox 4.0, 10-13 + • Chrome 15 - 19 + Test on OS X − Safari 4, 5+ − Firefox 4.0, 10-13 + − Chrome 15 - 19 + Test on Mobile − iOS 4.x - 6.x − Android 2.x - 4.x − Windows 8 − Tablet vs Phone − Portrait vs Landscapenick@sealworks.com 03/15/13 91 of 111
  92. Designing for Mobile LSCON13 Test for Usability • Have someone with fresh eyes test drive your site to make sure it accomplishes both user goals and site goals • Surveynick@sealworks.com 03/15/13 92 of 111
  93. Designing for Mobile LSCON13 Resources To help you grow.nick@sealworks.com 03/15/13 93 of 111
  94. Designing for Mobile LSCON13 www.launchcycle.comnick@sealworks.com 03/15/13 94 of 111
  95. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 95 of 111
  96. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 96 of 111
  97. Designing for Mobile LSCON13 Capture & Analyzenick@sealworks.com 03/15/13 97 of 111
  98. Designing for Mobile LSCON13 Using CoverFlow view and Preview of Graphicsnick@sealworks.com 03/15/13 98 of 111
  99. Designing for Mobile LSCON13 kuler.adobe.comnick@sealworks.com 03/15/13 99 of 111
  100. Designing for Mobile LSCON13 abookapart.comnick@sealworks.com 03/15/13 100 of 111
  101. Designing for Mobile LSCON13 www.smashingmagazine.comnick@sealworks.com 03/15/13 101 of 111
  102. Designing for Mobile LSCON13 www.balsamiq.comnick@sealworks.com 03/15/13 102 of 111
  103. Designing for Mobile LSCON13 www.silverback.comnick@sealworks.com 03/15/13 103 of 111
  104. Designing for Mobile LSCON13 Screencasts 101 Mini-Session www.jingproject.comnick@sealworks.com 03/15/13 104 of 111
  105. Designing for Mobile LSCON13nick@sealworks.com 03/15/13 105 of 111
  106. Designing for Mobile LSCON13 solidify.comnick@sealworks.com 03/15/13 106 of 111
  107. Designing for Mobile LSCON13 ideapaint.comnick@sealworks.com 03/15/13 107 of 111
  108. Designing for Mobile LSCON13 www.twitter.comnick@sealworks.com 03/15/13 108 of 111
  109. Designing for Mobile LSCON13 www.lrnchat.comnick@sealworks.com 03/15/13 109 of 111
  110. Designing for Mobile LSCON13 Download the Presentation at: http://www.slideshare.net/nickfloronick@sealworks.com 03/15/13 110 of 111
  111. Designing for Mobile LSCON13 Thank You Nick Floro nick@sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloronick@sealworks.com 03/15/13 111 of 111

×