Designing Mobile Learning #LSCON13

Embed Size (px)

DESCRIPTION

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. 

Text of Designing Mobile Learning #LSCON13

  • 1. Designing for MobileLSCON13 Designing Learning formobile devices Nick Floro Nick@sealworks.com Twitter.com/NickFloronick@sealworks.com 03/15/131 of 111

2. Designing for Mobile LSCON13Understanding the Technologynick@sealworks.com 03/15/13 2 of 111 3. Designing for MobileLSCON13nick@sealworks.com 03/15/133 of 111 4. Designing for MobileLSCON13nick@sealworks.com 03/15/134 of 111 5. Designing for MobileLSCON13nick@sealworks.com 03/15/135 of 111 6. Designing for MobileLSCON13nick@sealworks.com 03/15/136 of 111 7. Designing for MobileLSCON13nick@sealworks.com 03/15/137 of 111 8. Designing for MobileLSCON13 desktopnick@sealworks.com 03/15/138 of 111 9. Designing for MobileLSCON13 desktop phonenick@sealworks.com 03/15/139 of 111 10. Designing for Mobile LSCON13 desktop phonetabletnick@sealworks.com 03/15/1310 of 111 11. Designing for MobileLSCON13desktop phonetabletnick@sealworks.com 03/15/13 11 of 111 12. Designing for MobileLSCON137 Questions to Define a ProjectWhat is the budget? What is the goal? What are the learning objectives? Does the content exist?What is the timetable?Who is the audience andhow will they use it?Current technology orsolution in place?nick@sealworks.com 03/15/13 12 of 111 13. Designing for MobileLSCON13 App Application Game / Simulation Tool Hybridnick@sealworks.com 03/15/13 13 of 111 14. Designing for MobileLSCON13 AppWeb Application Info Game / SimulationTool ToolResources Hybridnick@sealworks.com 03/15/13 14 of 111 15. Designing for MobileLSCON13 AppWeb Application Info Game / SimulationTool ToolResources Hybrid Web App | Coursenick@sealworks.com 03/15/13 15 of 111 16. Designing for MobileLSCON13 form factornick@sealworks.com 03/15/13 16 of 111 17. Designing for MobileLSCON13 form factor network latencynick@sealworks.com 03/15/13 17 of 111 18. Designing for MobileLSCON13 form factor network latency input mechanismnick@sealworks.com 03/15/13 18 of 111 19. Designing for MobileLSCON13 form factor network latency input mechanism memorynick@sealworks.com 03/15/13 19 of 111 20. Designing for MobileLSCON13 form factor network latency input mechanism memory computational powernick@sealworks.com 03/15/13 20 of 111 21. Designing for MobileLSCON13 form factor network latency input mechanism memory computational power batterynick@sealworks.com 03/15/13 21 of 111 22. Designing for MobileLSCON13 form factor network latency input mechanism memory computational power battery contextnick@sealworks.com 03/15/13 22 of 111 23. Designing for MobileLSCON13 Amazonnick@sealworks.com 03/15/13 23 of 111 24. Designing for MobileLSCON13nick@sealworks.com 03/15/13 24 of 111 25. Designing for MobileLSCON13nick@sealworks.com 03/15/13 25 of 111 26. Designing for Mobile LSCON13 The mobile environmentnick@sealworks.com03/15/13 26 of 111 27. Designing for Mobile LSCON13 The mobile environment single early failure = non-returning usernick@sealworks.com 03/15/1327 of 111 28. Designing for Mobile LSCON13 The mobile environment crucial first 30-60 seconds usagenick@sealworks.com 03/15/1328 of 111 29. Designing for MobileLSCON13 The mobile environmentFewer optionsnick@sealworks.com 03/15/13 29 of 111 30. Designing for MobileLSCON13 Solving Developer Challenges Graphics LocationStorage Speednick@sealworks.com 03/15/13 30 of 111 31. Designing for Mobile LSCON13 Sample Simulation with HTML 5nick@sealworks.com 03/15/1331 of 111 32. Designing for MobileLSCON13nick@sealworks.com 03/15/13 32 of 111 33. Designing for MobileLSCON13nick@sealworks.com 03/15/13 33 of 111 34. Designing for MobileLSCON13nick@sealworks.com 03/15/13 34 of 111 35. Designing for MobileLSCON13nick@sealworks.com 03/15/13 35 of 111 36. Designing for MobileLSCON13nick@sealworks.com 03/15/13 36 of 111 37. Designing for MobileLSCON13nick@sealworks.com 03/15/13 37 of 111 38. Designing for MobileLSCON13nick@sealworks.com 03/15/13 38 of 111 39. Designing for MobileLSCON13Pixels & Aspect Ratio Selecting a Size iPhone iPhone 4 iPhone 5 1136 x 640 480 x 320960 x 640nick@sealworks.com03/15/1339 of 111 40. Designing for Mobile LSCON13Pixels & Aspect Ratio Selecting a Size Android Xoom1280 x 720 iPad 3rd gen + 2048 x 1536iPad1024 x 768nick@sealworks.com 03/15/1340 of 111 41. Designing for MobileLSCON13nick@sealworks.com 03/15/13 41 of 111 42. Designing for MobileLSCON13Pixels & Aspect Ratio Selecting a SizeDroid Android Xoom Galaxy SIII1280 x 720960 x 5401280 x 720 Galaxy Note 2 1280 x 720 Kindle Fire 71024 x 600nick@sealworks.com 03/15/13 42 of 111 43. Designing for MobileLSCON13Pixels & Aspect Ratio Selecting a SizeAndroid Xoom 1280 x 720HTC Incredible iPad 800 x 480 1024 x 768 Galaxy 1280 x 720iPhone 4960 x 640 iPhone 480 x 320nick@sealworks.com03/15/1343 of 111 44. Designing for MobileLSCON13 WebAppnick@sealworks.com 03/15/13 44 of 111 45. Designing for Mobile LSCON13 Web Appnick@sealworks.com03/15/13 45 of 111 46. Designing for MobileLSCON13 CSS3 APIsHTML 5 JAVASCRIPT AJAXJQuerynick@sealworks.com03/15/1346 of 111 47. Designing for Mobile LSCON13Which 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/1347 of 111 48. Designing for MobileLSCON13 Examplesnick@sealworks.com 03/15/13 48 of 111 49. Designing for Mobile LSCON13reflectorapp.comnick@sealworks.com 03/15/1349 of 111 50. Designing for MobileLSCON13 Clientsnick@sealworks.com 03/15/13 50 of 111 51. Designing for MobileLSCON13 Clients Timeframesnick@sealworks.com 03/15/13 51 of 111 52. Designing for MobileLSCON13 Clients Timeframes Developmentnick@sealworks.com 03/15/13 52 of 111 53. Designing for Mobile LSCON13ClientsTimeframesDevelopment Communicationnick@sealworks.com03/15/13 53 of 111 54. Designing for MobileLSCON13 How should weDesign?nick@sealworks.com 03/15/13 54 of 111 55. Designing for Mobile LSCON13 Understand Designnick@sealworks.com03/15/13 55 of 111 56. Designing for MobileLSCON13Its aboutcommunication andproblem solving.nick@sealworks.com03/15/1356 of 111 57. Designing for Mobile LSCON13 Design is how it works.nick@sealworks.com 03/15/1357 of 111 58. Designing for MobileLSCON13desktop phonetabletnick@sealworks.com 03/15/13 58 of 111 59. Designing for MobileLSCON13 mobile rstnick@sealworks.com 03/15/13 59 of 111 60. Designing for Mobile LSCON13 Focus on the Audiencenick@sealworks.com03/15/13 1 60 of 111 61. Designing for MobileLSCON13nick@sealworks.com 03/15/13 61 of 111 62. Designing for MobileLSCON13nick@sealworks.com 03/15/13 62 of 111 63. Designing for MobileLSCON13 Content2 is the keynick@sealworks.com03/15/1363 of 111 64. 3Designing for MobileLSCON13 Transparent Interfacenick@sealworks.com 03/15/13 64 of 111 65. Designing for Mobile LSCON13 TodaysAppsnick@sealworks.com03/15/13 65 of 111 66. Designing for Mobile LSCON13Flat Pagesnick@sealworks.com 03/15/1366 of 111 67. Designing for MobileLSCON13nick@sealworks.com 03/15/13 67 of 111 68. Designing for MobileLSCON13Tab Barnick@sealworks.com 03/15/13 68 of 111 69. Designing for MobileLSCON13nick@sealworks.com 03/15/13 69 of 111 70. Designing for Mobile LSCON13Tree Structurenick@sealworks.com 03/15/1370 of 111 71. Designing for MobileLSCON13 < Back Screen One > Screen Two > Screen Three > Screen Four> Screen Five> Screen Six > Tree Structurenick@sealworks.com03/15/1371 of 111 72. Designing for Mobile LSCON13 >Innovationnick@sealworks.com 03/15/1372 of 111 73. Designing for MobileLSCON13 weathercubenick@sealworks.com 03/15/13 73 of 111 74. Designing for Mobile LSCON13Prototyping Prototypingnick@sealworks.com03/15/13 74 of 111 75. Designing for Mobile LSCON13Quick Prototyping TechniquesTools: Sketchesnick@sealworks.com 03/15/1375 of 111 76. Designing for MobileLSCON13nick@sealworks.com 03/15/13 76 of 111 77. Designing for MobileLSCON13nick@sealworks.com 03/15/13 77 of 111 78. Designing for MobileLSCON13nick@sealworks.com 03/15/13 78 of 111 79. Designing for MobileLSCON13 Quick Prototyping Techniques Tools: Wireframes Powerpoint / Keynotenick@sealworks.com03/15/1379 of 111 80. Designing for MobileLSCON13 Custom Template in Keynotenick@sealworks.com 03/15/13 80 of 111 81. Designing for MobileLSCON13keynotekungfu.comnick@sealworks.com 03/15/13 81 of 111 82. Designing for Mobile LSCON13balsamiq.comnick@sealworks.com 03/15/1382 of 111 83. Designing for Mobile LSCON13Sketchy & iMockUpsnick@sealworks.com 03/15/1383 of 111 84. Designing for MobileLSCON13 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/1385 of 111 86. Designing for MobileLSCON13 Exercisenick@sealworks.com 03/15/13 86 of 111 87. Designing for MobileLSCON13nick@sealworks.com 03/15/13 87 of 111 88. Designing for MobileLSCON13nick@sealworks.com 03/15/13 88 of 111 89. Designing for MobileLSCON13 Design for Flexibilitynick@sealworks.com 03/15/13 89 of 111 90. Designing for MobileLSCON13Testingnick@sealworks.com 03/15/13 90 of 111 91. Designing for MobileLSCON13Testing 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 LSCON13Test forUsability Have someone with fresheyes test drive your site tomake sure it accomplishesboth user goals and sitegoals Survey