0
From Desktop to Mobile:      Application Functionality      for Small Screens      Joseph Labrecque© 2011 Adobe Systems In...
Introduction                                                                   Joseph Labrecque, MA                       ...
Topics Covered  There is a lot of talk when it comes to building  mobile apps but not a lot of anything when it  comes to ...
Planning Stages : Research                                              What do you need to know?© 2011 Adobe Systems Inco...
Where to begin?  Okay – you have this web  application that’s been very  successful… but it was never  made with mobile in...
Mobile Application or Mobile Web Application?  Mobile Web Apps      Limited functionality w/ HTML      Flash is problema...
Platform Selection  Web      HTML with JavaScript/CSS  Cross-compile      Adobe AIR (AS3, MXML)      PhoneGap (JS, HTML...
We Chose AIR : Pure AS3 or Flex?  ActionScript 3      Total control over everything      Everything must be designed   ...
Mobile vs. Desktop                                                         Mobile Considerations© 2011 Adobe Systems Incor...
Mobile Differences: Desktop User Experience  My normal setup: dual 1680 x 1050 displays  Lots of applications opened simul...
Mobile Differences: Screens  Users generally have very small  screens and therefore not a lot of  room to work with.  Appl...
Mobile Differences: Pixels Per Inch (PPI)  Traditionally, software developers  have not had to worry about PPI.           ...
Mobile Differences: Touch and Gestures  Touch interfaces completely derail the  concept of a single, clicking arrow,  subs...
Mobile Differences: Hardware  Dedicated Buttons…  iOS: one button.  Android: four buttons along the  bottom or side, which...
Mobile Differences: Menu Systems  Menu Systems  Android: a dedicated menu button  built into the device that can be  progr...
Note Existing OS Paradigms  When users have become familiar  with a specific platform, they will  expect certain behaviors...
Design and Development                                                    Ready? How to Proceed?© 2011 Adobe Systems Incor...
Adapting Existing Application Functionality  When moving from a full desktop application to a more  limited* experience, w...
Functional Distillation             Cut             Move© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Conf...
Small Mobile Devices  Mobile Phones      Conventions exist due to these       devices being in the market for a few      ...
Larger Mobile Devices  Tablets      Generally have more room       that phones: 7” – 10”      Instead of simply scaling ...
Flex 4.6 / AIR 3.0  Captive Runtime  ActionScript Native Extensions  Tablet Enhancements      SplitViewNavigator      Ca...
Development and Distribution                          Oh… now we have to actually build it?© 2011 Adobe Systems Incorporat...
Development  Multiplatform Flex      Use CSS Media Queries      Flex Libraries can be leveraged      Take advantage of ...
CourseMedia™ Mobile      CourseMedia™ Mobile allows       DU CourseMedia™ gallery       access on-the-go!      Allows st...
CourseMedia™ Mobile© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   26
CourseMedia™ Mobile© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   27
CourseMedia™ Mobile© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   28
BETA Period and Testing  Native and cross-compiled  applications are much more difficult  to test than traditional web pro...
Distribution and Education  So now that you have something  for the users, how do you  advertise and get them going?     ...
Success?                                                                         Time will tell…© 2011 Adobe Systems Incor...
Closing Thoughts  There is a lot to consider when translating web  application functionality from desktop to mobile.     ...
Questions?  Ask ‘em.                                                                                   ?© 2011 Adobe Syste...
Get in Touch!                                                                   Joseph Labrecque, MA                      ...
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Turn in your surveys for a chance to WIN!     Hand in your surveys to the room      monitors     One survey per session ...
Upcoming SlideShare
Loading in...5
×

From Desktop to Mobile: Application Functionality for Small Screens

4,794

Published on

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

No Downloads
Views
Total Views
4,794
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "From Desktop to Mobile: Application Functionality for Small Screens"

  1. 1. From Desktop to Mobile: Application Functionality for Small Screens Joseph Labrecque© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  2. 2. Introduction Joseph Labrecque, MA University of Denver - CTL Senior Interactive Software Engineer Adjunct Faculty Fractured Vision Media, LLC Proprietor Adobe Community Professional Adobe Education Leader What’s New in Flash Player 11 What’s New in Adobe AIR 3© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
  3. 3. Topics Covered There is a lot of talk when it comes to building mobile apps but not a lot of anything when it comes to translating desktop functionality to mobile. This talk is about that experience. We will cover…  Initial choices in platform  Flash; do we use pure AS3 or Flex?  Mobile vs. desktop  Smartphones and tablets  Target application: DU CourseMedia  Moving from desktop to mobile  Design, development, testing, and distribution© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
  4. 4. Planning Stages : Research What do you need to know?© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
  5. 5. Where to begin? Okay – you have this web application that’s been very successful… but it was never made with mobile in mind. Ask lots of questions  What are your goals?  Is this really a good idea? Involve your current users  You have an established user base – leverage it!© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
  6. 6. Mobile Application or Mobile Web Application? Mobile Web Apps  Limited functionality w/ HTML  Flash is problematic for iOS Mobile Applications  Native or cross-compile?  Both provide much more functionality than “Web”  Native is platform-specific  Cross-compile casts a wider net- but performance and experience could* suffer© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6
  7. 7. Platform Selection Web  HTML with JavaScript/CSS Cross-compile  Adobe AIR (AS3, MXML)  PhoneGap (JS, HTML)  Titanium (JS, HTML) Native (only choose one)  Objective-C (iOS)  Java (Android)  C#/Silverlight/XAML (Windows)© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7
  8. 8. We Chose AIR : Pure AS3 or Flex? ActionScript 3  Total control over everything  Everything must be designed  Layout/structure non-existent  Performance usually good Flex Framework  Great foundation for apps  Lots of goodies in place  Layout/structure is solid  Performance getting better  Compiles to AS3 anyway!© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
  9. 9. Mobile vs. Desktop Mobile Considerations© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
  10. 10. Mobile Differences: Desktop User Experience My normal setup: dual 1680 x 1050 displays Lots of applications opened simultaneously Uber-Multitasking!© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
  11. 11. Mobile Differences: Screens Users generally have very small screens and therefore not a lot of room to work with. Applications take up the entire screen when running. This means:  Serious choices must be made in terms of what is made available to the user.  Interface elements should be kept to a minimum.  No clutter!© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
  12. 12. Mobile Differences: Pixels Per Inch (PPI) Traditionally, software developers have not had to worry about PPI. 100px 100px Desktop PPI 100px  72 Mobile PPI 320ppi 240ppi 160ppi  160-240  240-320  320-XXX Actually, these are generalizations. PPI on mobile is all over the place, as is screen resolution.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
  13. 13. Mobile Differences: Touch and Gestures Touch interfaces completely derail the concept of a single, clicking arrow, substituting fingertips, gestures, and sensors for the simple mouse pointer. This fact alone reshapes the entire interactive landscape when considering a user’s experience with these devices. Touch and gestures are ancient and powerful! Nothing new at all- the mouse has been an imperfect deviation.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
  14. 14. Mobile Differences: Hardware Dedicated Buttons… iOS: one button. Android: four buttons along the bottom or side, which include a home key, dedicated back button, dedicated options menu button, and search. Tablet OS: a unique bezel through which a variety of gestures can be used, moving beyond simple button presses.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
  15. 15. Mobile Differences: Menu Systems Menu Systems Android: a dedicated menu button built into the device that can be programmed to reveal application options, normally via a menu at the bottom of the screen. iOS: a button within the application that allows the user to access application-specific menus. Tablet OS: a swipe from the top bezel will pull down or dismiss a set of menu options defined for any given application.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
  16. 16. Note Existing OS Paradigms When users have become familiar with a specific platform, they will expect certain behaviors when interacting with that device. Deviating from an established expectation can cause confusion for the user and lead to a frustrating experience, or even to total abandonment of the application. [image courtesy of GestureWorks]© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
  17. 17. Design and Development Ready? How to Proceed?© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
  18. 18. Adapting Existing Application Functionality When moving from a full desktop application to a more limited* experience, what steps and consideration will allow us to perform this adaptation in a clear and organized manner?  Know your product  Know your audience  Become familiar with different devices  Become familiar with user expectations  Do not be afraid  Experiment* Limited in terms of overall functionality© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
  19. 19. Functional Distillation Cut Move© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
  20. 20. Small Mobile Devices Mobile Phones  Conventions exist due to these devices being in the market for a few years now: ActionBar, for example.  Keep in mind that we have absolutely no room for anything extra on these devices.  Design must be focused.  Functionality must be distilled, stripped, SOLID.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
  21. 21. Larger Mobile Devices Tablets  Generally have more room that phones: 7” – 10”  Instead of simply scaling the application elements, re-form them to work better within the space.  Tablets are generally more powerful than smaller devices as well.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
  22. 22. Flex 4.6 / AIR 3.0 Captive Runtime ActionScript Native Extensions Tablet Enhancements  SplitViewNavigator  CalloutButton  ButtonBar Mobile Enhancements  ToggleSwitch  DateSpinner  SpinnerList© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22
  23. 23. Development and Distribution Oh… now we have to actually build it?© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23
  24. 24. Development Multiplatform Flex  Use CSS Media Queries  Flex Libraries can be leveraged  Take advantage of the Flash Builder simulator  Use targeted application logic which wraps the core  Export release builds specific to each target platform© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
  25. 25. CourseMedia™ Mobile  CourseMedia™ Mobile allows DU CourseMedia™ gallery access on-the-go!  Allows students and faculty of the University of Denver to access DU CourseMedia™ gallery objects from mobile devices.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25
  26. 26. CourseMedia™ Mobile© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
  27. 27. CourseMedia™ Mobile© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
  28. 28. CourseMedia™ Mobile© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
  29. 29. BETA Period and Testing Native and cross-compiled applications are much more difficult to test than traditional web projects.  Android is the perfect testing platform due to openness and simplicity.  Gather live data from a small set of users to inform refinements and enhancements.  Move onto other platforms from this foundation.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
  30. 30. Distribution and Education So now that you have something for the users, how do you advertise and get them going?  Leverage internal communication channels.  Try and get marketing involved.  Let your current users know – advertise the mobile app within the desktop/web application!© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
  31. 31. Success? Time will tell…© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  32. 32. Closing Thoughts There is a lot to consider when translating web application functionality from desktop to mobile.  Ask lots of questions up front.  Consider the entirely of options available.  Know the differences between desktop and mobile and become familiar with the extra challenges inherent in mobile platforms.  Don’t be afraid to cut functionality- users need a directed experience.  Testing on multiple devices is a must!© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32
  33. 33. Questions? Ask ‘em. ?© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
  34. 34. Get in Touch! Joseph Labrecque, MA University of Denver - CTL Senior Interactive Software Engineer Adjunct Faculty Fractured Vision Media, LLC Proprietor EMAIL Joseph.Labrecque@du.edu WEB http://josephlabrecque.com/ TWITTER @JosephLabrecque What’s New in Flash Player 11 What’s New in Adobe AIR 3© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34
  35. 35. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  36. 36. Turn in your surveys for a chance to WIN!  Hand in your surveys to the room monitors  One survey per session will be selected as a winner of an Adobe Press e-book or Video Introduction to Adobe Edge Web Design with Muse (code name) from Adobe Android App Development and Design: Learn by Video  Winners will be notified via e-mail at the end of each day© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  1. A particular slide catching your eye?

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

×