Support for various mobile devices (iOS, Android, phones, tablets). How to manage?

[brandyshea]

I’ll offer my opinion based on my experience with the Ionic framework.

@tamakisquare

I read somewhere that iOS and Android have different sets of design guidelines. Does that mean it’s better to have separate designs and thus separate code bases for each platform to avoid the risk of getting rejected by either one of the app stores? Of course, I would much prefer to have a single design and thus single code base across the platforms. To you Ionic experts who have had to face the same cross-platforms requirement, how do you manage it?

I think it’s always better to have one code base if possible. When it comes to rejecting apps, Android doesn’t have much of an approval process. You can follow this checklist for making sure your app will be fine on the Google Play store: http://developer.android.com/distribute/tools/launch-checklist.html. iOS will review your app but here is a list of the common reasons for it being rejected: App Review - App Store - Apple Developer

Basically you don’t want your mobile app to look like you took a website and copied it. It needs to look like a mobile app. You can use basic Ionic styling and submit both of them with the same exact look and it would get approved (as long as it looks like a mobile app). The first version of my app was submitted to both stores (Apple/Google Play) and the app looked identical on each platform. The app was approved/published without any issues for both stores.

In the current stable version of Ionic (Beta 14) there have been updates that make it easier to customize your app per platform. Personally, I use Sass in order to create a different look per platform. For example, you can use this in sass to customize the android menu background:

.platform-android {
  $menu-background: #555555;

  .menu {
    background-color: $menu-background !important;
   }
}

You can also write this using css if you want to avoid sass, but it’s less repetitive using sass.

There are also config changes that Ionic has made, such as the positions of the tabs. When viewed on an android device the tabs appear at the top, but on iOS they appear at the bottom. This can be changed, but it is the default. See the below post for more info.

How to acheive creating an Android and iOS-specific layout

So I read this post from the ionic guys from a week ago: http://ionicframework.com/blog/ionic-lab/ In the picture you can see that android and iOS have a very different look and feel, even though (I suppose) the layouts files are the same. How can I apply these look and feels to my app? [image]

@tamakisquare

As to supporting various screen sizes, is responsive design the most common approach? If not, does that mean separate designs for different screen sizes?

I believe using responsive design is the best approach. You can use media queries in order to achieve different styles based on screen size:

/* Larger than a phone */
@media (min-width: 567px) {
  map, div[map] {
    width: 95%;
    height: 425px;
  }
}

/* Small devices such as phone */
@media (max-width: 567px) {
  map, div[map] {
    width: 90%;
    height: 325px;
  }
}

Many of Ionic’s css components will take up the full width of the device, so it won’t look bad if you don’t use media queries, just sometimes more stretched. Ionic also has a responsive grid that you can use: http://ionicframework.com/docs/components/#grid-responsive

Hope that helps. Ionic is a fun framework to use.