Adapting Expectations to Fit a     Mobile Workflow      Presented by Joseph Labrecque   D2W Conference – July 15th 2011 – ...
Introduction      Joseph Labrecque, MA      Senior Interactive Software Engineer      University of Denver – CTL      Frac...
What we’ll be talking about• Background   – Platforms   – Tooling• Expectations   – Adjust them• Workflow   –   Planning  ...
Starting out…• Mobile can be a pain!• Mobile is also  addictive and FUN!
A plethora of devicesMobile Devices!• Smartphone OS   –   iOS   –   Android   –   Windows Phone 7   –   WebOS• Tablet OS  ...
Advancements in platforms•   Web Browsers•   JavaScript Engines•   JavaScript Frameworks•   Flash Player•   Adobe AIR•   N...
Advancements in Flash / AIR• Open Screen Project• Adobe AIR   –   AIR for Android   –   AIR for iOS   –   AIR for Tablet O...
Advancements in tooling• Flash Professional CS5.5   – iOS   – Android   – Project linkages• Flash Builder 4.5   –   Mobile...
Web apps are lacking (on mobile)• Tiny controls on 160-320 PPI  screens• Video generally not optimized  for mobile• No Fla...
Let’s have a look…    (desktop)
Expectations• Existing content   – Let’s get it on mobile   – Hmmm…• New content   – What does it need to do   – How do we...
Adapting expectations• Fingers… and touch…  – We need big buttons  – New interactions• Small screens  – This won’t fit  – ...
Let’s have a look…     (mobile)
Workflow matters!• Decisions and Planning around  restrictions• Distill your Ideas!• Designing for Touch• Designing for Ge...
Planning•   Realistic•   Directed•   Tear-Down•   Usability
Design: How?•   Fingers•   Gestures•   Obviousness•   Platform-awareness
Design: What?•   Flash Catalyst•   Fireworks•   Illustrator•   Photoshop•   Flash Builder (really)
Development• Multiplatform  – Simulators  – Media Queries  – Flex Libraries• Lots of new concepts  when dealing with  mobile
Simulators• Take advantage of  Flash Builder simulator• Stay away from the  Android emulator• Device Central can  also be ...
Application Scaling• applicationDPI can be set in the app root tag   – 160    x1   – 240    x1.5   – 320    x2• Dependent ...
Media Queries@media (os-platform: “Android”) {}                                     CSS@media (os-platform: “QNX”) {}@medi...
Flex Libraries• Share “core” project code  across Flex Libraries• Use targeted application  logic which wraps the core• Ex...
Let’s have a look…      (code)
Testing!!!• Android is an excellent  test platform                 I can help!• Test on device• Test a lot• Get friends to...
Releases•   Android Market•   Amazon AppStore•   BlackBerry AppWorld•   iTunes App Store• Who’s next???    – Hi, Sony!!!
In conclusion• Mobile requires a certain directed approach that is  not required with desktop application development.• Mo...
Contact me     Email:     Joseph.Labrecque@du.edu     Web:     http://josephlabrecque.com/     Twitter:     @JosephLabrecque
Thanks!• Catch me at these upcoming events…  – Adobe Summer Institute ”Building a Functional Flex    Mobile Application fo...
Upcoming SlideShare
Loading in …5
×

Adapting Expectations to Fit a Mobile Workflow

1,762
-1

Published on

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

