Cross-platform UIs for mobile Meteor apps

Kingsley W
Jan 6, 2015 · 4 min read

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

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.

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.

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:

  • 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
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
Introducing Meteoric: Meteor+Ionic

Space Camp

My journey learning Meteor.js

    Kingsley W

    Written by

    I Design and Build React and React Native Apps at @BeDifferential.

    Space Camp

    My journey learning Meteor.js