Below are guidelines for designing a mobile-friendly UI for a compact screen:
-
Maximize the window size
Mobile applications are usually displayed in full screen, so as to efficiently use the valuable space of the mobile screen. The simplest way to make a PoweBuilder window display in full screen in various mobile devices is to set the WindowState of the window from the normal (default) to maximized. However, the controls in the window will remain in the same location and size. You will need to adjust the location and size of a control using the mobile UI resizing tools provided by PowerServer.
-
Change the window background to white
Normally the background of a mobile application is white or some other colors, but rarely gray. Therefore, it is recommended you change the background color of the PowerBuilder window from gray (default) to white or other mobile-friendly color.
-
Fill with appropriate number of controls
Consider carefully for what to include on the window, so as not to crowd the window or leave valuable space unused.
-
Use font size between 12 and 17 points
The default font size in PowerBuilder is 9 or 10 points which is way too small on a mobile screen. You'd better use a font size between 12 and 17 points.
-
Set the touchable target to 176 * 176 PBU (which is 44 * 44 points)
Fingers rather than mouse are used to operate the application on a mobile device. Therefore, it is important to design the target large enough to be easily touched by fingers. Touchable targets include buttons, text boxes, radio buttons, check boxes, list boxes, row header and footer, data rows, etc. Set the height of these targets to 44 points (or 32 points by minimum).
-
Take advantage of the mobile UI resizing tools provided by Appeon.
PowerServer provides two mobile UI resizing tools to automatically resize and move the controls to fit with the mobile screen: the Appeon Resize APIs (recommended) and the AEM | Mobile UI Resizing tool. The Appeon Resize APIs enable the controls (including those in the DataWindow object) within the user object, window, and tab to have the auto-resizing feature with only a few lines of script.
The AEM Mobile UI Resizing tool automatically scales the window as well as its controls and font according to the predefined rules for all different kinds of screen sizes. The AEM Mobile UI Resizing tool does not support resizing controls in DataWindow objects.
