Designing Mobile Learning

  • View
    547

  • Download
    0

Embed Size (px)

DESCRIPTION

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.

Text of Designing Mobile Learning

  • 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
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 2 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 3 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 4 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 5 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 6 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 7 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 8 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 9 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 10 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 11 of 105
  • Learning & Training deliver everywhere replace compliment mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 12 of 105
  • desktoptabletphone Content Strategy mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 13 of 105
  • Content Strategy mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 14 of 105
  • 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
  • desktoptabletphone Think Mobile First mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 16 of 105
  • desktoptabletphone Think Mobile First mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 17 of 105
  • desktoptabletphone Think Mobile First Progressive Enhancement mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 18 of 105
  • 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
  • Specications mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 20 of 105
  • 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
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 22 of 105
  • 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
  • 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
  • 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
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 26 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 27 of 105
  • Classifying Apps mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 28 of 105
  • Flat Pages mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 29 of 105
  • Apple Weather mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 30 of 105
  • Yahoo Weather mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 31 of 105
  • Tab Bar mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 32 of 105
  • Apple Clock mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 33 of 105
  • Tree Structure One Two Three Four Five Six mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 34 of 105
  • 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
  • First Aid mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 36 of 105
  • First Aid mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 37 of 105
  • First Aid mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 38 of 105
  • Innovation > mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 39 of 105
  • evernote mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 40 of 105
  • evernote mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 41 of 105
  • Pulse mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 42 of 105
  • Pulse mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 43 of 105
  • Zite mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 44 of 105
  • Zite mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 45 of 105
  • Responsive Design mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 46 of 105
  • getskeleton.com mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 48 of 105
  • twitter.github.io/bootstrap/ mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 49 of 105
  • Focus on the Audience mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 50 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 51 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 52 of 105
  • Sketching where ideas begin mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 53 of 105
  • Visual Thinking mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 54 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 55 of 105
  • Adobe IdeasEvernote Skitch mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 56 of 105
  • mLearnCon Nick Floro sealworks.com Designing Mobile Learning 06/24/14 57 of 105
  • mLearnCon Ni