Publishers of technology books, eBooks, and videos for creative people

Home > Blogs > Frames are Dead, Long Live Iframes!

Frames are Dead, Long Live Iframes!

Q: Is there a suitable alternative to frames? My wife is president of a local woman's club. She and I administer the club's web site, and the ladies like the list of links down one side of the pages. But I read that frames have been deprecated. Regardless, I want to keep the site simple.

The short answer is yes— use iframes.

The slightly longer answer is no, not exactly, but we can get close.

The long answer is there are a variety of ways to add content to your Web pages, but the question is: once it’s on the page what are you going to do with it (or to it)?

What were frames good for?

First, let’s talk about the much maligned and misunderstood frame. Many moons ago when the World (Wide Web) was young and Netscape Navigator ruled the waves, I wrote my first book on Web design—How to Program HTML Frames. Despite the fact that the title was misleading (you don’t actually “program” HTML), I felt that frames promised to revolutionize the way Web sites were designed at the time. They allowed you to do several things that turned a Web page into a Web application:

  1. Fixed Content: Different sections could be fixed position in the page.
  2. Independent scrolling: Different sections could scroll without scrolling the entire page.
  3. Mix and match: Content could be loaded from various sources.
  4. Dynamic: Content could be changed without reloading the entire page.

These are capabilities that we take for granted in all desktop applications and not possible with simple HTML. Imagine if while you were working on an Word document the menu bar scrolled off the top of the page or if every time you saved the entire interface had to reload. However, frames met all of these needs.

What happened to frames?

Unfortunately, when they were first introduced, frames were not well implemented—causing a lot of usability problems—and they broke the way bookmarking worked. This led people like Jacob Nielsen to declare that “Frames suck most of the time.” Fair or not, the perception stuck such that the <frameset> tag and all of it’s associated tags will not be coming back in HTML 5. Although most browsers will probably continue to support frames for at least the next few versions, it’s time to move on.

To make the shift, though, we need to find a technology or combination of technologies that will cover the same needs that frames met.

Replacing Frames with Iframes

Although “frames” are going the way of the dodo bird, HTML 5 is retaining the <iframe> tag. Whereas frames split the browser into separate discrete pages, an iframe is a frame that is embedded directly into a another Web page.

One significant change that HTML 5 will be making to the iframe, though, is that you can no longer specify width and height as attributes in the tag. Instead, this is all handled with CSS instead, which is as it should be. By using CSS, then we can add an iframe in a fixed position, that is independently scrollable, and mix and match content, which begins to meet our criteria. However, depending on how you implement iframes, there are trade offs between the two solutions.


Iframe Solution #1

To create a fixed menu frame on the left side of the page, add the iframe in the <body> of your page before the content:

<body>
<iframe id="menu01" src="menu.html"></iframe>
<div id=”bookpage”>One thing was certain, that the WHITE kitten had had nothing to do with it:
</div>
</body>

Notice that I added an ID to the tag so that I can then use CSS to address it. My CSS will look something like:

body { padding-left: 200px;}

#menu01 {
  * position: absolute;position: fixed;
top: 0;
left: 0;
height: 100%;
width: 200px;
border: 1px solid gray; }

Notice that I moved the body of the page 200px from the left (using padding) to accommodate the menu and that I’m using the asterisks hack to create an absolutely positioned menu for IE6, which does not support fixed positioning.

Now in your menu, format links like this:

<a href="frame-example1-1.html" target="_top">CHAPTER I. </a>

This solution meets 3 of our 4 criteria for replacing frames, but it fails #4, since the iframe would have to be placed on every page, and the menu links will have to reload the page each time.


Solution #2

To solve the page reload issue, we’ll need to dig a little deeper. Another way to work this would be to place both the menu and the text content into iframes, which is even more like what framesets did in HTML 3 & 4:

<body>
<iframe id="menu01" src="menu.html"></iframe>
<iframe id="bookpage" name="bookpage" src="ch01.html"></iframe>
</body>

Notice that I’ve added the name attribute to the second iframe, but use the same value as the ID. This is to maximize cross-browser compatibility.

Next, we set up our CSS to position the iframes on the page.

body {
margin: 0;
padding: 0;
padding-left: 200px; }

#menu01 {
position: absolute;
background-color: rgb(235,235,235);
top: 0;
left: 0;
height: 100%;
width: 200px;
border: 0;
border-right: 1px solid gray; }

#bookpage {
position: relative;
top: 0;
left: 0;
border: 0;
height: 100%;
width: 100%; }

In your menu file, format your links to target the bookpage iframe:

<a href="frame-example1-1.html" target="bookpage">CHAPTER I. </a>

This page will look and behave exactly like the one in solution #1, except that clicking a link in the menu will not reload the entire page, only the bookpage iframe. BUT (and you know there’s always gotta be a big but) this solution runs afoul of many of the usability problems that frames had, not the least of which is bookmarking. If I bookmark with a specific page showing, the bookmark will still always return me to the first page.

Other solutions?

You can also add dynamic content to your pages—similar to frames—using PHP and Ajax technologies that allow you to mix and match separate files in a single page, adding them to “layers” that can be positioned and scrolled independently of other elements on the page. In fact this is what most of the Web 2.0 sites are doing today. If you want to learn more about this solution, check out my book CSS, DHTML, and Ajax Visual Quickstart Guide.

Ask a question, win a book! Jason will be answering Web design questions each week, and each week the person whose question he chooses will win a copy of his new book Speaking In Styles.

Ask your question now.

Comments

comments powered by Disqus