Home > Articles > Web Development > Microsoft Expression Studio

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Tips for Frames

As I mentioned at the beginning of this chapter, plenty of designers will tell you that you should never use frames. I'm not one of them. However, you should carefully consider the possibility of using tables or other design elements such as CSS. If you decide that frames are the right choice for you, there are some general tips you should follow so that they don't become a point of frustration for users of your site.

Frame Borders

As you've seen in this chapter, you can configure a frames page so there are no borders on the frames. Before you choose to go borderless, you should carefully consider your site's design. If you have user interface elements such as graphics that distinguish the frame from the rest of your page, removing the borders might be a suitable option.

Examine the page shown in Figure 6.13. The navigation links at the left side are in one frame, and the main content is in another. However, there's no way to tell that it's a frames page by looking at it. If I scrolled the content page, the navigation would remain in place. That might be what you want, but it also might be confusing to some users. Placing a border on the frame provides a visual indicator that the two parts of the page are separate.

Figure 6.13

Figure 6.13 Borderless frames can be confusing to users because there is no visual indicator that the frames are separate.

Resizable Frames

When adding frames for navigation elements, it's often tempting to configure the frames so they cannot be resized. Depending on the site's design, that might or might not be a good idea.

If the content in the frame consists of text, it can often be a bad idea not to allow users to resize the frame. Some users of your site might have adjusted the size of the text in their browsers. In some cases, this can cause your text to overflow the frame.

The page shown in Figure 6.14 is an example of bad design with frames. Notice that the Contact link is not fully visible because I have adjusted the text size in my browser.

Figure 6.14

Figure 6.14 Text inside a frame can overflow the frame if a user adjusts the text size in his browser.

When using frames in your site, be sure you test carefully. Adjust the size of the text in your browser and test your site again. The goal is to make your site look the way you intend for all site visitors. With careful testing and design, you can easily reach that goal.

Breaking Out of a Frameset

If you do use frames in your site, you run the risk of your frames page being displayed inside a nested frameset. Figure 6.15 shows an example of a nested frameset caused by a link inside a frameset linking to a frames page.

Figure 6.15

Figure 6.15 A nested frameset caused by a frames page linking to another frames page. Notice that there are two navigation frames, one belonging to the previous frames page.

The solution to this problem is to include a JavaScript snippet to force the frameset page to remove any nested framesets when it gets loaded. Simply include the following snippet inside your <head> section in the frameset page:

<script language="javascript" type="text/javascript">
if (window != top) top.location.href = location.href;
</script>
  • + Share This
  • 🔖 Save To Your Account