Adapt Web sites to small screens with FrontPage add-ins

By Tiffany K. Edmonds

Applies to
Microsoft FrontPage® 2002
Microsoft FrontPage 2000

Browsing Web pages designed for large screen viewing can be cumbersome on mobile devices with small screens. This article describes how to use two new FrontPage add-ins to convert your existing Web content to a format that is more easily browsed with small form factors.

With the rapid growth of the small screen audience, the need for less cumbersome methods of browsing information on the Internet is growing too. You may have given some thought to making your own Web site more efficient for such mobile devices as personal digital assistants (PDAs), handheld computers, and smart phones, but haven't had the time to research the requirements for such an undertaking.

This article introduces two Microsoft FrontPage add-ins that automatically convert Web page content that was designed for desktop screen widths to suit the client device's screen size. They are:

These add-ins are ideal for most static Web pages and give FrontPage users a huge jump start for small screen versions of existing Web sites.

The add-ins will not alter the original code. You select the folder to store the output generated by the add-ins and the original Web content remains unaltered. After running the add-ins, you can make changes to the output to ensure optimal results.

Mobile WML Converter

The Mobile WML Converter add-in assists in adapting your Web content to the Wireless Markup Language (WML) format that is supported by many simple text-based mobile devices, creating a stripped-down text version of your Web site.

 Note    Multimedia, images, layout, scripting, Dynamic HTML, and style information are not supported in this format and may be left broken in the WML output. You may want to consider building a special static version of your Web site that includes only essential information. Use the add-in to convert your HTML to WML, and use the output folder to enhance the mobile user's experience.

Once you've installed the add-in, it is easy to use the Mobile WML Converter.

To use the Mobile WML Converter

  1. In the FrontPage Web site creation and management tool, open the Web site that you want to convert.
  2. On the Tools menu, click Mobile WML Converter.
  3. In the WML Converter dialog box, type the path to the folder in which you want to keep the exported WML pages (called decks) or click the Browse button to navigate to the proper folder.
  4. Click the Options button to make specific selections for the output.

The WML Converter dialog box displays options for output.

Options include:

  • Page splitting.    Choose how to break up information included in Web pages.

Include back link—Enables the user to move to a previous card (each WML deck, or page, is made up of a series of "cards").

Include return link—Enables the user to return to the index page.

Next link type—Select the Button or Hyperlink option for the Next link type.

  • Image handling.     Choose how to handle images encountered in Web pages.

Discard—This option ignores handling of images.

Discard, but flag—This option ignores handling of images but inserts a message in the WML file noting the presence of an image within the HTML file.

Replace with alt text—This option inserts the alternative text that is provided with the image into the WML file. This is a good option to choose if you know that you have written good alt text for accessibility purposes. This would not be a good option if you have written lengthy alt text in your images for search engine purposes.

  • Target device page size.     This setting defines the maximum page size for a WML card. You can assign a size in bytes so that the text best fits the target device. The default of 3072 bytes is recommended, adhering to Wireless Application Protocol (WAP) specifications.

For more information about the Mobile WML Converter, click the Help button.

  1. Click OK to return to the WML Converter dialog box.
  2. In the WML Converter dialog box, click OK to run the add-in and generate the WML deck. After conversion is complete, the output folder containing the generated WML deck will open in Microsoft Windows Explorer.

If you would like to view and edit the .wml cards in FrontPage 2002, you may need to configure the editor first.

To configure the editor

  1. On the Tools menu, click Options, and then click the Configure Editors tab.
  2. Click the Add button and set the following values:
    • In the File Type box, type wml.
    • In the Editor Name box, type FrontPage 2002.
    • Next to the Command box, click the Browse button and navigate to the Frontpg.exe file. (Most often, the default location for this file is C:\Program Files\Microsoft Office\Office10.)
  3. Click OK twice.

Now double-click a WML card to open it in FrontPage for editing.

A WAP device emulator such as the Microsoft Mobile Explorer 3.0 Emulator can be used to view the WML decks generated by the Mobile WML Converter. Once you have the emulator installed, you can view the WML deck in the emulator to get an idea of how your files will look in a WAP device.

To view your WML deck in the emulator

  1. On the File menu (of the emulator), click Open.
  2. Navigate to the output folder that holds your WML deck.
  3. Select a file to preview and click the Open button.

Mobile HTML Optimizer

The Microsoft Mobile HTML Optimizer add-in converts Web content to an HTML format that is optimized for small screen devices. After analyzing the structure of the Web page, the Mobile HTML Optimizer partitions the Web page content into logically related units that better fit the device's screen and creates a thumbnail representation (made up of a series of "panels") of the original Web page. The thumbnail representation provides a quick overview of the individual units that were created by the add-in, very much like a table of contents for each Web page.

Web page divided into panels that correspond to individual thumbnails.

The Microsoft Mobile HTML Optimizer add-in has broken up this page into a series of images, or panels, that are then color-coded to indicated how the panels (or images) have been "stacked" for easier browsing on small-screen devices. Each numbered panel corresponds to an individual panel that can be clicked on to show the information in more detail.

Once you've installed the Mobile HTML Optimizer add-in, it is easy to use.

To use the Mobile HTML Optimizer

  1. In FrontPage, open the Web site that you want to convert.
  2. On the Tools menu, click Optimize for Mobile HTML.
  3. In the Mobile HTML Optimizer dialog box, set your desired options:
    • Under Target Device, use the Type drop-down menu to select a type of mobile device. If you choose Other, you will be able to specify the width and height for the output specifications. (The Mobile HTML Optimizer comes with a ReadMe file that gives more detail on each of the device type options.)
    • Choose the Colorize index panels option to color-code each panel, which aids the mobile user to visually distinguish between panels. This option is the default when the target selected is a device that supports color.
    • Choose the Add access keys option to add the ability for smart phone users to access each panel link using the assigned key on the device's number pad.
    • In the Output Folder box, type the path to the folder where the generated output should be stored or click the Browse button to navigate to the proper folder. If you navigate to an existing folder you will see a confirm box asking if it is ok to overwrite the existing folder when you start the convert process.
  4. After choosing your options, click the Convert button to begin the HTML optimization process. You will see a list of files being optimized on the left, with the current file being processed on the right, and a progress bar at the bottom.

The HTML Optimizer window, with folders, page being processed, and progress bar.

 Note    Some content—such as styles, formatting, frames, dynamic content (for example, Microsoft JScript® and Microsoft Visual Basic® Scripting Edition client scripts), interactive content (forms and input controls), and media (video and audio)—may be broken during the conversion process. You may want to consider building a special static version of your Web site that includes only essential information. Use the add-in to optimize your HTML, and use the output folder to enhance the mobile user's experience.

When the Mobile HTML Optimizer has completed the process of optimizing the Web pages, the output folder with the generated HTML files will open in Windows Explorer.

The Mobile HTML Optimizer output may be viewed in a browser and edited with FrontPage. You also may wish to view the output with an emulator (provided in the software development kit) for one or more of the following devices:

  • Pocket PC 2002
  • Smartphone 2002
  • Handheld PC 3.0

Conclusion

FrontPage users with an interest in converting existing Web content or developing Web content geared toward small screen mobile browsers now have tools to make the task much less daunting. The Mobile WML Converter and Mobile HTML Optimizer add-ins dramatically reduce the amount of time that it would take to manually edit each Web page for various small screen browsers and significantly reduce the time that a Web site author would have to spend learning about mobile browser compatibility.