Types of frames
A frame is an area in a Web page where another Web page is
displayed. A page with frames is defined as a frameset, divided into areas
containing different Web sub-pages.
Frames embedded in Web pages are also called iframes or
inline frames. This type of frame was introduced with Internet Explorer
3.0.
In HTML, code similar to this is used to create a
frame:
FRAMESET rows="50%,*"
FRAME src="page1.html" name="frame1"
FRAME src="page2.html" name="frame2"
/FRAMESET
(Find more examples at http://wp.netscape.com/assist/net_sites/frame_syntax.html)
The iframe is very similar:
iFRAME src="contents_of_frame.html" FRAMEBORDER="0"
SCROLLING="auto" name="myInlineFrame"
/iFRAMESET
Why are frames used?
As a rule they are used to hold one common area and to
have another page inserted in it that can change independently of other pages in
the other areas of the frameset.
They were originally used in HTML to have common areas in
several pages, e.g.: headings and menus. In this way, only one page was updated
and the change was reflected in all of the site's pages with frames.
Pros
Cons
- It does not allow pages to be indexed by Internet
search engines. Many search engines index the page within the frame
independently from the frameset, so they may list the page within the frame as
a root page similar to many others. Users will access that page without seeing
the page containing it. This is something you do not want when designing a
page with frames, as the frameset includes crucial information, such as the
site identification and the navigation system to move within it.
- Many search engines do not index pages with frames.
That means your site will not be listed in the search engines where potential
customers can find it.
- The Back button cannot be used.
- The page cannot be added to My Favorites list, as only
the parent page is added, independently from any navigation in the page
contained in the frame.
- The page URL cannot be sent to a friend so they can see
it exactly as I do. As in the previous item, I would only be sending the
parent page URL.
- Often the page contained in the frame does not print
well. There are many problems with searches made within the sites.
- Older browsers do not support frames so they do not
display them.
- The site navigation system cannot always be shown to
the user. The frame areas are set independently from the size of the page
contained in the frame. Therefore, if a page is smaller than the size set,
space is being wasted in the frameset that could be given over to more
information for the user. If the page is larger, scrolling bars are
displayed.
- Frames display scrolling bars independent from the
frameset when the page contained is larger than the frame containing it.
Although it can be configured to prevent the bars from appearing, they are
usually displayed, or they do not show the page content completely within the
frame if the user has an unexpected screen configuration or changes the size
of the browser window. The consequences are:
- Users get confused and feel lost.
- Scrolling bars need space to appear in, so they are
often covering up page content and the user has to move constantly to read the
content of the page embedded in the frame.
- Users waste time using the scrolling bars to find the
content they want. Many users avoid using these bars and do not find the
content they are looking for.
My advice:
Avoid using frames as much as you can. Being correctly
listed in search engines is what makes the difference between having visits or
not.
The exception would be sites that do not need to be listed
in search engines, e.g.: Intranets. In these cases, special care must be taken
when designing and configuring the frames to avoid making users feel
uncomfortable or preventing them from getting to important
information.
Many of the concepts stated by Nielsen in an article he
wrote some years ago are still valid:
http://www.useit.com/alertbox/9612.html
References:
http://lois.co.uk/web/articles/frames.shtml
http://webmaster.harvard.edu/bestpractice/frames.html
http://www.designplace.org/tutorials.php?page=1&c_id=1