WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




How to Design Fantastic Frames

How to Design Fantastic Frames

by Heather Champ

It used to be that "View Source" and Netscape's release notes were a designer's only HTML resource. If you saw something new, you could view the source, look at the code, and try to figure out how your site could benefit from the new tag. Or you could dig through Netscape's home page looking for a hidden gem.

As the Web became more of a fixture, the number of HTML how-to books in bookstores grew like wildfire. I realized how sadly out of date my first primer was when I flipped through the HTML quick-tag reference of a more recent release, which reads like a soap opera (who will do what to whom but won't work with so-and-so).

Framing tags are just one of this plethora of new tags that have turned your HTML tutorial from a pamphlet to a volume. Developers and designers have been fairly quick to incorporate tags like backgrounds, tables, client pull, color, and GIF animation, which increase the quality of a site's presentation somewhat akin to adding frosting to a cake.

Frames are a different matter, however, because not only do they change the way things look on a site, they affect the site's architecture and organization. With frames, we can not only instantly visualize the content, we can also now begin to visualize the structure.

When you land on a framed page, what you are actually seeing is a document that is coded to display a number of URLs, each in its own window. Typically, clicking on a link in one document will activate another window. (For more general information on frames, see "HTML Tips and Tricks," p. 78.)

Designers and developers typically take opposing sides on the issue of whether or not to use frames. Yes, they can be clumsy and difficult to code properly. Sure, you may not always get the desired activity between frames. But both Netscape's Navigator and Microsoft's Internet Explorer have worked diligently to eradicate the annoying behavioral habits of frames.

To properly implement and take advantage of frames, sit down and organize (or perhaps reorganize) your information to ensure that the viewer will experience a smooth, logical passage through the infrastructure. When you design a site with frames, the most affected element will be the browser window.

Remember Real Estate

The most important space in your browser window is that which is guaranteed to be on-screen even at the lowest resolution of 640-by-480 pixels (see Figure 1, at right). This plot of "real estate" is actually smaller, given the tool and status bars at the top and bottom of the screen. This area is further reduced if you consider that the default Macintosh browser window is narrower. I like to call areas B, D, and F in the diagram the "Bermuda Rectangle"--that bit of real estate to the right of a Mac's default browser window that people who do PC design insist on filling up. If you have a Macintosh, the first thing you have to do is resize the browser window.

Below the guaranteed display area are the "horse latitudes"--C, D, E, and F. Sure, viewers can scroll, but the crucial information they need should be displayed above the drop-off point, such as how to get into and move through the rest of the site. Typical navigation systems appear at the bottom of the page, so it is possible that you can land on a site and then wait what seems like an eternity for everything to load before being able to move further into the site.

If you want to check the results as you work, you can change the resolution of your monitor. A new Web browser window will default to fill the new resolution. Open your file, or the URL, and you will see just how much of the content of the document will be visible. Alternately, create a file the size of your usual desktop, and lay out a grid of corner hash marks for the differing browser default sizes. A program like Decor (for the Mac) allows a JPEG to be loaded as the desktop pattern. To install a desktop pattern on a PC (at least with Windows 95), you have to make the image a BMP file, which you can do using a number of programs. Then click on the desktop, follow "Properties," and set in the BACKGROUND part of display properties, using BROWSE. With this new desktop pattern, you will be able to resize your browser window without having to change the resolution of your monitor.

Getting Your GUI Right

The early browser Graphical User Interface (GUI) was simple and invisible. You had a document with hot links, you clicked one of the links, and you moved to the next document. With the ever-increasing complexity of the information and the architecture of sites wrought by clients' expectations and advances in technology, designers are striving to keep the GUI invisible. It's really the key to a well-designed site.

The framing tags are a tangible move toward maintaining an invisible GUI, as it is possible to target and establish a hierarchy of information that will stay in view on the browser, whatever the resolution of the viewer's monitor, even if the information scrolls. When it comes to deciding how many windows to use, a good rule of thumb is "less is more." It is easy to create confusion with too many windows by representing a multiplicity of confusing navigational hierarchies or having each element be presented in its own window.

Suck is a Webzine-like daily commentary/rant/gossip about anything that might have even the faintest tinge of the Web or the Internet. The site's 2.0 version premiered in May, moving to incorporate frames largely to cope with inclusion of advertising banners. Advertisers are limited to 90x90-pixel sizes, but given that many are multiple-frame animations, this increases the virtual real estate.

The site uses a very simple two-window frameset. There are typically two levels of navigation available in the left-hand frame, with main icons "the fish, the barrel, and the smoking gun" from the original site being maintained and the new areas listed underneath. The right-hand frame displays the content chosen by clicking through the right-hand site. The Suck icon hops back and forth from left or right depending upon where you are, but is always in view. It's simple and elegant, with only two frames: navigation and content. Some have criticized Suck for being rather "inscrutable." Actually, it achieves simplicity without "dumbing down" the site, as so many are wont to do. If you spend a few minutes clicking around, you'll very quickly see how it works.

If we add a third window to the frameset, we can create a constant window for the site's logo while maintaining the navigational and content windows. Microsoft's Site Builder Workshop and the Cocktail site both incorporate three-window framesets for differing effects. Microsoft is somewhat more similar in visual style to Suck, as the content of the windows usually has the same background and look and feel. This will lead to a seamless look when Microsoft's FRAMEBORDER= "NO" or Netscape's BORDER="NO" becomes the de facto standard. With this inclusion, the "grouting" between the frames will disappear.

Conversely, Cocktail has different whimsical color choices and backgrounds. It makes no apologies that the frames are different, though this might change when the frameborder issue is resolved. The top frame has the ever-present Cocktail logo; the left-hand frame does double duty between the Cocktail imagery and navigation; and the right frame has a history of the featured drink linking within and out of the site. With all three sites mentioned, the key information is always visible. Nothing slips off the bottom or top as the pages are scrolled.

Framing and Design in the Future

Given that Web years are more like "dog" years than "people" years, looking at a snapshot of frames circa late 1996 at this time next year would most likely provide the same hilarity as looking at one's high school graduation photos. Many of the new tags are in transition, with new attributes being introduced with every beta release. The functionality of framing tags has gained great ground in only a year, and there's no reason to believe that this momentum won't continue in the future.



HTML5 Development Center


Recent Articles