Why frames?

I have created QuirksMode.org as a framed site. Although it is perfectly accessible without them, you need my frameset for optimal usability. A few readers wondered why. This page attempts to give an answer.

First of all let's reverse the question: why not?

When all's said and done there is only one single drawback to frames, though it is a serious one: pages inside a frameset are hard to bookmark. The average user will set a bookmark to the frameset, which will lead him back to the front page instead of the deeper page he wanted to bookmark.

I don't think that's a problem on my site. My primary audience consists of web developers who are perfectly aware of what frames are, how they work, what the drawback is and how to work around it.

Nonetheless, the average site does not have such an educated target audience. On most sites the bookmarking problem will be serious and will need a solution. Duly noted for the future.

The advantages of frames

Now let's return to our original quesion: "Why frames?". There are two main reasons I'm using frames:

  1. Frames add usability to my site. This site contains about 200 pages. With such a huge amount of content some sitemap-like overview of the entire site is mandatory. Besides, these 200 pages should all be linked to in some sort of general navigation.
    If I'd have to solve this problem without frames, I'd have to either include the full 200-page navigation to every single page in this site, or to create a separate sitemap page. I liked neither option. Including the entire navigation would make all pages too heavy (the navigation page, HTML only, is now 25K), apart from the fact that I'd need some sort of server side script which I can't write myself.
    Adding a sitemap would make this site harder to navigate, since the user would have to go to the sitemap first, and then go to the page he wants to view.
    Using a navigation frame neatly solves these two problems.
    Meanwhile I added a sitemap, but I defined it as an alternate "view" on the navigation frame.
  2. Frames allow me to preserve state between pages. I can add simple JavaScript routines that remember where the user has been. The most obvious example is the breadcrumb script in the top frame, which shows the actual path the user has taken through my site and serves as a kind of instant-history.
    My frameset allows me to add more such scripts later, if necessary.

The second reason, especially, is only of interest to browsers who support JavaScript. Besides, both these reasons are complicated reasons. Keep that in mind.

Accessibility problems?

Some will say that frames cause accessibility problems. I do not agree.

Sure, user agents like screen readers or mobile phones (not to mention search engine spiders) cannot show framesets. Therefore any site that works only with frames will quickly encounter serious accessibility problems.

Nonetheless the solution to this problem is extremely simple: after the frameset code, include a simple, basic link to your homepage or the navigation page. Noframes user agents will use this link and thus access the site.

The site itself should also be ready to receive noframes visitors. I pondered this question at length while making QuirksMode.org, and I like the solution I came up with.

Solving the bookmarking problem

So we have found two reasons to use frames, and we have also found that a few features would remove any accessibility problems.

The bookmarking problem is still there, though. Let's try to solve it.

I could solve the bookmarking problem, for instance, by adding a "Bookmark" link to every page. When the user clicks on it he loads a customized frameset leading directly to the page. He can bookmark it safely. Of course it would also cause a flickering of the browser window while the new frameset loads, even though the content pages themselves are already in his cache and will quickly reload.

When the user clicks on the "Bookmark" link I could also set a cookie that stores the page name. The next time the user returns to my site a little script could generate a list of pages he has bookmarked. The drawback is that the user would not see the page in his bookmarks,

These are all complicated solutions. As I said, I don't consider the bookmarking problem of prime importance on my own site, since most users have the technical knowledge to work around it. Therefore I have implemented neither solution, though I could easily do that in the future.

For this specific site, the advantages of frames are larger than their drawbacks. Therefore I use them.

Frames are complicated

Nonetheless the keyword is complicated.

My reasons for using frames are complicated. Possibilities for solving the bookmark problem are complicated, too. Frames are complicated. That doesn't mean they can never be used, but it does mean we should carefully judge when and where they can enhance the site without becoming a crutch for lazy web designers and developers.

Any site should be accessible without frames. Therefore frames do not belong in simple, plain XHTML/CSS sites. They only belong in more complicated extensions of these sites.

In my recent The future of JavaScript article I said: "JavaScript is meant for adding layers of usability on top of structural, simple XHTML documents."

Frames are very powerful tools for giving the user a complete overview of large sites, and for other navigation purposes. Therefore, like JavaScript, they have their place in the extra layers of usability presented to user agents who can handle them.

Using frames

In my view, frames belong in the list of advanced techniques available to web developers who want to add extra layers of usability to a plain, simple XHTML/CSS site.

The frames on QuirksMode.org neatly fit into this theory. They only work in W3C DOM capable browsers, in other words, when the browser can handle them and the scripts that make their use worthwhile. Other user agents will see a plain link to the homepage.

Concluding, I see no reason to avoid frames, provided we use them only as an extra layer on top of an otherwise accessible site.