Best Practice for developing for screen sizes across multiple platforms

You must Login before you can answer or comment on any questions.

Hi, brand new to Appcelerator and looking at developing a basic app to be deployed on iOS, Android and Blackberry OS - however, I'm wondering how best to handle the various screen sizes and densities. Is this likely to be a complex issue and are there any best practices for beginning the development phase with different screen sizes in mind? Many thanks for any help.

2 Answers

— answered 12 months ago by Ivan Škugor
answer permalink
2 Comments
  • The guide that Ivan linked to is a great start at learning the mechanics of handling screen sizes in your app. But you should also work with a good UX designer to help you tackle the larger question: how do you design your app for varying screen sizes?

    By that, I mean:

    • are there use-case differences between a handset and tablet version of your app? (iPad use tends to be 'lean back' vs. the iPhone's on-the-go use models)
    • should you have the same UX for a handset & tablet?
    • how do you best take advantage of the extra real estate of a tablet? Just cramming more stuff on the screen isn't likely to make a compelling app experience.

    Read Apple's Human Interface Guidelines and Google's Android Design Guide, check out blogs like http://www.androiduipatterns.com/ or Ask UX Jess, and explore apps you have on your devices to see how others handle the situation. Make sure you know what you're building before you start trying to build it.

    — commented 12 months ago by Theo LeSieg

  • For now I am just porting an app from iOS to Android (Originally appcelerator), Generally if I do iPhone and iPad and have seperate app files which call common functions and behaviours and the UI will be different but the underlying functionailty the same.

    For me it's just the HVGA emulator would not fit the entire app on screen even though I am using dps. All the other emulators seem to scale fine. I have since adjusted a label to get it working in a way that I would expect and it seems to fix the issue.

    I think going forward I defintley will look at the above link and work out the best way to have it working on multiple platforms. I am mereley just in an expermentaion phase and want to avoid in future having 2 apps for 2 platforms.

    — commented 12 months ago by Steve Clark

I don't know if this is the best way, but here how I do it:

I create an directory with all the screen resolution that people may use in my system, plus a folder named default.

Then, to load my window I use a script that depending of the width & the height of the screen will decide what folder I should load, and if I can't find the good screen, I load default.

In each of them, I try to separe every part of the UI in separate folder. So the main file, will be the same (and will hold the logic), but the UI part will be in separated folder, so it will look differently on each screen.

At first, I tried using only % to set my height and width, but rapidly I figured that is was awefull, so now I create multiple file... a little bit like reactive css

— answered 12 months ago by Etienne V. Labelle
answer permalink
3 Comments
  • Dear Friend,

    Loading specific image folder for respective resolution is good practice. But will u please tell me, how you are managing fonts size for various resolutions.

    Thanks and Regards Srini...

    — commented 12 months ago by Srinivas Murthy

  • Hey Srini, I addressed by creating a mathematical function to calculate appropriate font size for the screen - this basically takes a line (y=mx+b) formula and calculates font size based on platform height. Hope this helps!

    — commented 11 months ago by Amy H

  • Hi Amy, can you please share some piece of code.so that we can understand the same code base. thanks in advance..

    — commented 11 months ago by vinod varghese

Your Answer

Think you can help? Login to answer this question!