Your SlideShare is downloading. ×
From Desktop to Mobile: Application Functionality for Small Screens
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

From Desktop to Mobile: Application Functionality for Small Screens

4,714
views

Published on

Published in: Technology, Business

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,714
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
Comments
0
Likes
1
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. From Desktop to Mobile: Application Functionality for Small Screens Joseph Labrecque© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 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. 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. Planning Stages : Research What do you need to know?© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
  • 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. 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. 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. 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. Mobile vs. Desktop Mobile Considerations© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
  • 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. 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. 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. 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. 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. 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. 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. Design and Development Ready? How to Proceed?© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
  • 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. Functional Distillation Cut Move© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
  • 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. 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. 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. Development and Distribution Oh… now we have to actually build it?© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23
  • 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. 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. CourseMedia™ Mobile© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
  • 27. CourseMedia™ Mobile© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
  • 28. CourseMedia™ Mobile© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
  • 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. 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. Success? Time will tell…© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
  • 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. Questions? Ask ‘em. ?© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
  • 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. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  • 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.

×