I've
Been Framed!
For
the past year, I've been hosting a Web site that uses frames, and I've come to a
couple of realizations. Used properly, frames can be a useful tool for
simplifying Web site navigation, and they can bring about a whole new experience
for the viewer. Unfortunately, however, through the use of surveys and server
log analysis, I found that only about 50 percent of viewers are using a
frames-capable browser; of those, 55 percent did not like the use of frames. I
actually find frames to be quite useful, so I wonder why others just don't like
them.
Frames
can be great. You can create a part of the screen for the viewer that never
changes, which might contain a menu or icons that will take them to other pages
within the site. Frames can be a pain, however, in that viewers can no longer
use the URL bar to see where they are, and they can't bookmark a frame, or
switch to a non-framed version (unless the designer has included that option).
And once in a framed site, if you cruise around a bit and then hit the back
button, you go back to the previous site--completely out of the framed site.
In
this column, I'll show you how to accomplish the task of competent framed-site
construction, using what we learned in the September/October issue about tables
as a jumping-off point. Then, I'll provide a frame alternative in order for you
to understand what you should do when creating a framed site, and how you can
achieve it.
I
came up with "Welcome
to Jamaica" as a sample for this column. It can be viewed in all of its
glory, or it can be viewed in its non-framed version without changing much of
the functionality or appearance of the site.
A
Frame Foundation
When
you use frames, you're always playing to a limited audience, because the only
browsers capable of displaying them are Netscape Navigator 2.0 and above, and
Internet Explorer 2.0 and above. Newer versions have even more possibilities for
developers; among the most useful features of the new Netscape 3.0 and Explorer
3.0 are borderless frames, which allow you to incorporate one or more frames
inside the page while having it appear to be a single page with no frames.
Using
a non-framed version of a site in conjunction with the framed version lets the
viewer decide which they prefer. For instance, users may find one particular
page on your site is worth visiting each day, but they really don't want to
hassle with the frames; the non-framed version will allow them to bookmark the
page directly.
The
"Welcome to Jamaica" site first appears in its non-framed version. In
the lower left portion of the page is a hyperlink to the framed version of the
site (Figure 1, p. 80). If you click on this hyperlink, the new page you will be
on won't look much different than the one you started at (Figure 2, p. 80). As
you click each link in the table of contents on the left, you'll see the
corresponding article appear on the right, regardless of which version you're
using. The change is apparent when you scroll down the page, and the table of
contents either moves along with the rest of the page or stays where it was,
ready for you to change to the next article. This site could have been further
embellished with icons or hyperlinks to take the reader back to the table of
contents, but in this article we're concentrating on frames.
Here's
how I created the non-framed version of the site:
<HTML>
<HEAD>
<TITLE>Welcome to Jamaica</TITLE>
</HEAD>
<BODY BACKGROUND="bg.gif"
bgcolor="#80ffff" text="#004080" vlink="#004000">
<CENTER><TABLE><TD WIDTH=180>
<CENTER><TABLE><TD WIDTH=180>
<B><CENTER>THE HISTORY OF JAMAICA
</CENTER><P>
<FONT SIZE=-2>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="disco.html">"Discovery"
</A><P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="spanish.html">the Spanish</A>
<P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="slavery.html">Slavery
</A><P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="independence.html">
Independence</A><P>
</FONT>
<B><CENTER>TOURIST SITES</CENTER>
</FONT><P>
<FONT SIZE=-2>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="montegobay.html">
Montego Bay</A><P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="ocho.html">Ocho Rios</A>
<P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="negril.html">Negril</A>
<P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="antonio.html">Port Antonio</A>
<P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="kingston.html">Kingston</A>
<P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="bharbor.html">
Blue Harbor</A><P>
<CENTER><B>
<A HREF="fjamaica.htm">
FRAMES</A></B></CENTER>
</B></FONT></TABLE>
</CENTER>
<TD WIDTH=6><IMG SRC = "DOT_DARK.GIF"
WIDTH=2 HEIGHT=345>
<TD>
<CENTER>
<IMG SRC="head.gif" ALT="Welcome to Jamaica">
</CENTER><P>
<CENTER><H2><I><FONT
COLOR="#ba413a">Jamaica,
independent since 1962
</FONT></I></H2></CENTER>
<P>
<CENTER><IMG SRC="jamaica.jpg" HSPACE=30
ALT="Jamaica" WIDTH="500" HEIGHT="300">
</CENTER>
</TABLE></CENTER>
</BODY>
</HTML>
I
used a table for the page's main layout. The table has just one row, but two
data sections. The section on the left is only about 180 pixels wide; I
specified it as such by including the <WIDTH> parameter in the <TD>
tag of the table. I then created another table within the same data tag to
center the list in that section. I made the data section the same width in the
inner table as it is in the outer. Inside the inner table, I used small bullet
images and hyperlinks to the individual pages in the site to create a sort of
table of contents.
By
using the same table arrangement on each page, and just changing the text for
each article or chapter, I was able to keep the style of the site the same
throughout. For the hyperlinks in the table of contents, I simply removed the
<A HREF> tag from around the link on the page that is being viewed. This
way, the link can no longer be clicked on, but it is still visible along with
the other active links. Since most of each page is actually in hyperspace, with
only one approximately 8.5"-by-11" document showing at a time, the
bottom of the page has a chance to download while the user is reading the top. I
used a small font size, specified in <FONT> tags surrounding the text, for
all the hyperlinks, and I also used the <FONT> tag to change the colors of
some of the text to red.
Remember
that if the browser displays frames, it will also handle font tags--now even in
Explorer. Used together with frames, these tags can make your site quite a
presentation. You just don't want to overdo it: Harsh colors on an otherwise
mild background can ruin the presentation.
Fun
With Frames
If
you can get through the building of the non-framed page, the framed page is
really a simple matter. I again used a table for all the hyperlinks in the left
frame and a simple page layout for the right frame. The simplicity of this site
lies in the consistent style used throughout.
<HTML>
<HEAD>
<TITLE>WELCOME TO JAMAICA</TITLE>
</HEAD>
<FRAMESET COLS="50,150"
FRAMEBORDER="NO">
<FRAME SRC="Frjampan.htm" NAME="left"
SCROLLING=AUTO MARGINWIDTH=0>
<FRAME SRC="Frjam.htm"
NAME="right">
</FRAMESET>
<NOFRAMES>
<BODY BACKGROUND="bg.gif"
bgcolor="#80ffff" text="#004080" vlink="#004000">
<CENTER><TABLE><TD WIDTH=180>
<CENTER><TABLE><TD WIDTH=180>
<B><CENTER>THE HISTORY OF JAMAICA
</CENTER><P><FONT SIZE=-2>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="disco.html">"Discovery"</A>
<P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="spanish.html">the Spanish</A>
<P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="slavery.html">Slavery</A>
<P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="independence.html">Independence
</A><P>
</FONT>
<B><CENTER>TOURIST SITES</CENTER>
</FONT><P>
<FONT SIZE=-2>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="montegobay.html">
Montego Bay</A><P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="ocho.html">Ocho Rios</A>
<P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="negril.html">Negril</A>
<P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="antonio.html">
Port Antonio</A><P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="kingston.html">Kingston</A>
<P>
<img src="BULLET.GIF" HSPACE=3 ALIGN=MIDDLE>
<A HREF="bharbor.html">Blue Harbor</A>
<P>
<CENTER><B><A HREF="fjamaica.htm">
FRAMES</A></B></CENTER>
</B>
</FONT>
</TABLE>
</CENTER>
<TD WIDTH=6><IMG SRC = "DOT_DARK.GIF"
WIDTH=2 HEIGHT=345>
<TD><CENTER><IMG SRC="head.gif"
ALT="Welcome to Jamaica"></CENTER>
<P>
<CENTER><H2><I><FONT
COLOR="#ba413a">
Jamaica, independent since 1962
</FONT></I></H2></CENTER>
<P>
<CENTER><IMG SRC="jamaica.jpg" HSPACE=5
ALT="Jamaica" WIDTH="500" HEIGHT="300"></CENTER>
</TABLE>
</CENTER>
</BODY>
</NOFRAMES>
</HTML>
I
made sure that even though this page has to be clicked on from the non-framed
page to get to it, those with frame-challenged browsers will still be able to
enjoy it. The use of the non-frames tag is so easy you have no excuse not to use
it.
A
framed page has a distinct advantage in at least seeming to be faster. I say
"seeming" because the page takes almost as long to download, but
because the left frame never changes, it only seems to take seconds to load. The
framed page features links to the same pages that the non-framed page does, but
the framed pages just contain the actual articles, without the hyperlinks on the
left side. At the bottom of the left frame is a hyperlink to the non-framed
version.
When
using the new version of Netscape Navigator or Internet Explorer, you can
specify that no frame borders be used, creating a seamless page with no separate
frames, at least at first glance. Close examination of the "Welcome to
Jamaica" framed page reveals the double-lined brick, indicating where the
first frame ends and the second one begins. This is only possible if you are
using a page that will not have so many hyperlinks that the user needs to be
able to scroll the left frame down to see all the hyperlinks.
A
Little Customer Service
The "Welcome to Jamaica" site is not a particularly spectacular Web
site, but it is a fine example of how a Web site can offer a framed page as well
as a non-framed page. Remember the saying "The customer is always
right"? It still applies in the Web site business, and it translates to
mean that all surfers have their own preferences for how Web sites should be set
up. If your version doesn't conform to their standards, and they don't have a
way to navigate to their preferred version, they'll just go somewhere else. The
Web is all about choices, and that's what your Web site should be offering. . .
a choice. Frames, anyone?