From Desktop to Mobile: Application Functionality for Small Screens

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

http://inflagrantedelicto.memoryspiral.com	315
http://paper.li	2
http://a0.twimg.com	1
http://translate.googleusercontent.com	1

From Desktop to Mobile: Application Functionality for Small Screens

by Joseph Labrecque on Oct 06, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 319

Statistics

From Desktop to Mobile: Application Functionality for Small Screens — Presentation Transcript