New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Start learning with our library of video tutorials taught by experts. Get started

Building Mobile Apps for Multiple Devices with Flash Professional
Illustration by Don Barnett

Designing for mobile devices


From:

Building Mobile Apps for Multiple Devices with Flash Professional

with Paul Trani

Video: Designing for mobile devices

There are a lot of things to consider when designing for mobile devices. You need to consider the environment in which it's being used, the context in which it's being used as well, the input method or methods depending on the device, and its other capabilities, as well as certain metaphors you can use in your app. To start off, just think about where the user is. When you're developing the app, everything looks clean and clear and is easy to read. But the user on the other hand is maybe at the best case, inside wherein lighting might be a little better, but you could easily have this glare as you move to outside and even outside on a sunny day.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Building Mobile Apps for Multiple Devices with Flash Professional
2h 31m Intermediate Jan 05, 2012

Viewers: in countries Watching now:

In this course, author Paul Trani demonstrates how to create, test, and publish a mobile app that works across multiple platforms (iOS, Android, and BlackBerry Tablet OS) and adapts to either a smartphone or tablet display. The course also tackles the issue of various screen sizes and density and how to scale and adjust content.

Topics include:
  • Designing for mobile
  • Modifying existing web content for mobile delivery
  • Using the accelerometer
  • Setting up a mobile project
  • How to test and debug
  • Optimizing graphics and ActionScript for mobile
  • Creating scalable content
  • Adjusting for orientation
  • Sharing and updating graphics across multiple projects
  • Publishing an app to the App Store and Android Market
Subjects:
Developer Mobile Apps
Software:
Flash Professional iOS Android
Author:
Paul Trani

Designing for mobile devices

There are a lot of things to consider when designing for mobile devices. You need to consider the environment in which it's being used, the context in which it's being used as well, the input method or methods depending on the device, and its other capabilities, as well as certain metaphors you can use in your app. To start off, just think about where the user is. When you're developing the app, everything looks clean and clear and is easy to read. But the user on the other hand is maybe at the best case, inside wherein lighting might be a little better, but you could easily have this glare as you move to outside and even outside on a sunny day.

So you need to make sure your graphics have enough contrast and can stand out regardless of where the person is. Next, you want to consider the context into which it's being used. So what are they doing when they're using this app? Are they waiting in line at a Starbucks? Are they watching a commercial? And you need to be prepared for this app to be interrupted and it's basically being used potentially in these little gaps of time in people's lives. So you need to design for these quick tasks and the app needs to be easy to get into and out of.

Next step, how are they holding the phone? Are they holding it with two hands, so do you have the controls by the thumbs, or are they holding it with one hand and even controlling it with one thumb or using their other finger? There's many different ways people hold their devices, but you need to consider your content as well as how the user is holding the phone. Also what about a tablet? How are they holding this tablet? It is a bigger device, they might use two hands, so they might have thumbs on both sides that they can use, or they can hold it with one hand and use the other hand to go ahead and navigate to the screen.

So consider where you put the controls based on how the person holds the device. Since I'm talking about buttons, well, what size should we make these buttons? Now if it was a website, we can make them say as small as 15x15 pixels, because really that's the size of a cursor. It's really pretty small. But when we go to devices, we know that you actually have to click on them with your finger. So what's the size of a fingerprint? Often icons, if you're on Android or iOS, they're roughly 45x45 pixels.

So you need to go ahead and take whatever you have on the Web and pretty much triple its size to make it clickable on a mobile device. Now that you know the size of your buttons, well, where do you place them? The screen on the left-hand side, basically what you're doing is you're manipulating a slider, but it's changing the number below the slider, so you're manipulating a number that you can't even see. So it's better to flip those to make sure you could scrub that slider and change those numbers that are actually above the finger. So you need to consider that the finger comes with the hand and your whole hand can cover up some of the content.

And just like on the Web, the higher up on the screen, the more important content would be or any numbers you might manipulate. This is where it gets really fun, because these devices have different capabilities as well. This is really great because we can go ahead and use Multitouch. Say for instance, if I have a photo, I could pinch in, zoom in on the photo. So it's really exciting, I don't need another button. That's maybe my Rotate button. I can go ahead and use the Accelerometer as well. As I tilt the device, content could change. Maybe I shake the device and it clears fields.

Again, Orientation, how it's rotated, the Microphone, Keyboard, Geolocation, so get their location, serve up that right content, a Camera and even GPS as well. So, really exciting capabilities that these mobile devices have that you can go ahead and use in your app. But also with these devices, they're a lot smaller and not as powerful. And it's often said that the average processing power of a mobile device these days is about the processing power of a computer about eight years old.

So if you can think about what it was like to work on a computer about eight years ago with those constraints and even with those bandwidth considerations, we need to think about those as well. Less processing power and not-always-a- reliable connection as well on mobile devices, aside from the screen being about a third of the size of say for instance, a laptop screen. Since I'm talking about size and resolution, it actually varies quite widely amongst these different devices. We have earlier iPhones and iPods at about 480x320.

That's the pixels width and height. And then the pixels per inch, the PPI might be 163. So we have more dense pixels, but there's not really that many compared to the iPhone 4 which has a 960x640 pixel resolution, yet the screen is actually the same size. So there's quite a few different sized mobile devices in the market these days and we need to make sure our content adjusts appropriately. Also we have tablets. Considering there's a couple different size tablets, how does our content fit on these different tablets, regardless of the orientation of the device.

You also want to consider using common metaphors. Say for instance, you might have the Plus sign, which if that's on an icon, you know that's to add something. Or you can have Arrow buttons to go to the next or previous items, or even use a Calendar icon to access the calendar. You want to think about everyday items you use and see how you might be able to use them in your app. A good site I like to go to for this is something called patterntap.com. Lots of great ideas there, when it comes to using common metaphors.

Lastly, you want to test your app and not at the end of the process, but the whole time you're creating this app, you want to test it out on your own phone and test it out with your friends to see what they think and how they respond to the graphics, the buttons, all of that content. And you want to gather that feedback and implement it into your app. And that's the great thing about apps, is they're never permanent, you can always release an update, but it's great if you get that feedback early on and you're able to implement it right away. Keeping these design guidelines in mind could increase your app's chance of becoming a success.

There are currently no FAQs about Building Mobile Apps for Multiple Devices with Flash Professional.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Building Mobile Apps for Multiple Devices with Flash Professional.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.