Designing for Varied Screen Sizes & Orientations

Contents

1. Screen Orientation & Size

By default, MobiOne Design Center presents a vertical iPod display for designing mobile apps. However, you want to keep in mind other screen sizes and orientations for your design to be usable in both portrait and landscape orientations. When designin your application, you can work with your design in both portrait and landscape mode, and in various design form factors (i.e., iPod and iPad). There are two things you must consider when designing for landscape orientation and varying screen sizes: the auto-resize property and the panel widget.

Back to Contents

2. The Auto-Resize Property

Many of the design widgets provide an auto-resize property that enables you to specify how the widget’s position and size are adjusted when rendered in landscape orientation or on a different size display.

Using a navigation bar as an example, to have the bar expand across the page when viewed in landscape orientation, the width constraint should remain selected. This is the default for a navigation bar. However, if you deselect the width constraint, the navigation bar remains the width you specified in Design Center.

Back to Contents

3. The Panel Widget

The panel widget is a container for other widgets, and it has scroll properties that must be considered. To enable all content on a screen to resize in landscape orientation or various screen sizes, you must place design widgets inside a panel. When widgets are inside a panel, you can set auto-resize properties for each of them. Therefore, when designing with screen orientation and sizes in mind, begin by placing a panel on the screen, and then place other widgets inside its bounds.

Note: If your design includes a navigation bar and/or a toolbar, place those first, and then place the panel in between. Navigation and menu bars do not need to be inside a panel.

Two scroll properties affect the ability to view all content in landscape orientation.

• The Vertical Scrollbar checkbox must be selected to enable scrolling.
• For panels containing a large amount of text or other lengthy content, you must increase the Content Area Height so the scrollable area is large enough to include all content.

In the Visual Designer, a panel’s vertical scrollbar is visible only when the Vertical Scrollbar checkbox is selected and the panel is selected as shown below. All other times the scrollbar is invisible. Use the Increase and Decrease buttons above the panel or on the Properties panel to increase or decrease the panel’s Content Area Height property by 20 pixels per click. Drag the vertical scrollbar to adjust the panel’s viewable area up or down to verify that your content area height adjustment will allow all content to be visible.

Back to Contents

3.1 Widgets Within a Panel

By default, a panel's width constraint is set to auto-resize. But, some widgets you place in a panel do not have resizing enabled. For example, if you place a text widget in a panel without changing the auto-resize properties, the panel resizes in landscape orientation, but the text does not.

If you set the text widget's width constraint to proportional width (select the horizontal arrow), the text resizes along with the panel.

If you want the position of widgets to adjust relative to the screen orientation, disable the margin anchor of the auto-resize property. When the red margin anchor is selected, the widget stays in place regardless of the screen orientation. It has a fixed margin. If you deselect the margin anchor, the widget's position becomes relative to the screen width and height.

The following example illustrates the effects of the margin anchor and width constraint settings used on push button widgets. These widgets are contained in a panel. You can see each button’s size and position in the Visual Designer along with their auto-resize settings. The effects in landscape orientation appear on the right.

Back to Contents

4. Checking Your Design Layout

To check your design layout in different orientations and screen sizes, use the View menu or the respective tools on the toolbar. For toggling the orientation, click the Rotate icon on the toolbar, or select View>Rotate to Landscape/Vertical from the menu. To change the design form factor, click the arrow on the Change Device Type icon , and select the device you want to view. As an alternative, select View>Device from the menu, and select the device you want to view.

Back to Contents

5. Where Do I Learn More about MobiOne Studio?

The MobiOne online Learning Center site provides documents, tips, tutorials and videos to help answer your questions. Remember to check the Learning Center site for new and updated material.