STC Usability SIG Newsletter
Usability Interface

How to Use FrontPage to Design a Corporate Intranet

by Bonnie Yelverton

Microsoft FrontPage is used extensively in small and medium-sized companies to create both Intranet and Internet Web sites, even though professional Web designers turn up their noses at it. This article reviews some of the factors that led to its widespread usage, and gives some pointers to non-professional webmistresses. (It is in fact often women who keep the Intranet updated.)

The actual updating of the Intranet is almost always in the hands of non-professional Web-responsible employees. Often each department has an Internet group, which discusses and reviews content, and one person responsible for actually updating the department’s section of the Intranet. This person is often an administrative assistant who has taken a class or two on using FrontPage.

I have been using FrontPage since it came out in the Beta Version in 1997, and currently use the 2000 edition, although I also have some experience with the 2002 version. I have used FrontPage to create Internet sites for small businesses and organizations, and worked within the confines of larger corporate Intranets using templates and style guides. I used DreamWeaver in a classroom situation in 2000, so I am somewhat familiar with its capabilities for advanced design projects.

Reasons for using FrontPage

Easy to Learn

Webmistresses find it very easy to learn how to use FrontPage, since they are already using other Microsoft products. Almost all formatting is done with the same tools as Microsoft Word, while more specific Web tools are accessed by right-clicking.

What You See Is What You Get

The program has an excellent WYSIWYG (What You See Is What You Get) working screen, with easy access to checking the page, both in preview form and in a browser. Furthermore, a user who has learned some HTML (Hypertext Markup Language) can easily access the page’s code. This is rarely needed, but may be used for troubleshooting by the company IT department.

Access Control

FrontPage enables easy division of the Intranet into separate departmental Webs, to which write-permission can be limited to the responsible webmistresses. Thus there is less chance that larger areas can be damaged.

Shared Borders

FrontPage pioneered the concept of Shared Borders, which is a great improvement on frames for navigation. Each page in a Web can have the same borders, a top border with company and corporate links, a side border with navigation and a bottom border with details like revision date and author.

Unlike frames, the borders scroll along with the page, so they cannot be seen if the page is long, but their advantage far exceeds this disadvantage. Shared borders are part of the page itself, so you can link directly to a page, which is displayed with the correct border.

Shared borders are a quick and easy way to give your pages a consistent look. The following are examples of ways to use shared borders:

• Add a page banner to a shared top border to ensure each page has a title.
• Add the company logo to a shared top border.
• Add a navigation bar to let site visitors get to the main pages in your web.
• Add a copyright notice in a shared bottom border.
• Add the date and time the web was last modified.
• Add an e-mail address for feedback, such as the webmistress’ address.

Navigation View

FrontPage also offers a navigation view, where the webmistress organizes page relationships in a flowchart that does not need to conform to file structure. This structure can be displayed automatically in navigation text or buttons on the shared borders.

Criticism of the HTML generated by FrontPage

Detractors of FrontPage often point out that it generates excessive HTML code, which makes pages take longer to load in a browser than they need to. This has not been my experience for pages produced entirely within FrontPage. However, if you save a Word document as an HTML file before importing it into FrontPage, the code is oppressive and difficult to work with. See the tips below for importing from Word.

Comparing FrontPage with other programs

Although professional Web programs such as Macromedia DreamWeaver, Adobe GoLive and Quark XPress 5.0 have facilities to produce exciting and creative Web sites, this is not necessary or even desirable in most Intranets. FrontPage is excellent for non-professionals who produce Intranets to provide information rather than sell a product, because FrontPage is easy to learn and makes it easy to update Intranet content.

Tips for using FrontPage

Templates and style sheets

• Before you design a template for an Intranet, visit other Web sites and note what works and what doesn’t, in particular:

• Which color combinations work. Make sure that there is distinct contrast between background and text colors. Blue text on a black background is very difficult to read!
• How much scrolling you can tolerate.
• How pictures enhance or distract from the text.
• How long it takes pages to load.
• How easy it is to find the information you are looking for.
• Use templates and a style sheet (CSS) to ensure a standard appearance throughout the site, and make it easier to change formatting in the future. Use the corporate logo on each page. If the company colors are appropriate, they can be used for headings and other decoration.
• Departments can be provided with certain details to distinguish their Web from the others. In one company, each department was assigned a different color to use for lines, buttons, table outlines, and such within its own Web.
• Use a legible font. Arial or another standard sans serif font (without leading lines) is best on screen. The size should be 10 or 12 points. Check on screens with various resolutions before deciding.
• Ensure navigation to all departments from each department’s Web. This can be on the top border, leaving the side borders to the individual departments.

Page layout

• Lay out the pages in two or three columns, depending on the width of the side border. Your readers will be much happier reading short lines on the screen.
• Use tables with invisible border lines to organize the material on the screen. FrontPage has a way of sliding things around on a page if they are not contained. Give the table the number of columns you want on your page. Make new tables for new sections, rather than one long table for the entire page: this gives you more flexibility.
• Divide your information where possible into screen-sized chunks, using navigational links to other sections.
• Make sure that your page does not need horizontal scrolling. Check the page on several screens of different size and resolution to be sure that it will fit on all of them. It is often easiest to assign the page width to 100%.

In most cases, do not use long pages that have to be scrolled forever, unless the page is a single document that the reader might want to print in its entirety.

Provide a table of contents at the top of long documents, linking to bookmarks in the text. You may want to provide navigation throughout the text.

Importing content

• To avoid excessive code, use the same names for styles in Word as in FrontPage. Copy the text directly on to the page rather than saving it as HTML. In the WYSIWYG view, you can then apply "default font" and "default size" to clean up some of the extra code.
• A better solution is to save the document as RTF. Images can be copied into the FrontPage file, but be careful of size (see the next tip).
• Prepare all images in another program before adding them to your FrontPage file. In general, save diagrams and drawings as GIF or PNG and photos as JPG, using as low resolution as possible while keeping a clear screen picture. They should be sized appropriately. I have found that 150x200 pixels is large enough. If you want your readers to have access to the picture in greater detail (for example if you expect the reader to print it), you can link to a larger picture, which takes longer to open.
• Importing tables usually creates problems. If a table is small, re-create it within FrontPage. A larger table can be copied (with all its code) directly into the Web page. I try to avoid the broad typical Web tables. Set cell spacing to 0, padding to about 5, and border to 0 (if it is to be invisible) or 1-2 and maybe colored (if not). It is possible to place tables within tables to get special effects.

Options for serving and accessing Intranets

In a very small company, the Intranet could be placed on a computer that is part of the regular network, giving employees read-only access to that particular file. You can create a shortcut with a special icon that they can place on their desktop or status bar.

In most companies, the Intranet is best placed on a separate server. The webmistresses make their initial updates in a draft version, which is then easily published to the server from FrontPage. This Intranet will be accessible as usual in a browser, although it is advisable to create a shortcut for the site, or to make the department homepage the employees’ standard start page to ensure that employees find and use it.