Mobile and Devices Developer Center

Overview of Adobe Device Central

Note: This article was written for Adobe Device Central CS3, but the content still applies to Device Central CS4.

As a designer and product manager in the mobile industry for nearly eight years, I can tell you that authoring for mobile and consumer electronic devices is simultaneously one of the most exciting and frustrating opportunities for designer and developers today.

In this article, I'll examine the promise and challenges of mobile and device authoring, and introduce Adobe Device Central—the new solution developed by Adobe specifically to help designers and developers minimize these challenges and focus on creating engaging mobile experiences.

Promise of mobile phones and consumer electronic devices

Authoring for mobile and consumer electronics devices truly is one of the newest and most exciting opportunities for designers and developers today. If you think about it, mobile phones and consumer electronic devices (I'll use mobile or devices for brevity) may be the largest and most fertile arena for creating new breeds of end-user experiences for consumers and enterprise workers alike. The reasons are numerous.

Devices are everywhere

We are increasingly surrounded by devices with digital screens—mobile phones, media players, car navigation systems, kiosks, cameras, and more. For example, with more than two billion mobile phone users worldwide, mobile devices are becoming the leading way we interact with information and applications in our daily lives, surpassing even the personal computer.

Personalization

Mobile devices have become incredibly personal, even more so than PCs. Mobile phones and media players have become fashion accessories, if not status symbols. Ring tones, wallpaper, screen savers, UI themes, and mobile data services are crucial elements of a device's "wardrobe." This provides mobile designers and developers an opportunity to frequently build and sell fresh new styles.

Something for everyone

Creative professionals of all kinds can apply their skills for mobile. Composers and audio artists have ring tones, soundtracks, and sound effects. Video artists can work on the hottest emerging content type for devices: mobile video. Bitmap artists can continue to design visual mockups and end-user content like wallpaper and UI themes. Web designers can extend their conventional websites for devices. And Flash wizards can bring the magic to the small screen and make a huge splash.

Opportunity to make a difference

Despite device proliferation, there is vast room for improvement in terms of user experience. Who wants to pay for data services that are hard to find, hard to use, slow, and that look like yesterday's news? This is a great opportunity for artists, designers, developers, and companies of all sizes to point the way to something we can all really get excited about.

Challenges of mobile and devices

The potential for mobile device media and applications is unlimited—it's a great new playground for designers and developers. Unfortunately, it's not all roses. Designing for a diverse set of mobile devices can be frustrating. It often stops companies in their tracks before attempting a mobile device project. Here are just a few of the challenges:

Relatively limited capabilities

Compared to desktop computers or the web, mobile devices have much more limited processing power, memory, screen size, input capabilities, network bandwidth, and so on. Creating great content and applications for these "lesser" devices forces you to design and develop in a careful, well considered way with a huge emphasis on efficiency.

Device fragmentation and proliferation

One of the biggest challenges stems from the massive variation in device attributes. Screen resolutions, CPUs, memory, input mechanisms, operating systems, manufacturers, or mobile carrier–specific applications and services are just several of the ways that devices can vary significantly from one another.

There's also an endless stream of new devices or publish targets for which you have to author. Adobe research has found that professional media companies targeting mobile spend hundreds of thousands of dollars each year buying and analyzing all the phones that come to market.

Being efficient

Device fragmentation and proliferation forces designers and developers to create different versions of the same content to fit each type of device. Mobile developers also spend 30–50% of their time doing tedious, mobile-specific work that takes precious time away from the creative process according to Adobe research. Figuring out how to design and build efficiently is what separates those who attempt to do business creating device content from those succeeding at making a profit at it.

Testing

Testing your content to ensure it works—and works well across all publish targets—is crucial for mobile. On-device testing is always the most accurate way to go. But the simple, yet time-consuming, act of transferring files to a device for testing can seriously slow down the design process. Varying a device's system state for dynamic content testing is yet another burden to bear. For example, some Japanese designers have told us tales of riding up and down elevators in Tokyo skyscrapers just to test that their Adobe Flash Lite–based wallpaper actually changed based on the signal strength of the phone!

So what to do about all these challenges? Enter Adobe Device Central.

Taming the Chaos: Adobe Device Central (the solution)

Adobe Device Central is very much a result of the merger between Macromedia and Adobe. Our product team combined device and authoring experts from both companies. Together they shared their best ideas, skills, and experience to tackle the problems of mobile and device authoring. Our goal was to make a real impact on the way both novices and experts experienced mobile authoring. We wanted to reduce the problems mobile presented, taming the chaos and reducing the tedium, allowing designers and developers to focus on quality and creativity. We also wanted to support all types of creative professionals in their mobile and device work whether it was for bitmaps, video, web, or Flash Lite.

The result is Adobe Device Central, a new application in Creative Suite 3 that provides knowledge, workflow, and functionality for mobile and device authoring. Device Central provides integrated project setup and preview workflow with many of the tools in the suite, including Adobe Photoshop, Adobe Illustrator, Adobe Premiere Pro, Adobe After Effects, Adobe Dreamweaver, Adobe Fireworks, Adobe Flash, and Adobe Bridge.

Here's how it works:

• It provides information about a device's hardware, software, and media capabilities for bitmap, video, web and Flash Lite media types, allowing you to design appropriately for each device
• It helps you set up projects efficiently when authoring for multiple devices
• It allows you to preview your work inside an interactive device emulation environment

Device Central is thus highly useful for tasks throughout the design and development process, including planning, ideating, designing, testing, debugging, documenting, and presenting. The result is a savings in time, money, and effort while delivering higher quality results across multiple devices.

Device Central is not meant to replace on-device testing. It is meant instead to accelerate the work before on-device testing starts by reducing the frequency of on-device testing early on. This allows you to iterate quickly, saving huge amounts of time when you're inching toward perfection in "tweak-and-test" mode.

Device Library

The first major part of Device Central is the Device Library, where you can view and organize device information. Use it to understand device attributes and capabilities, and plan what you'll build and how you'll build it. This is key as many of you will be new to mobile and need to adjust to their reduced capabilities in comparison to PCs.

Figure 1. Device Library view

Device profiles

Over 200 device profiles will be available at launch of Device Central, with hundreds more to come. Our initial collection of devices represents many of the Flash Lite–enabled devices available worldwide today. This includes mobile phones and media players from manufacturers such as Nokia, Sony Ericsson, Motorola, Samsung, LG, iRiver, and mobile operators such as NTT DoCoMo, KDDI, Softbank, and Verizon Wireless. This is an exciting opportunity for you to get "access" to devices that may currently be beyond your reach, financially or geographically.

Each device profile contains detailed information, including general device hardware and software data, media type support (bitmap, video, web, Flash Lite), and content type support (wall paper, animated ring tones, stand-alone content, and so on). Information includes device screen sizes, supported content types and settings, network capabilities, and more.

Flash Lite designers and developers will love the deep information about Flash Lite support such as player version, FS commands, memory allocation, performance, content type support, sound support, addressable screen size, and many other attributes not previously available in Flash Professional 8. View the device profiles individually or use the handy side-by-side comparison feature that allows you to see multiple profiles simultaneously.

These profiles are developed by teams at Adobe with contributions from mobile and device industry partners including the original equipment manufacturers (OEMs) and mobile operators. We run hundreds of tests on each device in an effort to present the most accurate and trustworthy information we can.

Figure 2. One of Device Central's many device profiles

Organize and search

You can organize the device profiles in a number of useful ways including by manufacturer, screen size, content type, mobile carrier (if applicable), Flash Lite player version, and more. A powerful search feature allows you to dissect the Device Library across multiple attributes and pull out exactly what you are looking for. For example, you can search for all NTT DoCoMo phones that support Flash Lite 1.1, have a 240 x 320 screen size, and support the Calling Screen content type. The Device Library will be filtered in real time and show you the matching devices instantly!

The Device Library also allows you to create your own organization system for device profiles. Create hierarchically organized device sets and add any device to them. This is a great way to keep track of what devices you need to design for, or to keep similar devices together that can be authored for as a unit. You can also import and export device sets to share with colleagues also using Device Central for a particular project.

Start a project

A cool thing you can do is use a device set to declare the publish targets for a new Flash, Photoshop, or Illustrator project. Device Central brings up a panel that shows you the common screen resolution sizes among the devices selected so you know the minimum versions you need to create and still publish to all the targets.

Figure 3. Device Central helps you analyze common screen sizes

Emulator preview environment

The second major part of Device Central is the Emulator preview environment. This is where you can see your work within the context of a "virtual device" you select from the Device Library. Device profiles often include a high-resolution device skin so you can get a real sense of how your onscreen design works with the industrial design of the device.

In this mode, Device Central can be used as a stand-alone application for viewing content, much like a multimedia player. Open a file or drag bitmap, video, web, or Flash Lite content on to Device Central and it will show up in the screen of a device. Easily change devices to get a sense of how it looks across a range of device form factors and designs. I am still amazed at how this simple act can be so useful and delightful.

But Device Central really comes alive when you use it in conjunction with the other Creative Suite 3 tools. Device Central integrates into the preview workflow of Photoshop, Illustrator, Premiere Pro, After Effects, Dreamweaver, and Flash Professional. Craft your work in one of these tools and quickly see what your content looks like in a device—using just a few clicks of the keyboard or mouse.

Figure 4. The Emulator preview environment

Here are some specific features of the Emulator preview environment:

Interact

Device Central allows you interact with the device. For example, zoom in close for a pixel-accurate review of your wallpaper image. Rotate the device to see the mobile video you're previewing in a landscape aspect ratio. Push the keys on the device to interact with your Flash Lite game.

Screen simulation

Device Central allows you to adjust the screen simulation settings. Brightness, contrast, and gamma correction can all be adjusted to mimic the actual look of the device's screen. A fun but useful feature we added even shows you what lighting reflections might look like on the physical device. This is useful to remind both new and experienced designers that your work will be displayed on a physical device in the physical world with imperfect viewing environments.

Scaling and alignment

We took pains to find out how media renders on the screen for many media and content types for our device profiles. The Emulator uses this info to show you the addressable screen for each content type, its position, and its scaling behavior. This is handy to know if your bitmap wallpaper, for example, will auto-stretch to the full screen or not. You may or may not then have to create a custom version for that device.

Power emulation for Flash Lite

For Flash Lite designers and developers, Device Central provides powerful emulation features that are sure to ease your work and make you more productive. Real-time memory profiling shows you how much heap memory you are using, so you can stay within the limits for a particular device.

We also provide approximate performance emulation for Flash Lite so you can get a useful sense of how fast your work renders on each device. This should go a long way towards helping you ensure that you're delivering an effective user experience.

Finally, we provide a number of ways to simulate and change the state of the device in ways that your work may be sensitive to. For example, Flash Lite–based wallpaper may use the battery level, time of day, or signal strength to change what's displayed on the screen. Now instead of transferring your SWF file to the phone for testing, you can change those attributes right inside Device Central, saving you huge amounts of time, especially during testing and debugging.

Where to go from here

So that's Adobe Device Central. It's our 'central' place for developers to plan, set up, and preview their work for 'devices' while authoring in Creative Suite 3.

Because Adobe is committed to mobile and devices, and wants everyone to be able to give it a try, we've made Device Central easy to find. It's in every version of Creative Suite 4, and comes bundled with Photoshop, Illustrator, Premiere Pro, After Effects, Dreamweaver, Fireworks, and Flash. Please check it out and tell us what you think. We hope you'll like it.

Also see this video discussion about it.

About the author