HWG-News Tips Late September 2002.

Using Frames Effectively

HWG-News features member-submitted "tips" in each issue, in the space between articles and announcements. These were the tips submitted for the 23 September 2002. newsletter, for the following category:

Using Frames Effectively

Many people consider frames to be the worst idea in the history of HTML, while others applaud the benefits they can provide. How can you utilize the power of frames while still keeping your site accessible, searchable, bookmarkable, and error-free?

This issue's winner!

There are rare occasions when frames can be just the thing for your client. I use a small frame to contain my real estate client's 800 number when linking into realtor.com.  This means folks can search for listings and still have my client's phone number accessible at any time.

-- Submitted by Kathleen Ely <kely@mt.net>

Other Tips for Using Frames Effectively

don't
don't
don't use frames

-- Submitted by Jon Tillman <tillmanj@sccoast.net>

If used properly, frames can be a useful navigation tool.  Using frames sparingly -- ideally, have two frames:  one for navigation and one for the content.  To many frames can complicate navigation and distract from your content.  When creating frames, don't forget to include a noframes section in your frameset file for visitors with older browsers.  If possible, the noframes section should allow your visitor to view your site without frames.   Remember to include a title tag and any meta tags on *all* of your pages.  This will help search engines index your site and visitors who print out pages will appreciate the title rather than a URL on their hardcopy.

-- Submitted by Jonathan L. Mahaffey <theprezz@hotmail.com>

Framed layouts greatly reduce your ranking in search engines, but provide an easy way to keep site navigation right there for your visitors.  Only use them when you have other pages constructed to submit to search engines and then link them into the framed enviroment OR when your customer will not be relying on search engines for traffic.

Keep the navigation frame as small as possible and keep in mind that your pages will be viewed at several different resolutions.  What may look great at 800 x 600 may leave scroll bars at 640 x 480 and look blank at 1024.

-- Submitted by Joel L Compton <joel@3riversweb.com>

When used well, frames aren't visible. When used poorly, well - they just shouldn't allow this.

-- Submitted by Robert Swist <bobswist@hotmail.com>

In my work I use lots of frames, if you make a website containing lots of graphical layouts, it is very usefull to divide the site into frames, that way you prevent the surfer from reloading most of the images again and again.

 

Secondly as there are lots of different screens, resolutions, browsers with or without statusbars, menubars, etc. the webmaster has no idea what kind of innerside dimensions the surfer will have. You could build your website on 14 different types of innersizes and use JavaScript to determine it and relocate the surfer. Or you could use a simple tric making sure everybody sees the same: set the frames to rows "*,440,*" and the middle one to cols "*,760,*". This results in an inner body of 760x440 pixels that will always be centralized in the screen.

 

-- Submitted by Joris De Smet <webmaster@ophidia.org>

Proper use of target - _top, _self etc.

Nothing is more annoying than horizontal scrolls bars - or worse, a frame size that cannot be adjusted when the content does not fit. (scrolling=no) So make sure your content fits or scrolling properties are set accordingly.

-- Submitted by Gerald R. Gray <grgray@cmsenergy.com>

