[support-michael]

Share your layout and auto-resize issues
The MobiOne team would like to hear about your layout and auto-resize challenges and quirks you have experienced while working with the Visual Designer and its widget layout model. Your feedback will be helpful as we consider how improvements for the widget layout experience.

Layout/Resize Background
Some background to establish a common understanding of the current layout and auto-resize model. The designer enables you to position widgets relative to a container, either the screen or a panel container. Each widget has auto-resize properties that define its position and size relative to its container. For example you define a widget’s width and height to be proportional to that of its container. You can also set it margin to be fixed or proportional to any or all edges of its container. This layout/resize strategy has been used by many higher end tools that predate MobiOne. A key consideration of this strategy is that you must create your UI design for the smallest target display screen and then set it to resize to fill the additional space of larger displays the app may run on.

What type of problems does this not address and are there scenarios that result in a buggy layout for different sizes?

[paulD]

Ok will do. I’m starting a new app in the next couple of weeks which i want to target both Iphone and Ipad. I’ll post my findings and any helpful tricks i come across.

My last couple of apps have been Ipad only and i have got the container concept working pretty well so the device can be rotated between portrait and landscape modes. It takes a lot of planning to get the layout right so its usable between screen modes. Coming from a Flash background its all new, as in Flash i used to just set a stage size and Bobs your uncle its the right size!

Images i find are a bit of a issue especially larger ones as they tend to get letterboxed as the screen is rotated and with no zoom facilty the image becomes to small to see. What would be more useful would be keeping the image same size and have a horizontal scroller.

Would it be possible maybe you could post a example of a mobi file for say a iphone and ipad layout it would help users understand the container concept? I did one for the same device in this thread but its a bit basic compered to your explanation.

http://www.genuitec.com/support-genuitec/viewtopic.php?f=8&t=5008

thanks

Paul

[MarkeithJohnson]

I would like to see a grid background added to the menu for each of the iOS and Android design screens. And I would like for it to match the snap alignment tool. Is this possible? If not could you post the grids as a download and I will add them myself. I am having the worst time looking for a grid layout system online to match the MobiOne Studio.

[paulD]

Hi Every one,

I’ve spent the last couple of days having a play with mobiones layout options to try and better understand how to lay out content for multi device applications. I have noticed that most IOS apps now seem to be one application for all IOS devices rather than having multiple versions for different screen sizes.

I would be very interested in opinions of more experienced developers on what their workflow is for cross application development and how xcode and other development tools do screen layouts. There has been many, many threads in the forum about designing for multiple screen sizes with a few different approaches to tackle the problem.

Having spent a bit of time working with the current layout tool set i now think i understand how the system works and its limitations. It works well for sorting out content between screen orientations on the same device and i have used it successfully on my last 3 IPAD apps. The key is to use panels as containers and group content together within panels to position the items on your device screen. I don’t particularly like the system I find it difficult to use as its different to anything i’ve used in the past, and seems to a lot of the time down to more luck than anything else to get the layout right. I am not sure the system works to be honest.

Where it falls over is on different devices. I can not get a layout to work between iphone and ipad no matter what I try with the autoresize options and panels. Please prove me wrong as i am no expert in mobile development! But i will throw my hands up and say I am beaten! I have spent hours, days changing resize options, i nearly had a volleyball called Wilson by the end like on castaway going insane going around in circles.

My next app i want to release for both ipad and iphone so i am looking at different options. Its quite a big app with a lot of visual content so i don’t really want to package 3 different layouts for every page in one exe as I’m not sure if it will effect performance? And the file size will be pretty big. I suppose i could release 2 versions for IPAD or IPHONE? Do you think that’s a way ahead? The best solution by far would be a responsive layout with one file in mobione. I think mobione is a fantastic product and really enjoy developing in it but this is a missing piece of the puzzle for me, whether it be my lack of understanding or the system i don’t know!

I’ve attached the mobifile and some screen shots of where i am at the moment. Please feel free to have a play and post your own layouts.

Thanks

Paul

Attachments:

You must be logged in to view attached files.

[paulD]

Here is the standard layout which works pretty well putting content in containers

See attachment layout.jpg

Attachments:

You must be logged in to view attached files.

[paulD]

Here is the iphone 4 layout
See attachment iphone-4.jpg

Attachments:

You must be logged in to view attached files.

[paulD]

See attachment iphone-5.jpg

Attachments:

You must be logged in to view attached files.

[paulD]

See attachment ipad.jpg

Attachments:

You must be logged in to view attached files.

[support-michael]

@paulD

From your comments and screenshot there are 2 issues you are grappling with:
1) the relative positioning between the top panel with the image panel and the bottom panel containing text
2) the bottom panel does not automatically expand or reduce its height based on layout of its text

Background
The auto-resize strategy works from the outer most container’s size (the display size) and then allocates space to its inner containers. This is why we recommend designing for the smallest display size and then adjusting the auto-resize properties of each container to resize as more space is available on large displays.

#1 – we recently added support to maintain image aspect ratios during resizing (the default). Now your layout decisions must account for an increase or decrease in whitespace around an image as its container resizes based on the image aspect ratio. This can impact the aesthetics of a layout if you need to position another object near the image and maintain a strict margin.
See attachment iphone-ipad-layout1.png
In the helicopter example I fixed the ht of the top container and filled it 100 percent with the image. This can be improved by editing the image to remove addition white-space around it edges. I also fixed the top margin of the bottom container to fit just under the top panel. The tradeoff of this layout is the image aspect ratio is dominated by its horizontal dimension and it will not resize on a larger display because I have fixed the panel’s ht.

#2 Tall panel, short text
This aesthetic issue arises when a panel containing text expands its width. If the text is configured to fill the panel it will reformat and consume less vertical space than on a narrower display (e.g., rotate device from landscape to portrait orientation). The panel will not reduce its size to shrink-wrap around its contents. In this case the shortened text widget.

There are 2 approaches: 1) make the panel transparent as shown in the bottom right example above or 2) programmatically compute the required text height and change the height of the panel (not show due to each UI is different)

Attachments:

You must be logged in to view attached files.

[paulD]

Thanks Wayne,

I think there is lots of issues i’m grappling with! Slowly getting my head around UI design for mobile, its really, really difficult to get right especially between tablets and phone.

But…. I do think the mobione system is difficult to understand. I think a much more comprehensive guide to mobiones UI strategy would be very helpful with some examples, as the issue of layouts pops up time and time again in the forum.

Thanks

Paul

[WiseMan]

In fact, sometimes while I still work on discovering the abilities of MobiOne, I start designing an interface in the iPhone platform. later I remember that i want it to be primarily dedicated to to Android devices so that layout gets devastated when switching.

Is that Okay?

[Unknown Author]

I think you know my opinion of auto-resize. I think it’s a tremendous liability which adds too much complexity to the design process. I choose to roll two different screen size versions into one compilation. It also allows me to present screen-specific content – such as larger maps for larger screens.

-1TC

[Author]

Posts