Testing with Different Browsers

After reading the tale of the <marquee> tag (Section 12.1.3.2), you probably understand why different browsers display your pages in slightly (and sometimes not-so-slightly) different ways. As you've read, a lot of effects that FrontPage creates show up only in Microsoft's Internet Explorer. And it's not only browser variations that can throw cold water on your best design intentions. How your visitors have set the resolution on their monitors can also change your page's look. Resolution is the number of pixels (dots of color) that make up a computer screen. For example, an 800 x 600 pixel screen displays 800 dots across each of its 600 horizontal lines. Different settings can make a Web page expand beyond the sides of a browser window (forcing viewers to scroll) or the page can end up scrunched on the left side, leaving a big empty space on the right.

The best way to prepare your pages for the wide variety of browsers in which they're inevitably going to appear is to preview your pages in each one, as you're creating your site. By using a "check as you go" approach, you'll be able to make fixes as you develop your site.

Since not everyone has fleets of computers at their disposal (to help realistically mimic all the conditions your pages are going to encounter), FrontPage helps you out with a variety of testing tools, which are covered in the following pages.

12.4.1. Preview in Browser

From within FrontPage, you can launch any browser that's loaded on your PC so that you can see what your Web pages will look like in each of these browsers. To use this tool, select File Preview in Browser and pick the browser you want. Or you can click the arrow to the right of the Preview in Browser button on the Standard toolbar (Figure 12-7). (When you install FrontPage, the program automatically adds any browsers it finds on your system to this list. If you install a browser later, you'll need to add it yourself, which you'll learn how to do in a moment.)

Figure 12-7. The Preview in Browser menu features all the browsers loaded on your system. FrontPage gives you screen resolution choices for each browser it added during installation. If you don't see a resolution you want for a particular browser, select "More browsers" and choose the browser from the list that appears. If you select Preview in Multiple Browsers, FrontPage opens the page in all the browsers on your PC.

Preview in Browser also lets you pick from three different screen resolutions to use when previewing your page: 640 x 480, 800 x 600, and 1024 x 768. A page that works on your 1024 x 768 screen may not work on a monitor set to 640 x 480 (see Figure 12-8). This enhanced preview capability means you don't need to change the settings on your computer or get access to a different monitor each time you want to replicate real-world browsing conditions.

Figure 12-8. This Web page clearly works best in a 1024 x 768 pixel monitor (top). If you came along with a 640 x 480 pixel resolution and opened the page (bottom), you'd see only a portion of it. Most Web authors create pages for an 800 x 600 pixel screen. However, as hardware technology advances and Web surfers splurge on increasingly larger monitors, pages targeting1024 x 768 pixel displays are more and more common.

12.4.1.1 Adding a browser

To add a new browser to the list, first install it on your computer. Then select Edit Browser List from the Preview in Browser menu. Click Add and then browse to the file that launches the program (like firefox.exe, for example).

12.4.2. Setting Authoring Options

Imagine that you're creating a site that provides emotional support to those who can't bring themselves to update their software. So you know from the start that your site's likely visitors are people who have very old browsers. How can you keep yourself from inadvertently including recent Web advancements like rollover buttons?

FrontPage can help you save yourself from yourself. The program lets you limit your own actions, by making certain features off-limits to you. The only real reason to limit your options here is if you know your visitors' browsers are all very old or only Netscape, for instance. You can set these restrictions in FrontPage's Authoring tab. To check it out, select Tools Page Options and click the Authoring tab (see Figure 12-9).

Figure 12-9. If you turn off a checkbox here in FrontPage's Authoring tab, the program grays out the menu choices you've selected, limiting which features you can add to your pages.

12.4.2.1 Microsoft software-related authoring settings

The top half of the Authoring tab includes options for excluding or allowing features that rely upon Microsoft server software that you may or may not have available to you. If you want to avoid using Microsoft proprietary features, you'll want to take a close look at these options (details on most of them are covered in Tutorial 13).

12.4.2.2 Browser settings

The bottom half of the Authoring tab lets you set target browser options, which is how you tell FrontPage what browsers you expect your visitors to be using. You probably wouldn't want to, but conceivably, you could do something like limit yourself to designing pages that work in the elderly Internet Explorer 3.0. Once you tell FrontPage that this is your model browser, the program helps you design a site for that environment. For instance, if you insert an interactive button, the program adds the button to the page, but leaves off the special rollover effects.

Your options in the Browser section include:

• Browsers. This list of browsers is short and, unfortunately, you can't add any. You won't find Safari, Opera, or Mozilla here. All you get are variations on Internet Explorer and Netscape. You can select one or both. But, actually, your best bet here is to choose Custom. Then you're free to activate or exclude the feature checkboxes listed below the Browser pull-down menu. More on these options in a moment.

• Browser versions. Select the latest version of the browser(s) for which you want to design. Again, unless you have a very specific audience, select Custom. Custom gives you added flexibility in the choices that follow.

  ---

  Note: If FrontPage has grayed out any feature checkboxes here, it's because the option that's active in the FrontPage technologies drop-down list, at the top of the Authoring tab, requires them (like Active X controls and JavaScript). Also, you can turn on the CSS 2.0 checkbox only if the CSS 1.0 checkbox is on.

  ---

