Cross-platform UIs for mobile Meteor apps

Meteor makes building cross-platform mobile apps easier than ever. With a quick meteor run ios you can have a native mobile version of your Meteor app. But just because your app runs cross-platform doesn’t mean it feels cross-platform. Your app also needs a ‘cross-platform’ UI.

tl;dr

  • iOS and Android apps should look different
  • Your cross-platform mobile Meteor app needs a cross-platform UI
  • Ionic is making that easy
  • Let’s make Ionic for Meteor
UPDATE: Meteor 1.2 launched with official support for Angular. You can now integrate Ionic with Meteor in a more streamlined fashion that before.

Why do you need a ‘cross-platform’ UI?

Your users will thank you

Have you ever noticed how a lot of mobile apps look similar? This isn’t a lack of creativity, it’s totally intentional. Mobile apps are meant to be used for short bursts of time. When a user opens your app, or quickly switches to it from another app, it should feel familiar. They should immediately know where the navigation items are and where the primary action items are.

Your goal should be to reduce the cognitive load for your users as they switch between apps.

Getting Featured by Apple

With over 1.2 million apps, Apple’s App Store is a busy place and getting noticed can seem almost impossible. Getting featured by Apple can be a game-changer for an app.

For instance, by getting featured by Apple, Sam Vermette’s Transit app was able to amass over 100,000 weekly active customers without doing any paid marketing. In a post titled “The path to getting featured by Apple”, Sam says:

the more “Apple-ish” you can design your app, the better…with Apple your app’s design is your marketing.

If you’re doing client work, don’t you owe your client the possibility of getting featured by Apple? If you’re delivering ad-hoc designs or building iOS apps that use Google’s Material Design philosophy you may be making that an impossibility.

It’s how the “pros” do it

I took screenshots comparisons (see below) of the iOS and Android apps for Facebook, Twitter, Instagram and Path. The differences are strikingly consistent:

  • Navigation Tabs on the bottom for iOS, on the top for Android
  • Headers and titles are center aligned on iOS, left aligned on Android
  • Action buttons in the header are separated on the left and right on iOS, but all on the right on Android
  • The font is Helvetica on iOS, Roboto on Android

These differences may seem small, but they can go a long way in making your app feel more at home on the platform it is running on.

I think this makes it pretty clear that the best practice for cross-platform mobile development is to tailor your UI to the platform it is running on.

Facebook app comparison
Twitter app comparison
Instagram app comparison
Path app comparison

So How Do We Do It?

What first got me thinking about this was Ionic’s 2014 yearly review where they showed off what they call “platform-specific styles” in Ionic apps.

Platform-specific styles

I’ve been a fan of Ionic for a while, but the Angular-dependency always put me off. I’d toyed with integrating Meteor and Ionic in the past, but these “platform-specific styles” are what finally motivated me to make a serious effort.

Introducing Meteoric: Meteor+Ionic

Meteoric aims to replace Ionic’s Angular directives with Meteor Blaze templates. It’s still in its early stages, but should be far enough along for most apps. If you’re interested in building mobile apps with Meteor, and agree that cross-platform UIs are important, I’d love some help on the project!