Web Style Guide: Part 2

<BODY BGCOLOR="#000000" TEXT="#c0c0c0" LINK="#FFFF00" VLINK="#808080"> <TABLE WIDTH="400" BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TR> <TD> <P ALIGN="CENTER"><IMG SRC="../images/mhb1.jpg" ALT="Magic Horizons Title Graphic" ALIGN="BOTTOM" WIDTH="398" HEIGHT="162"></P> <H2>Proper Use Of Frames</H2> <P>This web site makes extensive use of the frames extension to HTML. Frames were first implemented in April of 1996, were used for about 3 months, and then were generally abandoned as being impractical.</P> <P>Frames offer many advantages, and through careful application, their disadvantages can be circumvented.</P> <HR> <DL> <DT><A NAME="toc"></A><A HREF="#problems">Problems With Frames</A></DT> <DT><A HREF="#advantages">Advantages Of Frames</A></DT> <DT><A HREF="#technical" TARGET="Main">Frame Technical Information</A></DT> <DT><A HREF="#trouble" TARGET="Main">Troubleshooting Frames</A></DT></DL> <HR> <P><A NAME="problems"></A></P> <H4>Problems With Frames </H4> <P>Frames, if not done correctly, present numerous usability problems. All of these problems can be solved by using the TARGET=_top attribute for the <A> tag.</P> <P>The first usability problem is that many framed sites render your browser's back button useless. This is caused by failing to use the TARGET="_top" attribute in any outbound links. If this isn't done, any frames in the site that you look at will not be recorded by the history file in your browser -- only the first page of the site that you looked at will be stored. </P> <P>The second problem that frames cause is an outgrowth of the first. Because calling up documents in frames doesn't change the URL of the document, you can't bookmark any pages at a framed site, except the first one that you see. This can cause incredible amounts of user frustration. </P> <P>The third problem is that frames require strange clicking patterns to use links in the "expected" way. Most users don't think about whether they need to click and hold, or right-click a link, they just click it. If they're in a framed document, and are clicking on a link to a document that's at another site that doesn't use frames, or worse yet, uses a different set of frames, that document will appear in the selected frame of the document they're trying to get out of. This can be extremely confusing to users. </P> <HR> <P><FONT SIZE="5"><EM> All of these problems can be solved by using the TARGET=_top attribute for the <A> tag.</EM></FONT></P> <HR> <P><A NAME="advantages"></A></P> <H4>Advantages Of Frames </H4> <P>The first advantage of frames is usability. This site uses frames to keep a navigational tool handy at all times for the end user. Another use of frames is to show a pair of documents that need to be compared at different points, as CNN did for their political coverage. This is also useful for showing revisions between drafts on an intranet project.</P> <P>The second advantage of frames relies on the use of the <NOFRAMES> tags. <NOFRAMES> can be used to simply put a links to the SRC document called for in the <FRAME> tags, but this is, ultimately, tacky.</P> <P>A better use for the space created by the <NOFRAMES> tag is to put a duplicate copy of the document called for in the primary viewing area of the document. This way, a user with a non-frames capable browser will never know the frames are there, making the transition completely transparent. It's important to keep both versions of the document exactly in synch.</P> <P>For example, each page on this web site has two files, named <document name>.html and <document name>_main.html. This file is style2.html and style2_main.html, for example. The file style2.html has the frameset attributes, and the text you're reading now stored in the NOFRAMES tags. The file style2_main.html just has the text you're reading. Keeping two copies of the documents is more work, but the increase in navigability without burning bridges to older browsers is worth it.</P> <HR> <P><FONT SIZE="5"><EM>Keeping two copies of the documents is more work, but the increase in navigability without burning bridges to older browsers is worth it.</EM></FONT></P> <HR> <P>Another useful trick gained from using frames is the ability to keep two distinct versions of a document. For example, many older browsers can't handle tables or image maps. By putting the non-tables source in the <NOFRAMES> space, you can exploit the fact that any browser that can't see tables can't see frames either, avoid frustrating users. An example of this technique is used in the <A HREF="../info/schedule.html" TARGET="_top">schedule</A> for upcoming games on this website.</P> <P>As a parenthetical comment, using this technique as a way to avoid putting a link list under a server-side image map is not recommended. Many users operate with their graphics display options turned off to increase speed.</P> <H4><A NAME="technical"></A>Frame Technical Information</H4> <P>Frames require the following HTML tags:</P> <DL> <DT><A HREF="#frameset" TARGET="Main"><FRAMESET></A></DT> <DT><A HREF="#frame" TARGET="Main"><FRAME></A></DT> <DT><A HREF="#noframes" TARGET="Main"><NOFRAMES></A></DT> <DT><A HREF="#anchor" TARGET="Main"><A></A></DT></DL> <P>The <A NAME="frameset"></A><FRAMESET> tag tells the browser that there are frames on this web page. Attributes used with the tags define how the browser window will be divided. This document defines the frames as collumns, and sets the first (left-hand) collumn at 80% of the browser window, and the second (right-hand) collumn at 20% of the browser window.</P> <P>The<A NAME="frame"></A><FRAME> tag needs to be used for each of the collumns or rows used by the document. The SRC attribute of this tag defines which document is pulled up into the frame. The document pulled up by the SRC attribute of the <FRAME> tag cannot have the <FRAMESET> tags in it. Because the <FRAME> SRC attribute pulls up a different document from the one that the browser is actually viewing, several avenues for confusion can result, and several advantages can be exploited. </P> <P>Because of the use of the TARGET attribute used in the <A> tag, it's a good idea to use the NAME attribute in the <FRAME> tag to name the frames. The large frame is named "Main", and the smaller frame is named "Sidebar" on all of the documents of this web site.</P> <P>This web site uses the convention of naming the source document <filename>.html, and the source document as <filename>_main.html. Thus, this document is style2.html. The SRC pulled up into the Main frame by the <FRAME> tag is style2_main.html. The sidebar never changes and is named navigation_sidebar.html.</P> <HR> <P><FONT SIZE="5"><EM>Because the <FRAME> SRC attribute pulls up a different document from the one that the browser is actually viewing, several avenues for confusion can result, and several advantages can be exploited. </EM></FONT></P> <HR> <P>The next tag used to implement frames is the <A NAME="noframes"></A><NOFRAMES> tag. The <NOFRAMES> tag encapsulates the <BODY> element of the HTML document. What this allows you to do is enter content that will be seen by browsers that can't resolve frames. This allows you some unexpected flexibility with frames documents.</P> <P>The last tag used for frames is the <A NAME="anchor"></A><A> tag, or, more specifically, the TARGET attribute added to it. There are two ways to use the TARGET attribute with frames. The first is to target a frame that's been named using the NAME attribute of the <FRAME> tag. Thus, you could target a link to the main frame of a document, and clicking on that link will pull that document up in the main frame. This is particularly useful if you want to ensure that the document always appears in the appropriate frame.</P> <P>The second way to use the TARGET attribute is the most important. There are four special strings that can be used with the TARGET parameter: <A HREF="#_self" TARGET="Main">_self</A>, <A HREF="#_top" TARGET="Main">_top</A>, <A HREF="#_blank" TARGET="Main">_blank</A>, and <A HREF="#_parent" TARGET="Main">_parent</A>.</P> <P><A NAME="_self"></A>_self will open the new document in the frame that the current document is in. This can cause problems if the new document also has a <FRAMESET>, as it will further subdivide the current browser window. I have yet to find a use for this string.</P> <P><A NAME="_top"></A>_top is the single most important TARGET that you can use for your links. _top tells the browser to look for the <FRAMESET> of the new document and use it instead of the one in the document you're currently in. Any link that goes to a page outside of your site should have _top as the TARGET.</P> <P><A NAME="_blank"></A> _blank will open up a new browser window for pages hit with that link. This is useful in several contexts, such as pages that are meant to compare two things, or to provide a quick reference. There is currently no target you can put on a link that will <EM>close</EM> a browser session, which makes this one tricky to use. (If you have five links with this target, and someone visits all five links, they'll end up with six browser sessions running, which can crash some systems.)</P> <P><A NAME="_parent"></A>_parent will tell your browser to condense the <FRAMESET> of the current document to one frame, and to open the new document there. In general, _top is a safer bet.</P> <HR> <P><FONT SIZE="5"><EM>Any link that goes to a page outside of your site should have _top as the target.</EM></FONT></P> <HR> <P>This web site uses _top as the default target on all links, with two exceptions:</P> <P>Links that are internal to a page (such as the ones from the table of contents at the top of this document to the subject headers). Internal links are targeted to Main to avoid the annoyances of reloading the document constantly.</P> <P>Links that go to named targets in different documents are TARGETed to Main as well. Note that you will need to point the HREF in this instance to the corresponding document in the pair. For example, a link to fozbot.html from frobozz.html would also need a link to fozbot_main.html from frobozz_main.html. </P> <H4><A NAME="trouble"></A>Troubleshooting Frames </H4> <DL> <DT><EM>I copied one of the documents to use as a template. Now, when I try loading it to test it, the new document that I made only displays the one that I was originally using as a template.</EM></DT> <DD>This is caused by not updating the FRAME SRC attribute in the <FRAMESET> tag. Make sure that it's pointing to <newdocument>_main.html, not <olddocument>_main.html. (This one caught me for two days before I remembered it.) While you're at it, make sure that the document title attribute in the <HEAD> tag is accurate.</DD> <DT><EM>When I test the new frames document, I get the sidebar repeated twice. If I jump back, and then go back to it, the sidebar gets repeated multiple times. What gives?</EM></DT> <DD>This is caused by forgetting to put _top as the TARGET of the link.</DD> <DT><EM>When I put in a named link to a named target that's not in the same document, such as going from document1.html to document2.html#magic, the link only pulls up the top of the page.</EM></DT> <DD>You'll need to put a link from document1_main.html to document2_main.html#magic, setting the TARGET to Main. </DD></DL> <DIV ALIGN="CENTER"> <TABLE BORDER="0" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0"> <TR> <TD><A HREF="style1.html" TARGET="_top"><IMG SRC="../images/part1n.jpg" ALT="[Part 1]" BORDER="0" WIDTH="96" HEIGHT="41"></A></TD> <TD><A HREF="style2.html" TARGET="_top"><IMG SRC="../images/part2g.jpg" ALT="[Part 2]" BORDER="0" WIDTH="96" HEIGHT="41"></A></TD> <TD><A HREF="style3.html" TARGET="_top"><IMG SRC="../images/part3n.jpg" ALT="[Part 3]" BORDER="0" WIDTH="96" HEIGHT="41"></A></TD> <TD><A HREF="style4.html" TARGET="_top"><IMG SRC="../images/part4n.jpg" ALT="[Part 4]" BORDER="0" WIDTH="96" HEIGHT="41"></A></TD></TR></TABLE></DIV> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TR> <TD><A><IMG SRC="../images/left_h.jpg" ALT="Left End Of Scroll Bar" WIDTH="32" HEIGHT="116"></A></TD> <TD><A HREF="../info/info_toc.html" TARGET="_top"><IMG SRC="../images/info_h_n.jpg" ALT="[Logistics]" ALIGN="BOTTOM" BORDER="0" WIDTH="45" HEIGHT="116" NAME="info"></A></TD> <TD><A HREF="../game/game_toc.html" TARGET="_top"><IMG SRC="../images/game_h_n.jpg" ALT="[Game Info]" ALIGN="BOTTOM" BORDER="0" WIDTH="60" HEIGHT="116" NAME="game"></A></TD> <TD><A HREF="../misc/misc_toc.html" TARGET="_top"><IMG SRC="../images/misc_h_n.jpg" ALT="[Miscellaneous Information]" ALIGN="BOTTOM" BORDER="0" WIDTH="62" HEIGHT="116" NAME="misc"></A></TD> <TD><A HREF="../faq.html" TARGET="_top"><IMG SRC="../images/faq_h_n.jpg" ALT="[Frequently Asked Questions]" BORDER="0" WIDTH="58" HEIGHT="116" NAME="faq"></A></TD> <TD><A HREF="../new.html" TARGET="_top"><IMG SRC="../images/new_h_n.jpg" ALT="[What's New]" ALIGN="BOTTOM" BORDER="0" WIDTH="52" HEIGHT="116" NAME="whatsNew"></A></TD> <TD><A HREF="../index.html" TARGET="_top"><IMG SRC="../images/home_h_n.jpg" ALT="[Magic Horizons Home Page]" ALIGN="BOTTOM" BORDER="0" WIDTH="59" HEIGHT="116" NAME="home"></A></TD> <TD><IMG SRC="../images/right_h.jpg" ALT="Right End Of Scroll Bar" WIDTH="22" HEIGHT="116"></TD></TR></TABLE> <P>Problems with the page? Email <a HREF="mailto:burnside@itis.com">Ken Burnside</a>.</P></TD></TR></TABLE></BODY>