1. Home
  2. Computing & Technology
  3. Web Design / HTML

More from About.com

Noframes - The Key to Usable and Accessible Frames

What to Do When the Browser Doesn't Support Frames

By Jennifer Kyrnin, About.com

Frames are still a valid choice when building a Web site, and especially when you don't have access to any other method of including one HTML file in another, frames are a great way to keep a site's maintenance low. Keeping navigation in a frame and only needing to update one file whenever it changes is a huge benefit in my mind. As well as the value of having my navigation always on screen.

But frames do have drawbacks. The biggest one is their accessibility. Most screen readers are actually a few revisions back in the browser technology and either can't read frames at all or have difficulty reading them. Plus, search engine robots don't like frames so a framed site is going to be at a disadvantage in the search engines.

Use the Noframes Element

The noframes element is often forgotten about in the rush to build a frameset - especially as most browsers that you or your boss are using support frames, so you probably never see the page. But even so, you should always have a noframes page in your frameset. It goes after all your frames, and contains content that customers should see if they don't have frames.

The nice thing about noframes is that since almost no one sees them, they don't have to be especially pretty - in fact, the more purely functional they are the better, because the most common users of noframes pages are screen readers and search engine robots.

Noframes Dos

When building your noframes page, make sure you do the following:

  • Include all navigation from the normal site.
    Since this is used by screen readers and search engines, you want to make the navigation the primary focus. That way, the information that is needed is readily available.
  • Link to the frames directly.
    Since the goal of the noframes page is to help people get to your content, you should link directly to your content, and not to another frameset.
  • Use only enough branding to get the sense of the page across.
    Since this page will be seen by search engines, you want to make sure that it is optimized for your search terms, but you shouldn't flood it. It's also going to be read by screen readers and extra marketing fluff isn't going to do anything but annoy them. If your customers can't get to the content quickly, they will leave, even if the content links are near the top of the page.
  • Use this page as a site map.
    One good use of the noframes page is as a sitemap. This allows search engines and screen reader customes to get to your content as quickly as possible.
  • Be extra careful about accessibility on this page.
    Since this page is going to be seen primarily by people with accessibility issues, you need to make sure that it's easy to read and understand.

Noframes Don'ts

Be sure to avoid these common mistakes in building your noframes section:

  • Don't tell people they're on a noframes page, or that they should get another browser.
    Chances are, if they're reading your noframes page it's because they have to, not because they love Netscape 1.0. Telling people to upgrade is just annoying, especially when they can't.
  • Don't spend a lot of time on the look and feel.
    If they can't view frames, they probably can't view CSS either, so styling this page is a waste of time.
  • Don't forget to include copyright and contact information.
    You want to be sure that your customers can contact you if they need something from your site and can't get to it from your noframes page.

Building a Noframes Section

Once you have your frameset built, you simply add the noframes tag after the frames inside your frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>A framed document</title>
</head>
<frameset rows="20%, *">
  <frame src="navigation.html" />
  <frame src="main.html" />
  <noframes>
  <h3>Navigation</h3>
  <a href="/main.html">Home</a> | <a href="/help.htm">Help</a>
  ...
  </noframes>  
</frameset>
</html>

Some common errors and misconceptions:

  • The body element is not required inside a noframes element.
  • The body element should not surround the frameset.
  • Frames are a valid part of XHTML, using the Frameset DTD.
  • Noframes are not required inside framesets, but they are strongly recommended.
  • Essentially any element that can live inside the body element can be inside the noframes element as well.

Did you find this article useful or interesting? How about boring and uninformative? Comment on the article.

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. About.com Web Design A to Z
  5. Books
  6. About Web Design Book
  7. AWD: Chapter 10
  8. Noframes - Accessible HTML Frames - What to Do When the Browser Doesn't Support Frames

©2008 About.com, a part of The New York Times Company.

All rights reserved.