• Active X controls are small program components (parts), which a browser can automatically download and run. Only Internet Explorer recognizes these controls. A lot of sites and computers block or limit these controls for security reasons. Unless you've designed your Web site to use an Active X control, you can turn off this checkbox. (If FrontPage has grayed out this box, it's because the SharePoint Services checkbox is turned on at the top of this dialog box. Many SharePoint site features require ActiveX controls, so FrontPage turns on this checkbox and then blocks your access to it.)

• VBScript (short for Visual Basic Scripting Edition) is a Microsoft programming language that can give commands to browsers. If you want to use a feature like the Database Interface Wizard (explained in Tutorial 17), you'll need to turn on this checkbox. Only Internet Explorer supports VBScript.

• JavaScript/Jscript. Jscript is just Microsoft's version of JavaScript. If you turn off this checkbox, you won't be able to incorporate any JavaScript features (see Tutorial 9). Leave this on unless you know for sure you don't want to include JavaScript. (If FrontPage has grayed out this box, it's because the SharePoint Services checkbox is turned on at the top of this dialog box. Some SharePoint site features need JavaScript to work, so FrontPage turns on this checkbox and then blocks your access to it.)

• Java applets. The only reason to leave this on is if your site includes Java applets or you're still using FrontPage's Banner Ad Manager. Microsoft is phasing out Banner Ad Manager because Windows no longer includes the Java Virtual Machine, which is required to view Java Applets. (See the "Banner Ad Manager Is Gone" box in Tutorial 11 on Section 11.3.1.)

• Frames. If you turn off this checkbox, FrontPage grays out all menu options that help you create framed pages (see Tutorial 6).

• Active Server Pages are Web pages that can interact with data. If you're working with data, you'd better turn this box on. Even if you never plan to work with data, you may as well leave this checkbox on to keep your options open. You never know how your site may grow.

• CSS 1.0 (formatting). Turning on this checkbox lets you add the Cascading Style Sheets and embedded styles that you read about in Tutorial 7.

• CSS 2.0 (positioning). Only recent browsers can display CSS 2.0. This is the technology that enables you to create layers (Tutorial 8). Unless you're sure that you have lots of older browsers out there, turn on this checkbox. If it's off, FrontPage grays out layer commands.

• PNG graphics. As you read in Tutorial 4, PNG graphic files are the new gifs. Problem isa lot of browsers out there didn't get the word yet. Turn off this checkbox, so you don't inadvertently include one in your site.

• Schema version controls which version of HTML FrontPage will churn out for you. Each version has its own syntax and rules. Choosing Internet Explorer 5.0 usually makes the most sense here.

Settings you make on the Authoring tab won't affect any pages you've already created. FrontPage imposes the new restrictions on new pages only. To find old pages that break the new rules, run a browser compatibility check (see the next section).

12.4.2.3 Browser settings: the bottom line

So what should you do? If you select Custom in the Browser drop-down menu and enable all the checkboxes underneath it (except Active X, Java Applets, and PNG graphics), you'll be able to use all the ingredients to satisfy both your creativity and most viewers who are using recent browsers. Unless you know most of your audience is using an old or very particular browser, you'll probably want to give yourself the freedom to include all these features. In other words, when in doubt, err on the side of inclusion. As always, preview your pages (often) and judge the effect for yourself.

12.4.3. Checking Browser Compatibility

Say you're creating a family reunion site and you know that all your cousins are avid Netscape Navigator fans. Of course, you'll want to preview all your pages in Netscape to see for yourself how things look. You have the latest version, so why not? But will things look the same to Aunt Minnie, who hasn't updated her computer (or browser) in a few years?

FrontPage's Browser Compatibility report runs through the code on your pages and spits out a list of features that won't work in certain browsers. It's especially useful when you're wondering how your pages will display in older browsers that you probably can't get a hold of anymore. The idea is, you can figure out who'll be able to see what.

Sounds like a real help, but in reality, the value of this report is limited. One problem is that FrontPage doesn't give you many browser choices. Also, the report doesn't actually test your pages in these browsers, it just compares your site's code with code that these browsers officially recognize. As a result, the report may show problems that aren't that serious and at the same time ignore issues that you might find important. For instance, running this check won't tell you that a table you've designed to be invisible actually shows up in all its boxy, ugly glory in Netscape. No, this report goes totally by the book. All it does is spit out tags and attributes that aren't part of a browser's repertoire. Again, there's no substitute for tracking down browsers and installing them on your system to test pages properly. A great resource for finding even older browsers is http://browsers.evolt.org/.

To run a compatibility report:

Figure 12-10. This browser compatibility report lists problems that a collection of pages would encounter when viewed in an old version of Internet Explorer. The list shows the page and line the problem appears on. If you want, convert this list into a Web page by clicking Generate HTML report. FrontPage creates a Web page listing the problems organized by page. Checkboxes next to each issue let you track your corrections manually.