1. A simple tag will prevent display error with ancient browsers.
2. A static menu created with frames provide an excellent navigation system for your site.
3. To make your site searchable, you can add different meta keywords into different web documents.
4. If you want to display your frameset even if users reach individual pages by mistake, you can use if (top.location!=http://yoursite.com/yourpage.html) {top.location=http://yourpage.com/yourpage.html) to check and redirect users to the right frameset.
5. If you want to make your individual page (page within frames) bookmarkable, use javascript:external.addFavorite on the page with appropiate values. However, this can't be used with tip 4 and works only with Internet Explorer.

-- Submitted by Esmond <esmondtg@hotmail.com>

Frames can be beneficial in organizing a complicated web site, but they must be used with caution and used correctly.  It is very annoying and confusing for surfers to get "trapped" in your frames, therefore it is wise to include in your navigation a "break out of frames link".  The frames "trap" can be completely avoided if you set the parameters for links correctly in the first place.  It is wise to use the correct tags where appropriate to prevent the web trap in the first place: the "_top" tag (to get the new web destination to open in the same browser window outside of the frames) and the "_new" tag (to get the new web destination to open in a completely new browser window).

 

Test and test your web site again to ensure the frames links open correctly in the destined windows so that the entire web site operates smoothly.

-- Submitted by Danielle Bruneau <dbruneau@pris.bc.ca>

My favorite (and really - only) use for frames is to set up a navigation menu that is always available.  I set up a narrow left hand frame and make it non-scrolling so there is no "seam" between frames.  The right hand frame uses the majority of the page and all menu selections are targeted to the "display" frame.  This way the use always has the navigational menu right there, regardless of where he or she is on the displayed page.

-- Submitted by Doug Bittinger <dougnmarie@postnet.com>

Please do not promote the use of frames!  Frames do NOT provide effective navigation, you can get the same reuse of code using server-side includes. Frames PUNISH repeat visitors, which is the traffic you really want on your website, because it prevents navigation through bookmarks---one of the most powerful navigation tools in a browser.

It also prevents you from sending links to friends because it will only link to the frameset page and not necessarily the child windows.

Frames will negatively impact your ranking in search engines because a crawler can't match meta tags with site content.  Human edited directories also look down on frame pages.

Secure pages using frame navigation slows the browser tremendously because each frame has to be secured independently or else you leave security holes, and when you navigate to non-secured pages you have to target _top or leave the frameset page using SSL, and then you get popup alerts about security.

THERE IS NO REASON TO USE FRAMES ON A WEBSITE.  Please, as an organization that promotes html standards, do not endorse this bad habit left over from html 1.0.

-- Submitted by Robin Siler <rsiler@usautonews.com>

When displaying a web page, visitors can bookmark a page only if URL is related to content. If you use a frame as a menu and another frame to hold the content, use a separate FRAMESET page to include the same menu (or better a new menu with the active section emphasized) and a different content page. If you can, use a programming language to create frameset, frames, links (and a 'no frames' version) of your site.

The 'no frames' version (using tables or, better, CSS) is important if you want to let your visitors to print a nicely formatted page (you can add a 'prepare page to print' to your menu).

-- Submitted by Carlo Fava <det1289@iperbole.bologna.it>

Topic: How can you utilize the power of frames while still keeping your site accessible, searchable, bookmarkable, and error-free?

Tip: You can't. If you could guarantee that your visitors will never need to reload a page or bump part of a Netscape browser (thus kicking the viewer back to your entry page), check something in your page source, navigate to another page on your site, or come to your site from another frames site, there would be few reasons to not use frames. But what are the benefits? I haven't seen anything that can't done better without frames. That's why the heavy-hitter sites avoid frames like the plague. Remember Occam's Razor and always take the simpler choice.

-- Submitted by Bob Lemen <bob.n@usa.net>

The simplest way to make your site more acceptable to visitors who don't like frames is to address the issues they complain about:

1. EXTERNAL SITES NESTED IN THE FRAME LAYOUT: The number one complaint is that when external sites load into your frame layout, they don't view as the author intended - a 640 X 480 design is cramped into a narrower window. While this effect "keeps" the visitor on your site, it's quite often a visual irritant to the visitor. Two ways to avoid this are:
     
   1. If you feel the need to "keep" the visitor on your site, load the linked site into a two-frame layout, with navigation frame only at the bottom or top instead of the side. This maintains the 480 pixel width.  
   2. Load the external side to the full frame of the window:
            <A HREF="external_site.htm" TARGET="_top">
   
   
   
2. POTENTIAL INACESSABLE COPY OR LINKS: Be careful with the SCROLLBARS attribute. I recently visited a national news channel site and it informed me I needed an updated version of a browser plug-in, but the designer had set the scrollbars attribute to none. This put the link to the download page beyond the frame's edge, inaccessable to the viewer!
   
   
3. FRAMES TAKE TOO LONG TO LOAD: This is only because designers forget the main reason for using frames, to avoid reloading redundant graphics. Make sure all graphics and navigation frames come from a common directory so that only the new graphics and pages load. Also setting the FRAMEBORDER attribute to 0 will get rid of the obvious borders that give a framed site it's stock look and feel and also take up unneccessary real estate.
   
   
4. IT MAKES IT TOO HARD TO SUCESSFULLY RANK ON SEARCH ENGINES: For seach engines that read the title or meta tags in the header, simply put the keywords and description in the main frameset page and in the <NOFRAMES> section. For those search engines that don't read frames OR the noframes section of your main page, a simple perl script that identifies the search engine spider upon entry to your site and redirects it to a text-only entry page will work well, while all others get redirected to your "normal" page. This also works for backwards compatibility to make sure older browsers make use of your site - redirect them to a text-only or older browser version of your site.
   
   
5. THE FRAME CONTENT FLOWS DIFFERENTLY ON DIFFERENT BROWSERS: Things can wrap differently when viewed on different machines and browsers. Use tables in the frame source pages to "lock" your elements into place so they stay where they belong and as always, take the time to view all browser and platform conditions to look for problems.

-- Submitted by Bill Snowman <bill@nytebyte.com>

Frames are a very useful tool if you know how to use them.  There is really only one reason that frames can be useful, and that is for effective navigation that doesn't have to reload with every page your user views.  Some careful rules to keep in mind when considering making a page with frames are:

Use frames only as navigational tool.

Make sure you have only one frame designated as your "information" area. Do not put any pertenent information in a frame other than your information frame.

Make sure you don't make your user scroll unnessescarily.  If you have a menu, make sure its small enough to fit in the frame without scrolling.

If you follow these rules you should have some nice sites!

-- Submitted by Allen Geer <allengeer@hotmail.com>

When using frames, get rid of the "old fashioned" frames bar. Make it transparent to the user. Frames have a great purpose when used for as for design to strategically control people's  navigation on your web sites. Create  "table of contents" frame. Position the frame on the right or left side of your page. 

When site visitors click hyperlinks to open new pages and hyperlinks,   they will still see their original site and all of its resources. 

-- Submitted by Phil Harris <pwharris@worldnet.att.net>

Used properly frames are a useful item in the Web designer's toolbox. They can ensure that fixed content such as headers, company logos and navigation bars are consistent and easily updated. Sections of the screen can be scrolled while others remain in a fixed position. Never use them on a home page, which should be a single screen rich in metatags and relevant content, unless creating separate "doorway" pages for search engines. All frame pages with significant content should have a simple script to frame them correctly if accessed directly.

-- Submitted by Alan Dansey <alan@awdansey.co.uk>