Mobile Design for HTML Pages

How to:

You can create HTML pages that are formatted specifically to be used on a mobile phone. When an HTML page is formatted for a mobile phone, components and controls are presented differently so that they can be used in conjunction with touch-screen technology.

When an HTML page is converted and used on a mobile phone, it will have one home page and multiple output pages depending on how many components you have. You can set which page you want as your home screen by using the HTML canvas shortcut menu on that particular page and clicking Use current page as home page.

When viewed on a mobile phone, each frame of output becomes its own screen. For example, if you have a report and chart on a mobile-enabled HTML page, these will both be on their own separate screen when viewed on a mobile phone. The more output frames you have, the more screens your HTML page will have on a mobile phone. The order of these outputs, when used on a mobile phone, is determined by the way they are ordered in the Tasks section of the Tasks & Animations panel.

All single-select controls become drop-down boxes, when viewed on a mobile phone. All multi-select controls become listboxes, when viewed on a mobile phone. This allows users the ability to select options using a touch-screen. Textbox controls, map controls, tree controls, slider controls, and calendar controls do not change when converted to mobile layout.

If you are using multiple frames in your HTML page, when you enable mobile layout, these forms will be consolidated to one form.

Note: JQuery mobile controls do not display when designing your mobile HTML page but will display when your mobile HTML page is run, on a mobile phone.

While in the HTML canvas, you can preview how your HTML page will look on a mobile phone. To do this, ensure that the Enable mobile property is set to Yes in the Properties panel, and then click Show Mobile Layout using the HTML canvas shortcut menu. To return to the desktop view, use the HTML canvas shortcut menu and click Back to desktop.

You must save your HTML page in order to run the page in mobile layout.

Note: If the HTML runtime cannot determine if mobile design or desktop design should be used, your device will display the message: Mobile look? If you select OK, mobile design is used. If you click Cancel, desktop design will be used.


Top of page

x
Procedure: How to Enable Mobile Design for Your HTML Page in the HTML/Document Wizard

To enable mobile layout in your HTML page:

  1. On the Home tab, in the Content group, click HTML/Document.

    You can also create a new HTML page from the Application menu or by using the shortcut menu in the Environments tree panel, when on a valid folder.

    The HTML/Document wizard opens.

  2. Select a valid path for your HTML page and click Next.

    The Themes and Settings window of the HTML/Document wizard opens.

  3. In the Mobile Design section, select Enable.

    Selecting this option automatically sets the Enable mobile.. property, in the Properties panel, to Yes.

  4. Click Finish.

    Your HTML page has the Enable mobile.. property set to Yes and you can begin developing your HTML page for mobile use. You must save your mobile HTML page before you run it in order to view it in the mobile layout preview.


Top of page

x
Procedure: How to Enable Mobile Design for Your HTML Page Using the Properties Panel

To enable mobile layout in your HTML page, using the Properties panel:

  1. Create a new HTML page.

    The HTML canvas opens.

  2. Select the Properties panel.
  3. Change the Enable mobile.. property from No to Yes. Your HTML page now has mobile layout enabled. You can begin developing your HTML page for mobile use. You must save your mobile HTML page before you run it in order to view it in the mobile layout preview.

WebFOCUS