This article will cover some of the concepts and decisions involved in designing a mobile app for multiple platforms. The considerations discussed will deal primarily with a cross-platform application targeting Android and iOS, and it is written from the perspective of a web developer taking their first steps into the mobile world. We'll look at some of the differences between the platforms and their user interface design, and we'll also examine the pros and cons of cross-platform development in general as well as the specific details of many of the most popular cross-platformframeworks.

A Lot to Think About

There are a lot of things to consider when designing a mobile app. Before you can even draw up a wireframe or write one line of code, you need to think about what your app will do, who it's for, and where it will run. Perhaps one of the biggest decisions is the platform(s) your application will target. There are plenty to choose from: iOS, Android, MeeGo, WebOS, BlackBerry OS, Symbian, Windows Phone 7, Maemo, and more on the way!

Of course, most of us are only interested in the two big contenders: iOS and Android. If you want your app or service to reach the largest audience possible, developing for at least these two makes sense.

Cross-Platform Questions

Once you've decided to design your latest app for more than one platform, you'll find even more decisions that need to be made before you can even write your first line of code. Decisions like:

Do you maintain two different and completely independent apps, or design a hybrid app with one code base?

Working on the same app or service for more than one platform shouldn't mean reinventing the app from scratch on each one. Reusing components and parts of your design when possible will cut down on your workload and help keep your brand recognizable.

How much of your app should you consolidate?

This one is trickier, and depends a lot on your requirements. When it comes to UI design and graphical elements, there is a lot you can reuse with only minor changes to make your idea fit the two most popular platforms.

Cross platform frameworks make recycling your efforts much easier. But there are definite pros and cons to developing with a hybrid framework as opposed to using the native platform SDK. There are also as many cross-platform frameworks as there are platforms nowadays. Later in this article we will examine some of the more prominent frameworks available and, at the end of this article, the pros and cons of developing choosing a cross-platform framework will be discussed.

What about the user interface and customization?

This is one of the biggest points in mobile development. You can have the best idea, and some great code powering it, but if it isn't attractive and easy to navigate, users are going to look elsewhere. Using a cross-platform SDK can have a dramatic impact on your UI design, allowing you to reuse large portions of it, but also possibly limiting some of your options.

Should each platform have a different aesthetic?

Well, the answer here isn't a simple "yes" or "no." We'll discuss this in detail in the next section.

UI Design

Games and Entertainment Apps

A completely custom UI for each deployment platform is a very common pattern in game design and doing so works quite well.

Plants vs Zombies on Android

Plants vs Zombies on iOS

Why? Part of playing a game is learning how the controls and interface for the game work, including how to navigate its UI. Quirky, fun behaviour with a custom, tailored look and feel in the UI are practically essential to create a good gaming experience.

Utility Apps

Time is one of the biggest design influences your UI will have if you're designing for a functional app. Users want to go from your front page to mission accomplished in as few taps as possible. Having an interface with familiar cues, that users will recognize and remember from using in other applications on the platform will make your app friendlier and more streamlined for first time users. But that doesn't necessarily mean the door is completely closed on customization.

Whether you've chosen to go with the native API or a cross platform API, there is a lot you can do with your UI design to really make it standout without destroying your user's confidence or pushing them too far out of their comfort zone.

And the truth is, if you choose to, designing and developing with cross-platform frameworks may mean you have little choice but to create a custom UI. Depending on the framework you've selected, you may or may not have access to native UI elements. But even if you are left without native controls, or if you're just pushing the limits of the native API, you can still follow design patterns that will make users feel at home in your app.

It's all about balance. Have a look at some of the big names and what they're doing with their apps. Take the Facebook app for example: it displays a good balance between adhering to platform UX considerations and the brand recognizability.

The Facebook App on Android

The Facebook App on iOS

Immediately it's recognizable as a Facebook app, no matter which platform you're on. But it also incorporates those familiar elements and patterns that users are used to, making it just as easy for an iPhone owner to jump in and get going as it is for a Galaxy owner.

The Tweetdeck app is an even better example.

The TweetDeck App on Android

The TweetDeck App on iOS

Ironically, the official Twitter app is in my opinion a pretty good example of cross-platform design gone awry.

The Twitter App on Android

The Twitter App on iOS

The trick here is all in the toolbars and navigation controls. Those bars at the top and bottom of the screen, the action bar, the navigation bar, and similar design patterns should be kept consistent with the platform's standard. You can tweak the colour and style a bit, but the functionality and overall appearance should be instantly recognizable. However, your content can take on a much more unique look-and-feel, so you're left with a fairly consistent looking design across platforms. How far can you take it? Well, have a look at sites like TappGala and see what others are getting away with.

