Creating web pages for mobile devices

You can create interactive web pages that are optimized for mobile devices.

Before you begin

Ensure that you complete the following tasks before you create a web page for a mobile device in Rich Page Editor:
  1. Create a project.
  2. Set the target device for your project.
  3. Set Rich Page Editor as the default web page editor.

Procedure

  1. Click File > New > Web Page to open the New Web Page wizard.
  2. Specify a file name and choose one of the following mobile templates for the new web page:
    Dojo Mobile HTML template
    Sets up the web page for Dojo. Generates content into the web page to prepare the web page for use with Dojo libraries. This content can include:
    • JavaScript and CSS includes.
    • Basic widgets that are typically required for Dojo Mobile web pages, such as a mobile View widget.
    jQuery Mobile HTML template
    Sets up the web page for jQuery. Generates content into the web page to prepare the web page for use with its libraries. This content can include:
    • JavaScript and CSS includes.
    • Basic widgets that are typically required for jQuery Mobile web pages, such as a Page widget.
  3. Optional: To open the New Web Page Options page and add more options to your mobile web page, click Options.
    Option Description
    Set the document type declaration to HTML 5 and cache the page
    1. From the list of options, click Document Markup.
    2. From the Document Type list, select HTML 5 to show more options.
    3. Specify the icon that is used by mobile devices when users add bookmarks. To select an icon from your workspace, click Browse next to the File href field.
    4. Enable browser application caching. In the Manifest Section field, select CACHE and then specify a manifest file. For example, WebContent/META-INF/cache.mf.

      HTML 5 application caching ensures performance and availability when the mobile device is offline. For more information about cache manifest files, see the latest HTML5 specification at: http://dev.w3.org/html5/spec, and search for "cache manifest".

    Set the device detection and stylesheet options
    1. From the list of options, click Mobile Web Page.
    2. Select one of the following options:
      Detect device
      The web page detects the device that shows the content and loads the appropriate CSS by including the script dojox/mobile/deviceTheme.js.
      Select dojox.mobile stylesheet
      The selected style sheet is loaded by using the <link> tag. You can select one of the following style sheets:
      • blackberry.css
      • android.css
      • ipad.css
      • iphone.css
      No CSS
      Use a style sheet other than the ones that are available when you select the dojox.mobile style sheet option. When you specify the No CSS option, you can select Stylesheets from the list of options and add the style sheets that you want to use.
  4. Click Finish. Your web page opens in Rich Page Editor.
Icon that indicates the type of topic Task topic
Timestamp icon Last updated: July 17, 2017 21:58

File name: trpecrtmobilepgwl.html