Image for post
Image for post

Cross-platform UIs for mobile Meteor apps

Kingsley W
Jan 6, 2015 · 4 min read

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.

  • 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?

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.

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.

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.

Image for post
Image for post
Facebook app comparison
Image for post
Image for post
Twitter app comparison
Image for post
Image for post
Instagram app comparison
Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
Introducing Meteoric: Meteor+Ionic
Image for post
Image for post

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!

Space Camp

My journey learning Meteor.js

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store