by Liz Myers
Mobile design and development is both an exciting and complex space in which to work these days. At present, I'm eagerly awaiting the release of Adobe Flash Player 10.1, Adobe AIR 2, and the arrival of my new Android smartphone. But it's not just about specific players, platforms, or devices. Even more interesting, in my view, is the shift in consumer behavior to mobile content consumption, and the emergence of this pervasive new delivery channel. According to a recent Gartner report, mobile web use is expected to outpace desktop browsing by 2013.
This is one of the reasons I suggest targeting the mobile web — for those just getting started in mobile. This strategy affords further advantages over native application development:
Adobe has embraced the trend toward mobile content delivery by building time saving new workflows into CS5. The new mobile workflows can help you create your content, realize productivity gains, and ultimately deploy to the widest variety of devices and platforms available. In this article, I'm going to show you some of these new workflows using Adobe Fireworks and Adobe Device Central. But first, I'd like to review some basic considerations when publishing to mobile devices.
The key to success in the mobile space is carefully selecting what to publish and for whom. This can be tricky since we're not just talking about a market segment or demographic here. What we're really asking is: who is the target audience for my content and what kinds of devices do they have? Device fragmentation means that it's difficult to please everyone all of the time. So we need to target a collection of devices that have significant features in common (among the most important are screen size, resolution, and interaction model — 5-way nav vs. touch screen) and use these as a reference set. Once you have a your project on wheels, it's relatively easy to adjust for different screen resolutions or navigation models, and grow your target list of devices from there.
Actually, I recommend that if you're new to mobile, target your own device(s) initially. Although there are tools like Device Central that can emulate projects on the desktop, it's best if you can test on an actual device right in the palm of your hand. In the early stages, it's vitally important that you are able to live with the project, carry it with you, and review you content in different locations, lighting conditions, and times of day. Only in this way, can you really explore and refine mobile projects in a way that will make sense for end users.
When considering what to create for your audience, select a concept that adds value to their day. Your site may provide access to additional information or services, or it may offer a measure of convenience that they didn't have before. Whatever it is you decide to build, keep it extremely simple. Strip away all of the features and visual design elements that aren't absolutely necessary to the core concept and brand. Remember, the number-one enemy of great experiences on devices is network latency, so try to keep your pages as lightweight and agile as possible.
Clearly mobile phones have properties that are different from other devices and platforms. Listed below are some of the most important characteristics to consider:
Assuming you've come up with a concept and have sketched the flow of your web site or web-based application, it's time to begin creating your content. But rather than reach for individual products like Adobe Flash or Adobe Photoshop directly, I recommend firing up Device Central first, so that you can you can access the online device library and leverage specific handset data for your project.
Figure 1. Launching a new Fireworks document
Next you need to select one of the devices from the Test Devices panel and then click the Create button in the lower right corner to launch your new document.
Note: For further detail on this workflow, please see my full tutorial, Mobile workflows using Fireworks CS5 and Device Central CS5.
Figure 2. Selecting the multitouch 320 × 480 device
You should now see a new Fireworks document, which is automatically set to the correct display size and screen orientation for your target device. Now you're ready for the fun part — creating your mobile content!
I cannot overstate how versatile this application is, nor how much it can increase your productivity. Although demonstrating each of the key features is beyond the scope of this article, I would like to mention some of my favorites. In terms of organization and productivity, one of my favorite Fireworks features is the ability to create multiple pages with varying dimensions, screen orientations, and even document resolutions all in a single file! This means that you can easily work on portrait and landscape layouts at the same time, which is really handy when targeting multitouch devices and using the accelerometer. You can even save application icons alongside your main content in the same file. No other Adobe product does this.
Other features that really increase productivity include:
When designing for mobile devices, there are points in the process where you need to preview your work in the context of an actual handset. In Fireworks CS5 there are two methods of doing this.
If your content is relatively static (i.e. you're not using web links in your FW file), you can select individual pages and then preview them one at a time in Device Central as shown in Figure 3.
Figure 3. Previewing individual page layouts in context
However, if you do make use of some simple web links to move between pages or views of your project, then you can export all of the pages as HTML files and open them from within Device Central. This has the added benefit of being able to further share the overall flow by taking snapshots along the way and saving them as an HTML package for uploading to the web. For further detail, please see my mobile workflows tutorial.
Figure 4. Exporting all pages to generate a quick HTML prototype
With consumer demand for mobile content growing at an exponential rate, these are very exciting times indeed. However, it's important to bear in mind that user expectations are also high — so you'll want to create an experience that not only looks good, but performs well on devices. For more detailed information on getting started with mobile, including image optimization, code optimization, and more, visit the Optimize web content for mobile delivery resources on the Adobe Developer Connection. And remember, the best way to get started in mobile is to dive right in and experiment. By using CS5 tools you'll not only be able to get your project off the ground quickly — but you'll also learn more about mobile design, development, and delivery in the process.
Note: This includes leading multitouch devices: generic Android, Nexus One, HTC Hero, HTC Dream, iPhone, Motorola Droid, and Palm Pre.
Liz Myers is a senior user experience designer, specializing in mobile and web-based applications. Located in London, England – she enjoys working with multi-national companies to build a mobile strategy, define requirements, create new user experiences, and deliver content that adds significant brand value.