What's the difference?

When designing, be aware of the subtle, and not so subtle, differences across platforms. One of the biggest is the physical interface, the actual hardware buttons on the device. The iPhone only has one button relying on soft buttons in the UI for everything else. Android devices, on the other hand, have three standard buttons. The menu, the back button, and the home button. Android users will be confused if tapping on these doesn't produce a result in your cross-platform app. Android also sports a context menu, accessed from the menu button, which gives you another place for advanced controls. You will have to make accommodations in your iOS design for these missing buttons and menus with soft options.

Cross-Platform Frameworks

If you're designing and developing for multiple device platforms, you can recycle more than just your design elements. Depending on your requirements, there are a number of cross-platform frameworks that can help you consolidate your codebase.

PhoneGap

• Website: http://www.phonegap.com/
• Language(s): Javascript, HTML, CSS
• Platforms: iOS, Android, BlackBerry OS, webOS, Windows Phone 7, Symbian, Bada
• License: Open-Source (MIT license)
• Support: Support Packages Available
• Quick links: Download PhoneGap, installation instructions, extending PhoneGap instructions, plugins

If you're a frontend web developer, you'll feel right at home with PhoneGap. Using your existing knowledge of HTML, CSS, and JavaScript you can quickly develop apps. PhoneGap is essentially WebKit with a custom JavaScript API that wraps the native API. It's also a great option for porting your existing web apps and promoting them to fully fledged mobile applications. You can use any of your favorite client-side web tools, including JavaScript frameworks like jQuery Mobile or SenchaTouch.

Unfortunately, because your app runs out of a WebKit browser instance, performance won't be as fresh as native apps or even what is provided by other available frameworks. You will also have no access to native UI controls (although you can theme your own to be similar with CSS). PhoneGap does provide a great hosted build service, which allows you to develop apps locally, and then upload and build them with their online service. This is great if you don't have a Mac for native iOS development and testing. Before deciding to use PhoneGap, do be sure to check that it supports all the features you need for your target platforms. Fortunately, the PhoneGap project is open-source and fully extensible, so you can always add missing features on your own if it becomes necessary to do so.

PhoneGap Showcase:

Harmonious sketch app

Squeezebox

Orbium

To see more examples of apps built with PhoneGap, checkout the official demo site.

RhoMobile

• Website: http://rhomobile.com/
• Language(s): Ruby, HTML, CSS, JavaScript
• Platforms: iOS, Android, BlackBerry OS, Windows Phone 7
• License: Open-Source (MIT license)
• Support: Proprietary enterprise support license available
• Quick links: RhoStudio easy install, Ruby Gem install, extending Rhodes.

Rails developers will love this one! With RhoMobile you can develop your apps in Ruby with a strong MVC approach! Views are designed with HTML, CSS, and Javascript, so you can bring all your web dev skills with you. Again, this framework has no standard support for native controls, but there are extensions available which will let you get at them.

Rhodes also has a great hosted build service, RhoHub, and some interesting enterprise and industrial features such as Rhosync and NFC support. There is a definite emphasis on RhoMobile as a solution for enterprise apps. The framework is also extensible, so you can add your own native libraries and Ruby gems. Performance is pretty good as your app will be precompiled to byte code.

RhoMobile Showcase:

Trolley Mobile

2Know

OECU Mobile

To see more examples of apps built with RhoMobile, checkout the official demo site.

Appcelerator's Titanium Mobile

• Website: http://www.appcelerator.com/
• Language(s): JavaScript, JSS
• Platforms: iOS, Android
• License: Open-Source (Apache v2 Community Edition)
• Paid Options: Indie ($49/month), Pro ($199/month/developer), Enterprise
• Quick Links: Buy, Download, Installation instrucitons, extending Titanium, module marketplace

Titanium Mobile is another framework that will suit web developers moving into the mobile space. Titanium initially took a similar approach to PhoneGap, providing a web view that wrapped native APIs. But, since v1.0, Titanium has been an entirely JavaScript based cross-compiler, with access to device native UI elements and a huge performance increase.

Version 1.5 also introduced JSS, Javascript Stylsheets, modelled on CSS, providing a flexible layout system that can be used to tailor your views for different devices. Separate namespaces are also available for platform specific support. You can use any IDE you like to develop your code, and Titanium Developer is used to prepare and package your app (though debugging can be a pain).

Showcase:

Titanium App Reel

GetGlue

Wunderlist

To see more examples of apps built with Titanium Mobile, checkout the official demo site.

Ansca's Corona SDK

