From Desktop to Mobile: Application Functionality for Small Screens

From Desktop to Mobile:
Application Functionality
for Small Screens
Joseph Labrecque

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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


Planning Stages : Research

What do you need to know?


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!


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


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)


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!


Mobile vs. Desktop

Mobile Considerations


Mobile Differences: Desktop User Experience

My normal setup: dual 1680 x 1050 displays
Lots of applications opened simultaneously
Uber-Multitasking!


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!


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.


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.


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.


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.


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]


Design and Development

Ready? How to Proceed?


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


Functional Distillation

Cut

Move


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.


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.


Flex 4.6 / AIR 3.0

Captive Runtime
ActionScript Native Extensions

Tablet Enhancements
 SplitViewNavigator
 CalloutButton
 ButtonBar

Mobile Enhancements
 ToggleSwitch
 DateSpinner
 SpinnerList


Development and Distribution

Oh… now we have to actually build it?


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


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.


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.


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!


Success?

Time will tell…


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!


Questions?

Ask ‘em.

?


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


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


From Desktop to Mobile: Application Functionality for Small Screens

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to From Desktop to Mobile: Application Functionality for Small Screens

Similar to From Desktop to Mobile: Application Functionality for Small Screens (20)

More from Joseph Labrecque

More from Joseph Labrecque (20)

Recently uploaded

Recently uploaded (20)

From Desktop to Mobile: Application Functionality for Small Screens