Building a common user experience

Earlier this year we changed our user interface drastically and created a whole new user experience – simpler, more beautiful and easier to use.
In the same go as changing the web platform, our mobile and desktop clients needed to be changed too.

Memonic allows you to have all your knowledge with you, wherever you are and what kind of device you’re using. Save your notes in the office, read them in the train and organize your inbox on your home PC.
For all of our users who are using Memonic on several devices, a key factor is to feel at home on all of them. If you just installed the app on your iPhone, you don’t want to spend time learning how to create notes. Or if you just bought an Android phone there is nothing worse than learn that the Android app is not able to assign tags as your iFriends are able to do.

Sharing the same user experience on all devices was a major plan for our new mobile and desktop apps. Still, we were aware of the fact that each platform has certain interaction patterns that all apps should implement. While iOS users are used to navigate between screens by using the toolbar on top of the screen, Android users are used to the back and menu buttons on their phones. And since the Android OS allows sharing data with other apps on the device, we definitively wanted to add support for this feature too.

Making all of that happen on iPhone, iPad, Android, Windows and Mac, built by 4 people within 2 months? A good choice of technology was needed indeed!

Deciding for a framework

Today’s smartphones are based on different technologies: Objective C is used on iOS, Google’s Java variant on Android, Java ME on Blackberry, …

If you are planning to support multiple mobile platforms you have the choice between using the platform’s core technologies or deciding for a technology that’s available on all devices: HTML and JavaScript.

Native Apps

The traditional approach for targeting platforms is writing native apps using the primary tools and languages and there are good reasons for doing that. You’re always able to use the most recent APIs, you have access to all of the phone’s hardware capabilities like orientation sensor, database, geolocation or hardware acceleration. It’s easy to follow the UI guidelines and create apps that look and behave like all the others on that platform. On the downside you need to learn different languages and maintain multiple code. Often this results in apps created by different people in maybe even different teams with different speed and roadmaps. This makes it difficult to offer the same features and behavior on all targeted platforms.

HTML5

The most common denominator on all modern devices is JavaScript. Since all smartphones are equipped with a web browser, you can create an appealing mobile website which can be accessed whenever the user is online.

HTML5 on mobile and desktop devices is undoubtedly a future safe way that will gain more importance over the next few years. However, besides the fact that implementing offline access might be difficult, your mobile website won’t be available in the iOS AppStore, the Android Market or other app stores. While some people dislike these app markets for their revenue sharing models and sometimes rigid and slow review processes, their marketing aid must not be underestimated. An app store also means an advertising platform where your app is showcased, discussed and found by your future users.

PhoneGap

Frameworks like PhoneGap are wrapping your mobile website into an application which can be distributed on all kind of app stores and downloaded from there like all the other apps. Once installed, the HTML and JavaScript code will be executed in the web browsing engine of your device, without network latency and data transmission costs. And in addition you get a uniform API for accessing the phone hardware.

Sounds great – so what are the drawbacks? Be aware that your app is still a mobile website and your users will notice a different user experience compared to native apps. Frameworks like jQTouch and Sencha Touch are doing quite a good job at creating good looking user interfaces but as of 2011 the difference is still noticeable. You will have to decide yourselves whether this matters or not. We made serious prototyping and testing and decided that we did not want to compromise on the user experience.

Appcelerator Titanium Mobile

The Titanium Mobile framework runs a hybrid approach and claims to be a “native cross platform development framework”.

Titanium Mobile is cross platform: the apps are written in JavaScript, which is interpreted on the mobile device. But is it native? Well – sort of. The whole user interface is composed by native widgets and components, which can be accessed from JavaScript over a bridge to Objective C (iOS) or Java (Android). As you are using this layer for creating the UI and reacting to user input, there is a certain performance penalty compared to really native apps but still, the Titanium Mobile based apps feel more real than their HTML5 counterparts.

A further advantage of Titanium Mobile is that the framework allows you to implement your custom native modules in Objective C or Java and using them from JavaScript. This allows you to extend the API and make use of all features of the underlying platform.

Of course, Titanium Mobile has drawbacks as well. There is a certain performance penalty, which might be less or more visible based on the complexity of your app. And then, the Appcelerator crew needs to keep their API in sync with the supported platforms – if you see the rapid evolution of iOS and Android, that’s not an easy task. Appcelerator is doing a pretty good job but so far they have not been able to release stable versions for Blackberry (currently in Beta) or Windows Phone 7. Thankfully, the module concept allows you to add missing parts or implement performance critical tasks yourself.

Comparing all the different approaches, the Titanium Mobile framework seemed to be the best mix between sharing code across platforms and creating a good user experience.

Our top 5 tips for Titanium Mobile development

1. MVC is your friend

We have created a model-view-controller framework for Titanium Mobile, which allowed us to share 100% of the model and business logic with our desktop apps. The views are easily exchangeable for certain platforms, especially tablets.

2. Separate your styles from the code

A no-brainer for web development but applies for Titanium Mobile development too. Keep all layout information far away from code and be able to adapt the layout without breaking the rest.

3. Use phone specific UI only where it makes sense – but use it

A consistent layout on all clients is important to make your users feel at home. But some things simply need to be done in a platform specific way. Example: the best way to make Android users angry is not correctly supporting the back button…

4. Optimize by creating native modules

The goal of cross platform development frameworks is that you as a coder don’t have to write native code for each platform. However, the great thing about Titanium Mobile is that this door is still open.
Implement your app in 100% JavaScript first and then optimize where needed.
We’re using native code where performance matters. This includes tasks like image scaling or document indexing.

5. Titanium Mobile is open source

Use the source code of Titanium Mobile for understanding how the framework works, even if you don’t plan to extend it yourself. You will learn how to improve your code.
We have our own fork at github where we integrate our own extensions and patches.