• Website: http://anscamobile.com/corona/
• Language(s): Lua
• Platforms: iOS, Android
• License: Trial, $199/year single platform, $349/year multi-platform
• Quick links: Buy/Download, Installation instructions for Mac OSX, for Windows, 3rd party tools

Ansca was founded by former Flash and Adobe engineers, and their experience shows in the Corona SDK implementation. Corona has a well rounded API with a definite emphasis on rapid high performance 2D game development. The API includes lots of options to speed game development, such as Box2D physics, OpenGL + OpenAL support, animation functions, and sprite and scene management. Corona even includes some easy migration tools for Flash apps and ActionScript developers

Anyone with a history of Game modding or Flash development will feel very comfortable with the Lua scripting language and Corona toolset. Ansca also provides an online environment with a place to promote your app, share code resources, and download 3rd party add ons. It's not just about games either, Corona also offers a library of UI widgets and some native elements for util app developers. All of this is very attractive, but it does come with a price: $199/year for developers focusing on a single platform (either iOS or Android), and $349/year for both iOS and Android support.

Showcase:

ChocoRun

Magic Defenders

Blast Monkeys

To see more examples of apps built with the Corona SDK, checkout the official demo site.

Unity3D

• Website: http://unity3d.com/
• Language(s): IDE with Javascript/C#/Boo Scripting on Mono
• Platforms: Web, iOS, Android, Standalone, Wii, PS3, Xbox360
• License: Free, and a Pro version starting at $1,500 USD. Check the license comparison and price details.

Unity is essentially a scriptable game engine with its own, powerful, IDE. Geared for high performance game development on a multitude of platforms, including consoles and the web, this is a game developer's dream come true. It is, though, definitely only meant for 3D game development, so util app developers should look elsewhere. While they do provide a free version of the framework, to really enjoy the full benefits of Unity you're going to have to invest a fair sum of cash, with a pro license going for $1,500 USD plus additional fees for addons.

Showcase:

Unity Spring 2010 Highlight Reel

Shadowgun

Max and the Magic Marker

/>

To see more examples of apps built with the Unity3D, checkout the official demo site.

Cross-Platform Pros and Cons

What follows is a list of pros and cons associated with using a third-party SDK to develop cross-platform applications.

Cons

• SDK Lock In:

  Once you commit yourself to a framework, your projects become dependant on a third party. You'll want to choose a stable framework that has a dedicated developer (preferably developers) and a large community. Open source frameworks offer some safety here. Because you have access to the source, if the developer abandons the SDK in the future, you or others could continue its development.

• API "Freshness":

  It takes time for platform API changes to trickle through the various third party SDKs. You may have to wait awhile for the latest and greatest features to become available, if they become available at all. Again, you are relying on the SDK developer's commitment to the project.

• Limited Control:

  Cross-platform SDKs are an abstraction of the various platforms into one uniform interface that should theoretically make development easier. But at the same time, this abstraction blurs your access to the underlying API, and your feature set may be more limited as a result. With the official, native API, you are only limited by the hardware and occasional design decisions made by Google or Apple. A related point: heavy duty tasks such as 3D rendering and video/audio processing may be especially limited in the approach you can take, if they are possible at all.

Pros:

• Consolidated effort:

  The most obvious benefit of choosing a cross-platform SDK is in reducing your overall effort for a given project. By targeting a single API, you save a great deal on development and maintenance of the code base.

• Plugins:

  This goes back to the cons of API freshness and Limited Control. Many frameworks include some extension or plugin architecture that allows you to build a native library and integrate it into the SDK. This really gives you the best of both worlds, you can develop missing or advanced features with the native tools, and then use the cross-platform SDK for common tasks.

• Familiar Languages:

  Selecting a cross-platform SDK that matches your current skill set reduces your learning curve. In larger teams that have one tool for the job, this can also mean less design time, training time, and the fewer total developers required to implement the project.

• Decreased Development Time:

  The majority of cross-platform frameworks not only provide one tool for many jobs, but also simplify development with dynamic languages and comprehensive libraries for common, repetitive tasks.

• Code and Asset sharing:

  To make life even easier, several of the major frameworks have official repositories for sharing code and assets or purchasing them from other developers.

Wrap Up

You should only consider a cross-platform framework if it fits both your requirements and skill set. Do some careful research and make sure the development tool of choice supports all the functionality you want to include in your app. There would be nothing worse than getting halfway through development before you realize that a key functional requirement is not supported by the SDK you're using. Just keep in mind that many of the frameworks do support extensions, which let you add native modules to fill in gaps left by the core SDK developers. Ultimately, a cross-platform framework should reduce your workload, not heap more trouble on your already busy schedule!