Understanding Framed Websites

Framed websites are generally easy to spot; chances are you've used one and might not have known it. A framed website generally consists of numerous parts, starting with the frameset. As you've seen up to this point, browsers typically open one page at a time. When a site uses frames, this concept is no different. However, rather than opening numerous files at one time as you might think occurs with framed sites, a browser generally opens a frameset. The frameset is usually split into numerous frames that make up the content of the site in the frameset. Figure 8.1 shows a framed website in use.

Figure 8.1. The MSDN Library website is a classic example of a framed website.

Microsoft's MSDN Library website is a good example of a framed website. In Figure 8.1, you can see that the page is split into three frames, each making up important parts of the frameset. The frame near the top contains important top-level navigation items that relate directly to Microsoft and the major sections in the overall site. The frame on the left makes up the navigational structure for the MSDN Library specifically. Finally, the frame on the right makes up the content that appears when a link in the navigational tree on the left is clicked. Navigation items in the top and left frames always remain static, don't change, and don't move, even when content in the right frame is scrolled up and down or left to right. Even better, the navigational structure represented in the top and left frames loads once and only once. Only the content in the right frame is loaded every time a navigation item in the left tree is clicked, essentially improving load time and the overall user experience. Furthermore, the frame that makes up the navigation menu on the left can be manually resized by the user. As shown in Figure 8.2, resizing the frame allows for easier reading of the navigation menu.

Figure 8.2. You can resize the frame to make the navigation tree easier to read.

Although this example represents a classic and advantageous use of a framed website, it doesn't go without its disadvantages. Let's dissect the advantages and disadvantages next.

The Advantages of Frames

The advantages of setting up a website that uses frames can be profound. As you can see from the MSDN Library website, all elements that are constant throughout the web experience, such as the navigation menu at the top and left, do not have to be reloaded every time a link is clicked. This navigation structure exposes advantages for both author and user: From the author's viewpoint, if a navigation bar has to be changed (perhaps to add or remove a menu item) only one document has to be amended. If the navigation bars were integrated into each page (as would be likely if the page had been developed using tables), then every site document would have to be changed. From a user's standpoint, framed navigation menus result in much "lighter" documents compared to pages with static navigation menus because the pages don't contain the excessive HTML required to set up the table layouts. This can also be advantageous for users with dial-up modems, which by latest statistics, still average about 50% of Internet users. By having the navigation menu reside in a separate frame and new content appearing in a larger, autonomous frame, the site can appear more complete and loads quicker per navigation click. Accessing new documents and swapping them out of the same location saves download time and offers an easier navigation experience for the web user.

In addition to the benefits presented thus far, the site is somewhat configurable. As you saw in Figure 8.2, the navigation frame can be resized by the user. Again, this is advantageous to both the developer and the user. From a developer's standpoint, you don't have to worry about limiting the size of your links to fit in the frame. From a user's standpoint, if the content in the navigation frame does exceed the size of the frame, you merely resize the border to expand the viewable area of that frame.

Although the advantages presented are enough to convince anyone to want to use frames, there are numerous disadvantages. In fact, you'll see that the disadvantages far overshadow the few advantages we've looked at.

The Disadvantages of Frames

Along with the advantages frames can provide, they offer numerous disadvantages to the user and several challenges for the web designer. The most important of these challenges is search engine placement. Search engines use web crawlers and robots to index pages on websites. Crawlers are programs that wander from site to site, gathering information on web pages and returning it to the search engine for indexing. These programs often don't index frameset documents because framesets contain no content, only instructions to create frames, so there's little or nothing to index. Robots, however, do index documents with content, and when links to these appear in search results, the search-engine user is taken directly to the page, bypassing the frameset and ultimately the content (including the navigation aids) that was meant to be seen.

Another disadvantage is bookmarks. Browsers bookmark only the frameset document on a framed website, not the pages showing in the frames. If you navigate through the MSDN Library site and try to bookmark particular pages, the bookmark points only to the relevant frameset and not to the page itself, so you'll never be able to bookmark the page you wanted unless you open it in a fresh browser window using the right-click context menu. To fix this problem, the MSDN website provides a link within the page itself. The Add to Favorites link shown in Figure 8.3 points to JavaScript code that allows the user to bookmark the frameset and the selected page.

Figure 8.3. Sites get around the bookmark issue in frames by creating their own link so that users can manually add the bookmark to the their favorites.

Yet another disadvantage when working with framed websites is printing. This issue stems from the same problem exposed by bookmarks in that, when you go to print a page, the browser has no idea what page within the frameset you are referring to. I've been guilty of choosing the File, Print option from the browser's menu bar. Ultimately, what prints out is a blank page that represents the frameset and not the intended page. To be sure of printing the document contained within a frame, you really need to open the document in a new browser window, away from the frameset, and print from there. From a developer's standpoint, you can add a Print This Page link that makes use of JavaScript code to print out the page.

Finally, framed websites present problems for the visually impaired. Traditional screen readers lack the ability to decipher the frames in a frameset and end up locking a significant number of users out of the website unless a "noframes" alternative is made available (discussed later in the chapter). Modern screen readers such as JAWS are more sophisticated and can handle frames. However, you shouldn't assume that every visually impaired user makes use of a modern screen reader such as JAWS.

Be Prepared

In very rare instances, I have developed sites that employ the use of frames. Generally, the framed sites I create are small Help websites that, when opened, provide a help interface for the application or website being used. For the most part, I stay away from using frames. In my experience they're more trouble than they're worth. A larger site generally results in rogue links with bad targets that end up breaking the page structure. Even worse, large sites that use frames become unmanageable and difficult to maintain. Now that modern web authoring tools such as Dreamweaver use templates and library items (as discussed in Chapter 15, "Working with Templates," and Chapter 16, "Working with Library Items"), the main advantage of frames from an author's viewpointthat framed navigation aids are low-maintenancehas disappeared.