Design interface for mobile platform

[kolia]

Hello,
Are there any guidelines to design interface for the mobile world? For instance how to get the interface automatically centered when it is launched, where to put the code in order to have the code not directly linked to the graphical interface and make it non redundant. Do we need to design a unique interface for each type of mobile Platform. How to get the interface nicely resized depending on screen size and screen resolution? etc.
Thank you

[quailcreek]

LC will automatically locate the elements of your interface to where you have them on the screen as well as setting the width ratio. This means that if a control is centered on the screen, LC will keep it in the center when the display width increases. If the control runs across the full display, like with a nav or toolbar, LC will do that too. You can see this when you run your app in the simm. Just change the Hardware>device to something larger. The only part you have to control is to allow for the different heights of the Phone displays. This means you can have one design for all iPhones and Android. You'll probably need a separate one for iPad. The placement of code that adjusts the interface for display heights will vary. They will probably want to be in either the stack script or the card script where the control lives. HTH

[Simon]

Hi Nicolas,
I think to be more specific to your question check out "fullscreenmode" in the Dictionary.

Simon

[kolia]

Thank you to both Simon and quailcreeck. There information will certainly help me to better design such app's

[kolia]

The showAll option is really nice

[SparkOut]

Here's a basic lesson, if you haven't already seen it http://lessons.runrev.com/m/4069/l/1564 ... ll-devices

Take a look at the rest of the lessons too

[kolia]

Thanks for that, I had the chance to have a look already.
I have an architecture question. My app has to run on different device types, possibly 3 with very different screen sizes: regular PC, tablet and phone.
I understand that for each of them I have to design 3 different cards and to put each them in a substack in order to size the each card according to physical screen dimensions and resolution. Is this the best approach?
Then come the question regarding where to put the code in order to factor it. Shall I put it in the main stack?
Edit : putting all the code in the mainstack leads to put the code for all mouseUp events (for instance ), which I don't find convenient because it makes the code not very much readable.
Are there better way of organizing the cards and the code?
Thank you

[jmburnod]

Hi Kolia,

Edit : putting all the code in the mainstack leads to put the code for all mouseUp events (for instance ), which I don't find convenient because it makes the code not very much readable.
Are there better way of organizing the cards and the code?

One or more is an old question.
I use this method

--script of btn "bMyBtn"

Code: Select all

on mouseup
debMyBtnMU
end mouseup

--script of stack

Code: Select all

on debMyBtnMU
doSomething
end debMyBtnMU

And the same for Mousedown = MD, Mouserelease = "MR" etc..

Best regards
Jean-Marc

[kolia]

Thanks Jean-Marc, I was indeed thinking of this method. But I was wondering whether there are other technics.
Nicolas

[jacque]

The fullscreenmode property was implemented so you don't have to design different layouts for every platform. I've only done that once a long time ago and script maintenance was a nightmare. I'd really advise against going that route.

Properly designed, you can use the same stack for every device or desktop. Try the different fullscreenmode options to see which one works best for your layout.

[Simon]

Hi Nicolas,

I understand that for each of them I have to design 3 different cards

I think this is from "old" posts?
With resolution independence we don't have to make separate stacks.
See fullScreenMode in the Dictionary.

Or I have misunderstood this thread

Simon

[quailcreek]

I do my iPhone layout on iPhone 4, 320x480. I have tried in the past and I just went through the exercise again of trying all the fullScreenMode settings. None of them provide a desirable result when I change the device to iPhone 5 or 6 in the simm. I would really like someone to prove me wrong. I works well for iPad but iPhone... not so much.

[jacque]

We discussed this recently on the mailing list:
http://runtime-revolution.278305.n4.nab ... 97228.html

Scroll down almost to the end of the page, where Colin provides links on how the different fullscreenmode options work. Basically what you want to do is leave some margin around all the working parts of your stack so that different screen ratios won't affect them. It does take some experimentation but once you hit the right combination it works very well.

[quailcreek]

Hi Jacqueline,
Great information as usual. I guess I'm still missing something. My app is a data stack with very few graphics. While exactFit gives the best result, it still just stretches everything so it's distorted vertically, even the text. It's a pretty standard app. Grouped navBar and grouped toolBar with controls in between. Not sure what margins I need to be concerned with. Are there any other settings that need to be set beside fullScreenMode? I'd really like to get this to work so I can do an Android version.

[jacque]

Can you post a screenshot of your layout so we can see what you're dealing with?