Hi all, I am new to the Ionic Framework. As a matter of fact, I have never touched any mobile development work before. My experience is primarily in the web development space, and AngularJS is my arsenal.
Given my skill set and experience, Ionic seems to be a logical choice to develop a mobile app, which completely duplicates the features that my web app offers. But there’s one thing that I couldn’t wrap my head around, for which I hope that I could get some help from this community.
What I want to understand is on how to manage the design and the code base of my Ionic app if it needs to support various mobile devices (iOS, Android, phones, tablets). Here are my questions:
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?
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’ll offer my opinion based on my experience with the Ionic framework.
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:
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.
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
Thanks so much for sharing your experience and useful tips, @brandyshea. Much appreciated.
I used SASS and media queries in developing my web app, so I am somewhat familiar with them. I would say that I am now much more confident to dive into Ionic.
I have two follow-up questions, if you don’t mind.
Do I need separate builds (with the same code base) for publishing for iPhone and iPad? How about Android phones and Android tablets?
For web app design, I usually go with creating wireframes and prototypes. I plan to do the same for the mobile app. Do you think it’s a good idea to have separate sets of wireframes and prototypes for phone screens and tablet screens (with responsive design)? How did you manage yours?
No, you can create one .ipa (iOS) and one .apk (Android) and the user will be able to download it from a phone or tablet. The only requirement is that when you submit the app to iTunes connect you must include screenshots of your app on an iPad. On android they ask you to upload tablet screenshots but it isn’t required to publish the app.
The latest version of my app doesn’t have much responsive design, so it mostly looks stretched like I said earlier. I plan on modifying that in my next version. But yes, I think it would be a good idea to separate the designs. I had somewhat of a page to follow when creating mine, so I never made wireframes/prototypes. It probably would be a good idea though.
[skip this paragraph… The spam post was deleted] I really hate this kind of advertisements. Seriously, read the question again… “manage several mobile devices” doesn’t mean how to transfer/sync apps, songs, videos, etc.
To @OP, in my case, the iPad and tablet versions where so different that I had to use multiple controllers/views for each, and set up the routing in each version using devicejs. This way there was only one apk/ipa/xap, and the app would detect the kind of device at runtime, so I could reuse most part of the code. Angular directives and controller inheritance (stack overflow) helped me a lot for that.
@voliva, thanks for sharing your own experience, especially you took an approach that is different from the aforementioned. I can see the benefits of taking down that route when you have phone and tablet versions that are substantially different from each other. Good to learn that has worked out for you.
xap? I thought Ionic doesn’t have the support for Windows phones yet, no?
Couldn’t agree with you more on the spam reply. That’s why I didn’t bother to waste my time on it
@tamakisquare Ionic doesn’t officially support Windows 8 / Windows Phone, but cordova does, so you can still export your app for Windows.
I haven’t had too much trouble, since new versions of windows use IE10-11, that they’re not that bad. Only some stupid security constraints for accessing external services like google maps (can’t remember too much, but I had to put some part of my app inside something similar to an iframe that called google services from there… weird). That’s not ionic anyway, so you should be OK.
I plan on modifying that in my next version. But yes, I think it would be a good idea to separate the designs. I had somewhat of a page to follow when creating mine, so I never made wireframes/prototypes. It probably would be a good idea though. 
