Your SlideShare is downloading. ×
0
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Designing for Mobile Devices
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing for Mobile Devices

521

Published on

This session will explore the foundation you need to get started in mobile development. You’ll learn best practices for designing for mobile and the challenges you may face in platforms, smartphones …

This session will explore the foundation you need to get started in mobile development. You’ll learn best practices for designing for mobile and the challenges you may face in platforms, smartphones vs. tablets vs. next-generation touch devices. You’ll discuss and learn techniques for designing mobile apps that work, from sketching to wire framing to developing the final designs. You’ll learn about affordable tools you can use to help visualize concepts and prototype quickly. You will learn about development tools and how using HTML5 and CSS3 can provide a solution for creating web-based applications that work on multiple platforms.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
521
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Designing Learning for mobile devices Nick Floro Nick@sealworks.com Twitter.com/NickFloro Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 1 of 79
  • 2. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 2 of 79
  • 3. Understanding the Technology Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 3 of 79
  • 4. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 4 of 79
  • 5. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 5 of 79
  • 6. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 6 of 79
  • 7. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 7 of 79
  • 8. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 8 of 79
  • 9. desktop Content Strategy Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 9 of 79
  • 10. desktoptabletphone Content Strategy Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 10 of 79
  • 11. desktop tablet phone Content Strategy Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 11 of 79
  • 12. Content Strategy desktoptabletphone > Think Mobile First Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 12 of 79
  • 13. • Documents • Audio • Video • Web Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 13 of 79
  • 14. Designing your mobile content Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 14 of 79
  • 15. Flat Pages Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 15 of 79
  • 16. Apple Weather Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 16 of 79
  • 17. Yahoo Weather Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 17 of 79
  • 18. Tab Bar Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 18 of 79
  • 19. Apple Clock Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 19 of 79
  • 20. Tree Structure One Two Three Four Five Six Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 20 of 79
  • 21. Tree Structure < Back Screen One > Screen Two > Screen Three > Screen Four > Screen Five > Screen Six > Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 21 of 79
  • 22. First Aid Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 22 of 79
  • 23. Innovation > Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 23 of 79
  • 24. evernote Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 24 of 79
  • 25. evernote Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 25 of 79
  • 26. Pulse Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 26 of 79
  • 27. Pulse Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 27 of 79
  • 28. Zite Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 28 of 79
  • 29. Zite Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 29 of 79
  • 30. App or Web Delivery Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 30 of 79
  • 31. Google Chrome 31% Yes Mozilla Firefox 20% Yes Internet Explorer 7-8 11% No Internet Explorer 9-10 10% Yes Apple Safari 15% Yes iPhone / iPad 4% Yes Google Android 2% Yes Other 4% No Market Share HTML5 Support Browser Stats 2014 Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 31 of 79
  • 32. Web AppServer Game / Simulation Tool Hybrid Info Tool Resources Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 32 of 79
  • 33. Web App Native App • Use web standards • Easy to deploy & update • Support all devices • Faster development cycle • Works everywhere • Requires web connection • Faster performance • Unique platform features • Requires programming • Deploy via Store models • iOS / Android / Amazon Which is right for your project? Enterprise Deployment Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 33 of 79
  • 34. DEVICE ACCESS PERFORMANCE & INTEGRATION MULTIMEDIA OFFLINE & STORAGECONNECTIVITY SEMANTICS CSS3 3D, GRAPHICS & EFFECTS Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 34 of 79
  • 35. PhoneGap.com Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 35 of 79
  • 36. • network latency • input mechanism • memory • form factor • computational power • context • battery Mobile Factors Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 36 of 79
  • 37. Amazon A Quick Look Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 37 of 79
  • 38. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 38 of 79
  • 39. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 39 of 79
  • 40. The mobile environment single early failure = non-returning user Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 40 of 79
  • 41. The mobile environment crucial first 30-60 seconds usage Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 41 of 79
  • 42. The mobile environment Fewer options Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 42 of 79
  • 43. Examples Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 43 of 79
  • 44. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 44 of 79
  • 45. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 45 of 79
  • 46. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 46 of 79
  • 47. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 47 of 79
  • 48. Focus on the Audience 1 Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 48 of 79
  • 49. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 49 of 79
  • 50. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 50 of 79
  • 51. is the key Content 2 Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 51 of 79
  • 52. Transparent Interface 3 Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 52 of 79
  • 53. Designing Apps Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 53 of 79
  • 54. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 54 of 79
  • 55. Android Xoom 1280 x 720 HTC Incredible 800 x 480 Selecting a Size Pixels & Aspect Ratio iPad 1024 x 768 iPhone 4 960 x 640 iPhone 480 x 320 Galaxy 1280 x 720 Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 55 of 79
  • 56. Design for Flexibility Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 56 of 79
  • 57. Testing Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 57 of 79
  • 58. Test on Windows 8, 7, Vista, XP • Internet Explorer 6, 7, 8, 9, 10, 11 • Firefox 4.0, 10-13 + • Chrome 15 - 19 + Test on OS X − Safari 5 - 7+ − Firefox 20 - 23 + − Chrome 25 - 33 + Test on Mobile − iOS 4.x - 7.x − Android 2.x - 4.x − Windows 8 − Tablet vs Phone − Portrait vs Landscape Testing Code Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 58 of 79
  • 59. Test for Usability • Have someone with fresh eyes test drive your site to make sure it accomplishes both user goals and site goals • Survey Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 59 of 79
  • 60. Capture & Analyze Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 60 of 79
  • 61. Using CoverFlow view and Preview of Graphics Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 61 of 79
  • 62. More Examples Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 62 of 79
  • 63. Downloads Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 63 of 79
  • 64. ResourcesTo help you grow. Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 64 of 79
  • 65. kuler.adobe.com Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 65 of 79
  • 66. abookapart.com Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 66 of 79
  • 67. SmashingMagazine.com Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 67 of 79
  • 68. Nancy Durate Garr Reynolds Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 68 of 79
  • 69. Screencasts 101 Mini-Session JingProject.com Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 69 of 79
  • 70. html5rocks.com Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 70 of 79
  • 71. www.uxmag.com Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 71 of 79
  • 72. www.twitter.com Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 72 of 79
  • 73. www.lrnchat.com Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 73 of 79
  • 74. evernote.com Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 74 of 79
  • 75. reflectorapp.com Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 75 of 79
  • 76. Don’t Settle Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 76 of 79
  • 77. Download the Presentation at: http://www.slideshare.net/nickfloro Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 77 of 79
  • 78. www.launchcycle.com Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 78 of 79
  • 79. Thank You Nick Floro nick@sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro Designing for Mobile Devices Nick Floro Learning Solutions 2014 | eLearning Guild 03/21/14 79 of 79

×