Designing Learning for Mobile Devices @ Training2013

  • Published on
    09-May-2015

  • View
    677

  • Download
    4

DESCRIPTION

This session will provide you with the foundation you need to get started in mobile development from smartphones to tablets. We'll look at the major environments for delivery, what you need to know about asset and graphic design, whether to create a app or a web app. This session will focus on the Android, iOS and Windows environments. - Prototyping and Designing for Mobile & Desktop. - Challenges of Development. - Understanding your Audience. Development Tools. - Apps vs Web Apps. - Defining Project & Timelines. - 5 Ways to Improve Development and - Reduce Challenges. - Resources - links & download to get you playing and started right away.

Transcript

1.Designing for MobileTraining2013 Nick@sealworks.com Twitter.com/NickFloroDesigning Learning for mobile devicesNick Floro 02/20/13 1 of 124nick@sealworks.com2. Designing for MobileTraining2013 Design HTML5 PrototypingTools WireframingWeb vs AppsBrainstormingQ&ANick Floro 02/20/13 2 of 124nick@sealworks.com 3. Designing for MobileTraining2013 Understanding theTechnologyNick Floro 02/20/13 3 of 124nick@sealworks.com 4. Designing for MobileTraining2013Nick Floro 02/20/13 4 of 124nick@sealworks.com 5. Designing for MobileTraining2013Nick Floro 02/20/13 5 of 124nick@sealworks.com 6. Designing for MobileTraining2013Nick Floro 02/20/13 6 of 124nick@sealworks.com 7. Designing for MobileTraining2013Nick Floro 02/20/13 7 of 124nick@sealworks.com 8. Designing for MobileTraining2013Nick Floro 02/20/13 8 of 124nick@sealworks.com 9. Designing for MobileTraining2013 desktopNick Floro 02/20/13 9 of 124nick@sealworks.com 10. Designing for MobileTraining2013 desktop phoneNick Floro 02/20/1310 of 124nick@sealworks.com 11. Designing for Mobile Training2013 desktop phonetabletNick Floro 02/20/13 11 of 124nick@sealworks.com 12. Designing for MobileTraining2013desktop phonetabletNick Floro 02/20/1312 of 124nick@sealworks.com 13. Designing for MobileTraining20137 Questions to Define the 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 Floro 02/20/1313 of 124nick@sealworks.com 14. Designing for MobileTraining2013 AppInfo ApplicationWeb Game / SimulationTool ToolResources Hybrid Web App | CourseNick Floro 02/20/1314 of 124nick@sealworks.com 15. Designing for MobileTraining2013 form factor network latency input mechanism memory computational power battery contextNick Floro 02/20/13 15 of 124nick@sealworks.com 16. Designing for MobileTraining2013Nick Floro 02/20/1316 of 124nick@sealworks.com 17. Designing for MobileTraining2013Nick Floro 02/20/1317 of 124nick@sealworks.com 18. Designing for Mobile Training2013 The mobile environment single early failure = non-returning userNick Floro02/20/1318 of 124nick@sealworks.com 19. Designing for MobileTraining2013 The mobile environment crucial rst 30-60 seconds usageNick Floro 02/20/1319 of 124nick@sealworks.com 20. Designing for MobileTraining2013 The mobile environment Fewer optionsNick Floro 02/20/1320 of 124nick@sealworks.com 21. Designing for MobileTraining2013 The Web Platform is AcceleratingNick Floro02/20/13 21 of 124nick@sealworks.com 22. Designing for MobileTraining2013 Solving Developer Challenges Graphics LocationStorage SpeedNick Floro 02/20/1322 of 124nick@sealworks.com 23. Designing for Mobile Training2013 Sample Simulation with HTML 5Nick Floro 02/20/13 23 of 124nick@sealworks.com 24. Designing for MobileTraining2013Nick Floro 02/20/1324 of 124nick@sealworks.com 25. Designing for MobileTraining2013Nick Floro 02/20/1325 of 124nick@sealworks.com 26. Designing for MobileTraining2013Nick Floro 02/20/1326 of 124nick@sealworks.com 27. Designing for MobileTraining2013Nick Floro 02/20/1327 of 124nick@sealworks.com 28. Designing for MobileTraining2013Nick Floro 02/20/1328 of 124nick@sealworks.com 29. Designing for MobileTraining2013Nick Floro 02/20/1329 of 124nick@sealworks.com 30. Designing for MobileTraining2013Nick Floro 02/20/1330 of 124nick@sealworks.com 31. Designing for MobileTraining2013Pixels & Aspect Ratio Selecting a Size iPhone iPhone 4 iPhone 5 1136 x 640 480 x 320960 x 640Nick Floro02/20/13 31 of 124nick@sealworks.com 32. Designing for Mobile Training2013Pixels & Aspect Ratio Selecting a Size Android Xoom1280 x 720 iPad 3rd gen + 2048 x 1536iPad1024 x 768Nick Floro 02/20/13 32 of 124nick@sealworks.com 33. Designing for MobileTraining2013Nick Floro 02/20/1333 of 124nick@sealworks.com 34. Designing for MobileTraining2013Pixels & 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 Floro 02/20/1334 of 124nick@sealworks.com 35. Designing for MobileTraining2013Pixels & 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 Floro02/20/13 35 of 124nick@sealworks.com 36. Designing for MobileTraining2013 WebAppNick Floro 02/20/1336 of 124nick@sealworks.com 37. Designing for Mobile Training2013 Web AppNick Floro02/20/1337 of 124nick@sealworks.com 38. Designing for MobileTraining2013 CSS3 APIsHTML 5 JAVASCRIPT AJAXJQueryNick Floro02/20/13 38 of 124nick@sealworks.com 39. Designing for Mobile Training2013Which 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 Floro 02/20/13 39 of 124nick@sealworks.com 40. Designing for MobileTraining2013 ExamplesNick Floro 02/20/1340 of 124nick@sealworks.com 41. Designing for MobileTraining2013 Project ManagementNick Floro 02/20/1341 of 124nick@sealworks.com 42. Designing for MobileTraining2013ProjectManagementNick Floro 02/20/1342 of 124nick@sealworks.com 43. Designing for MobileTraining2013 ClientsNick Floro 02/20/1343 of 124nick@sealworks.com 44. Designing for MobileTraining2013 Clients TimeframesNick Floro 02/20/1344 of 124nick@sealworks.com 45. Designing for MobileTraining2013 Clients Timeframes DevelopmentNick Floro 02/20/1345 of 124nick@sealworks.com 46. Designing for Mobile Training2013ClientsTimeframesDevelopment CommunicationNick Floro02/20/1346 of 124nick@sealworks.com 47. Designing for Mobile Training2013 ProcessDefine DeliverDesignDevelopNick Floro 02/20/13 47 of 124nick@sealworks.com 48. Designing for Mobile Training2013Whats Next Determining a PlanWork Strategy Team Skills ToolsChallengesFlowNick Floro02/20/1348 of 124nick@sealworks.com 49. Designing for MobileTraining2013Whats Next Determining a PlanStrategy Problem / Solution Audience Technology What do you want to deliver Timeframe BudgetNick Floro 02/20/1349 of 124nick@sealworks.com 50. Designing for Mobile Training2013Whats Next Determining a PlanTeam Skills Project Management Dene Design / UI / UX Reviews Develop TestNick Floro02/20/1350 of 124nick@sealworks.com 51. Designing for Mobile Training2013Whats Next Determining a PlanTools Web App - HTML5, Javascript, Server, Database HTML5 / PhoneGap (Azura) Game Salad, Corona Apple xCode / GoogleNick Floro02/20/1351 of 124nick@sealworks.com 52. Designing for MobileTraining2013Whats Next Determining a Plan Dene Design Develop Test Rene LaunchNick Floro02/20/13 52 of 124nick@sealworks.com 53. Designing for MobileTraining2013Nick Floro 02/20/1353 of 124nick@sealworks.com 54. Designing for Mobile Training2013Projects How do we handle? Current ContentNew ProjectsNick Floro 02/20/13 54 of 124nick@sealworks.com 55. Designing for MobileTraining2013 How should weDesign?Nick Floro 02/20/1355 of 124nick@sealworks.com 56. Designing for Mobile Training2013 Understand DesignNick Floro02/20/1356 of 124nick@sealworks.com 57. Designing for MobileTraining2013Its aboutcommunication andproblem solving.Nick Floro02/20/13 57 of 124nick@sealworks.com 58. Designing for Mobile Training2013 Design is how it works.Nick Floro 02/20/13 58 of 124nick@sealworks.com 59. Designing for Mobile Training2013Its aboutcommunication andproblem solving.Nick Floro02/20/1359 of 124nick@sealworks.com 60. Designing for Mobile Training2013 Focus on the AudienceNick Floronick@sealworks.com02/20/13 160 of 124 61. Designing for MobileTraining2013 Content2 is the keyNick Floro02/20/13 61 of 124nick@sealworks.com 62. 3Designing for MobileTraining2013 Transparent InterfaceNick Floro 02/20/1362 of 124nick@sealworks.com 63. Designing for MobileTraining2013Nick Floro 02/20/1363 of 124nick@sealworks.com 64. Designing for Mobile Training2013ContentFlowchartNick Floro02/20/1364 of 124nick@sealworks.com 65. Designing for MobileTraining2013Inspiration.comNick Floro 02/20/1365 of 124nick@sealworks.com 66. Designing for Mobile Training2013Prototyping PrototypingNick Floro02/20/1366 of 124nick@sealworks.com 67. Designing for Mobile Training2013Quick Prototyping TechniquesTools: SketchesNick Floro 02/20/13 67 of 124nick@sealworks.com 68. Designing for Mobile Training2013Quick Prototyping TechniquesTools: Fujitsu SCANSNAP Scan direct to pdf includes full Acrobat ProNick Floro 02/20/13 68 of 124nick@sealworks.com 69. Designing for MobileTraining2013Nick Floro 02/20/1369 of 124nick@sealworks.com 70. Designing for MobileTraining2013Nick Floro 02/20/1370 of 124nick@sealworks.com 71. Designing for MobileTraining2013Nick Floro 02/20/1371 of 124nick@sealworks.com 72. Designing for MobileTraining2013Nick Floro 02/20/1372 of 124nick@sealworks.com 73. Designing for MobileTraining2013 Capture & AnalyzeNick Floro 02/20/1373 of 124nick@sealworks.com 74. Designing for MobileTraining2013 Using CoverFlow view and Preview of GraphicsNick Floro 02/20/1374 of 124nick@sealworks.com 75. Designing for MobileTraining2013Nick Floro 02/20/1375 of 124nick@sealworks.com 76. Designing for MobileTraining2013 Quick Prototyping Techniques Tools: Wireframes Powerpoint / KeynoteNick Floro02/20/13 76 of 124nick@sealworks.com 77. Designing for MobileTraining2013Nick Floro 02/20/1377 of 124nick@sealworks.com 78. Designing for MobileTraining2013 Custom Template in KeynoteNick Floro 02/20/1378 of 124nick@sealworks.com 79. Designing for MobileTraining2013keynotekungfu.comNick Floro 02/20/1379 of 124nick@sealworks.com 80. Designing for Mobile Training2013goo.gl/lKnU9Nick Floro 02/20/13 80 of 124nick@sealworks.com 81. Designing for Mobile Training2013balsamiq.comNick Floro 02/20/13 81 of 124nick@sealworks.com 82. Designing for Mobile Training2013Sketchy & iMockUpsNick Floro 02/20/13 82 of 124nick@sealworks.com 83. Designing for Mobile Training2013 http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/Nick Floro02/20/1383 of 124nick@sealworks.com 84. Designing for MobileTraining2013 ExerciseNick Floro 02/20/1384 of 124nick@sealworks.com 85. Designing for MobileTraining2013Wireframes Using Acrobat Pro for PrototypesNick Floro02/20/13 85 of 124nick@sealworks.com 86. Designing for MobileTraining2013Nick Floro 02/20/1386 of 124nick@sealworks.com 87. Designing for MobileTraining2013Nick Floro 02/20/1387 of 124nick@sealworks.com 88. Designing for MobileTraining2013 Design for FlexibilityNick Floro 02/20/1388 of 124nick@sealworks.com 89. Designing for MobileTraining2013TestingNick Floro 02/20/1389 of 124nick@sealworks.com 90. Designing for MobileTraining2013Testing 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 PhoneNick Floro 02/20/1390 of 124nick@sealworks.com 91. Designing for Mobile Training2013Test forUsability Have someone with fresheyes test drive your site tomake sure it accomplishesboth user goals and sitegoals SurveyNick Floro02/20/1391 of 124nick@sealworks.com 92. Designing for MobileTraining2013 BrowserStack.comNick Floro 02/20/1392 of 124nick@sealworks.com 93. Designing for MobileTraining2013 BrowserStack.comNick Floro 02/20/1393 of 124nick@sealworks.com 94. Designing for MobileTraining2013ResourcesNick Floro 02/20/1394 of 124nick@sealworks.com 95. Designing for Mobile Training2013Play | Watch | ExperimentNick Floro02/20/1395 of 124nick@sealworks.com 96. Designing for MobileTraining2013Nick Floro 02/20/1396 of 124nick@sealworks.com 97. Designing for MobileTraining2013kuler.adobe.comNick Floro 02/20/1397 of 124nick@sealworks.com 98. Designing for MobileTraining2013 Resources Designing Interactions Bill MoggridgeNick Floro 02/20/1398 of 124nick@sealworks.com 99. Designing for MobileTraining2013 Resources Designing the Obvious: A Common Sense Approach to Web Application Design Robert Hoekman Jr.Nick Floro 02/20/1399 of 124nick@sealworks.com 100. Designing for MobileTraining2013Nick Floro 02/20/13 100 of 124nick@sealworks.com 101. Designing for MobileTraining2013Nick Floro 02/20/13 101 of 124nick@sealworks.com 102. Designing for MobileTraining2013Nick Floro 02/20/13 102 of 124nick@sealworks.com 103. Designing for MobileTraining2013Nick Floro 02/20/13 103 of 124nick@sealworks.com 104. Designing for MobileTraining2013howconference.comNick Floro 02/20/13 104 of 124nick@sealworks.com 105. Designing for Mobile Training2013 CSS3 for Web Designers Dan Cederholm | A Book ApartNick Floro02/20/13 105 of 124nick@sealworks.com 106. Designing for MobileTraining2013www.manager-tools.comNick Floro 02/20/13 106 of 124nick@sealworks.com 107. Designing for Mobile Training2013PodcastsNick Floro 02/20/13107 of 124nick@sealworks.com 108. Designing for MobileTraining2013 www.businessweek.comNick Floro 02/20/13 108 of 124nick@sealworks.com 109. Designing for Mobile Training2013 www.istockphoto.comNick Floro 02/20/13109 of 124nick@sealworks.com 110. Designing for MobileTraining2013 www.smashingmagazine.comNick Floro 02/20/13 110 of 124nick@sealworks.com 111. Designing for MobileTraining2013Nancy DurateGarr ReynoldsNick Floro 02/20/13 111 of 124nick@sealworks.com 112. Designing for MobileTraining2013www.presentationzen.comNick Floro 02/20/13 112 of 124nick@sealworks.com 113. Designing for Mobile Training2013www.balsamiq.comNick Floro 02/20/13113 of 124nick@sealworks.com 114. Designing for Mobile Training2013www.silverback.comNick Floro 02/20/13114 of 124nick@sealworks.com 115. Designing for MobileTraining2013 Screencasts 101 Mini-Sessionwww.jingproject.comNick Floro02/20/13115 of 124nick@sealworks.com 116. Designing for Mobile Training2013solidify.comNick Floro 02/20/13116 of 124nick@sealworks.com 117. Designing for MobileTraining2013ideapaint.comNick Floro 02/20/13 117 of 124nick@sealworks.com 118. Designing for Mobile Training2013evernote.comNick Floro 02/20/13118 of 124nick@sealworks.com 119. Designing for MobileTraining2013Nick Floro 02/20/13 119 of 124nick@sealworks.com 120. Designing for MobileTraining2013www.twitter.comNick Floro 02/20/13 120 of 124nick@sealworks.com 121. Designing for MobileTraining2013www.lrnchat.comNick Floro 02/20/13 121 of 124nick@sealworks.com 122. Designing for Mobile Training2013Dont SettleNick Floro 02/20/13122 of 124nick@sealworks.com 123. Designing for Mobile Training2013Download the Presentation at:http://www.slideshare.net/nickoroNick Floro02/20/13 123 of 124nick@sealworks.com 124. Designing for MobileTraining2013 Thank You Nick Floro nick@sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickoroNick Floro 02/20/13 124 of 124nick@sealworks.com

Recommended

View more >