No Downloads
Views
Total Views
1,762
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Adapting Expectations to Fit a Mobile Workflow

  1. 1. Adapting Expectations to Fit a Mobile Workflow Presented by Joseph Labrecque D2W Conference – July 15th 2011 – Kansas City, MO
  2. 2. Introduction Joseph Labrecque, MA Senior Interactive Software Engineer University of Denver – CTL Fractured Vision Media, LLC Adobe Community Professional Adobe Education Leader Flash Development for Android Cookbook
  3. 3. What we’ll be talking about• Background – Platforms – Tooling• Expectations – Adjust them• Workflow – Planning – Design – Development – Testing• Publication
  4. 4. Starting out…• Mobile can be a pain!• Mobile is also addictive and FUN!
  5. 5. A plethora of devicesMobile Devices!• Smartphone OS – iOS – Android – Windows Phone 7 – WebOS• Tablet OS – iOS – Android – Tablet OS (QNX) – WebOS
  6. 6. Advancements in platforms• Web Browsers• JavaScript Engines• JavaScript Frameworks• Flash Player• Adobe AIR• Native (Obj-C, C#, Java)
  7. 7. Advancements in Flash / AIR• Open Screen Project• Adobe AIR – AIR for Android – AIR for iOS – AIR for Tablet OS – AIR for ???• Flash Player – Android and QNX
  8. 8. Advancements in tooling• Flash Professional CS5.5 – iOS – Android – Project linkages• Flash Builder 4.5 – Mobile Flex Projects!!! – iOS – Android – Tablet OS
  9. 9. Web apps are lacking (on mobile)• Tiny controls on 160-320 PPI screens• Video generally not optimized for mobile• No Flash Player on iOS – (thanks, Steve)• Need a directed cross- platform app solution
  10. 10. Let’s have a look… (desktop)
  11. 11. Expectations• Existing content – Let’s get it on mobile – Hmmm…• New content – What does it need to do – How do we do it – Hmmm…
  12. 12. Adapting expectations• Fingers… and touch… – We need big buttons – New interactions• Small screens – This won’t fit – Will it fit now?• Slow processors – Think 7 years ago• Time to change your thinking
  13. 13. Let’s have a look… (mobile)
  14. 14. Workflow matters!• Decisions and Planning around restrictions• Distill your Ideas!• Designing for Touch• Designing for Gestures• Designing for Movement• Develop for Directness• Release and Test often and everywhere
  15. 15. Planning• Realistic• Directed• Tear-Down• Usability
  16. 16. Design: How?• Fingers• Gestures• Obviousness• Platform-awareness
  17. 17. Design: What?• Flash Catalyst• Fireworks• Illustrator• Photoshop• Flash Builder (really)
  18. 18. Development• Multiplatform – Simulators – Media Queries – Flex Libraries• Lots of new concepts when dealing with mobile
  19. 19. Simulators• Take advantage of Flash Builder simulator• Stay away from the Android emulator• Device Central can also be useful
  20. 20. Application Scaling• applicationDPI can be set in the app root tag – 160 x1 – 240 x1.5 – 320 x2• Dependent upon the correct DPI report from the device on runtime to function correctly…
  21. 21. Media Queries@media (os-platform: “Android”) {} CSS@media (os-platform: “QNX”) {}@media (os-platform: “IOS”) {}@media (application-dpi: 160) {}@media (application-dpi: 240) {}@media (application-dpi: 320) {}Just like “standard” CSS ;)
  22. 22. Flex Libraries• Share “core” project code across Flex Libraries• Use targeted application logic which wraps the core• Export release builds specific to each target platform
  23. 23. Let’s have a look… (code)
  24. 24. Testing!!!• Android is an excellent test platform I can help!• Test on device• Test a lot• Get friends to test• Get your parents to test
  25. 25. Releases• Android Market• Amazon AppStore• BlackBerry AppWorld• iTunes App Store• Who’s next??? – Hi, Sony!!!
  26. 26. In conclusion• Mobile requires a certain directed approach that is not required with desktop application development.• Mobile takes a lot more planning than what you may be used to…• Mobile takes a lot more testing than what you may be used to…• Mobile users still expect everything to work flawlessly on whatever random device they may be using.• A good workflow can help in all these areas!
  27. 27. Contact me Email: Joseph.Labrecque@du.edu Web: http://josephlabrecque.com/ Twitter: @JosephLabrecque
  28. 28. Thanks!• Catch me at these upcoming events… – Adobe Summer Institute ”Building a Functional Flex Mobile Application for Android in Less Than an Hour” – COLTT “Mobile computing in a ‘Post-PC’ era… right?” + Café Pédagogique “Does your institution need a mobile app? Probably not.” – Adobe MAX “From Desktop to Mobile: Application Functionality for Small Screens” + FITC Unconference @ MAX “UX Concerns across Mobile Platforms”
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×