Using Frames in Web Pages - Advantages and Disadvantages

<body> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td width="85%"> <p><a href="home.html" target="_top">Home</a> > <a href="helearn.html" target="_top">E-learning</a> > <a href="eindex1.html" target="_top">Web Site Design and Construction</a> ></p> </td> <td width="15%" valign="top"> <a href="#bottom"><script language="javascript" type="text/javascript" src="scripts/down.js"></script></a> </td> </tr></table> <hr /> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td width="85%"> <h1>Using Frames in Web Pages - Advantages and Disadvantages</h1> </td> <td width="15%" valign="top"> <a href="ej1e1-frames-advantages.html" target="top"><script language="javascript" type="text/javascript" src="scripts/pft.js"></script></a></td> </tr></table> <hr /> <table cellspacing="0" cellpadding="5" width="100%" border="0"> <tr> <td width="80%" valign="top"> <a name="subhead1"></a><br /><h2>The Decision to Use and Continue to Use Frames</h2> </td> <td width="20%"> <a href="#subhead2"><script language="javascript" type="text/javascript" src="scripts/next.js"></script></a><br /> </td> </tr></table> <hr />  <table cellspacing="0" cellpadding="5" width="100%" border="0"> <tr> <td width="80%" valign="top"> <h3>Frames - benefits and problems</h3> <p>This page is part of the <a href="ejourneydefn.html" onmouseover="window.status= 'E-journey - definition and explanation'; return true">e-journey</a> called <a href="eindex1.html" target="_top">Web Site Design and Construction (WSDC)</a>, an <a href="elearning-definition.html" onmouseover="window.status= 'E-learning - definition and explanation'; return true">e-learning</a> tutorial presented by <a href="hbackground.html" target="_top">Derek Stockley</a>.</p> <p>Jakob Nielsen has a very popular article, originally written in 1996, and revised in 1999, that describes the ten things not to do with web sites. It was hard to read his comments about frames, as I included them in my original web site design. More importantly, I retained them in the revised site design - twice! To see the frames pages on my site, select: <a href="frames.html" title="Provides a list of the main frames pages on this site.">Frames Pages</a>.</p> <h3>Frames - website structure and appearance</h3> <p>Frames and tables were explained in the: <a href="ej1d-web-programming.html"> Learning HTML and Other Programming Languages</a> section of this WSDC (Web Site Design and Construction) e-learning program.</p> <p> As you read this page, it should have three columns. If it doesn't, select: <a href="ej1e1-frames-advantages-h.html" target="_top">three column display</a>.</p> <p>Each page comprises three columns, but only two frames. The first or left column is one frame. The second frame contains two - the middle and right columns. The second frame basically consists of two tables to form the columns.</p> <h3>HTML frames and website design</h3> <p>Why did I make it so complicated?</p> <p>In my original web design, I wanted the left hand column to be my site contents. Wherever you wanted to go, it was there to select. It was always visible. You could select information about my services, background, articles, contact details, etc. very easily. To see the site, select: <a href="home.html" target="_blank">Home</a> (For ease of use, this will open a new page).</p> <p>The only exception was the Links Page which opened a new page. This is because there is nothing worse than looking at another site with only two thirds of the screen! This may have happened to you. You normally can't escape the site that referred you to the link. It makes the referral a waste of time. (You can insert JavaScript code in your page to escape this - do a search on "JavaScript" and "frames".)</p> <p>The same design rules are applied in the revised design. The left frame is the contents. For most of the Derek Stockley site, the left column is the site contents. When you enter the e-learning area, the left frame changes. It provides a contents list of the actual e-learning program you are using. For example, on the left you should now be seeing under the "Derek Stockley - Home" logo, the letters "WSDC" (short for Web Site Design and Construction) and the contents of this tutorial (introduction, road map, my personal journey, etc.) </p> <p>The right hand yellow column gives pointers to the content of the section you are now reading. It highlights the key content of the section and can be read prior to reading the section in detail. It is also a help for "skimmers".</p> <h3>Frames provide better site exploration</h3> <p>I believe this design using frames gives you better control of your exploration of this site. At most points, you should know where you are. In each e-journey, you know where you have been and are yet to go because the links are color coded. </p> <p>You can see where you have been by selecting the <img align="bottom" width="30" height="30" alt="Where have I been? To update the visited links, 'right click' on the left coloured area and select the 'refresh' option offerred." border="0" src="images/questionbutton.gif" /> button on the contents list. It refreshes the screen to ensure all visited pages are displayed.</p> <p>I do open a new window for each external link. When I do, you read: "This opens a new window. Please close it to return to this point. " Some writers state this is annoying. However, it allows a 100% screen, and secondly, it allows you to come back to the e-journey quickly - you just close the window. This is particularly important if you have viewed a number of pages on the link. If the link is good, you may go to ten or more pages. That's a lot of "back" buttons to go through.</p> <h3>Consequences of using frames</h3> <p><b>So what have been the consequences?</b></p> <h4><br />Frames and bookmarks</h4> <p>Sometimes you cannot bookmark a particular page, for example, the third page of an e-learning e-journey. However, you do bookmark the framed page which gives you the contents in the left-hand column.</p> <p>Alternatively, most pages have the icon: <img alt="Printer friendly/Bookmark version - select prior to printing/bookmarking to eliminate left column/frame (if present)." border="0" src="images/printerfriendly.gif" /></p> <p>You can also use this feature to bookmark a particular page without the left column. </p> <h4>Frames and search engine listings/results pages</h4> <p>I have not had a problem with search engines. Most index both the framed and unframed pages. Google has not had a problem. Each page is designed so that it is not an "orphan". Each unframed page has links at both the top and bottom of the page. This enables surfers to get to the framed site quickly.</p> <p>In fact, this page is a very popular entry page into my site because of search engine referrals! </p> <h4>Frames and website statistics</h4> <p><a href="web-statistics.html" title="Link to page explaining website statistics and the importance of analysing site traffic">Web statistics</a> programs that track site traffic can also have problems tracking "framed" traffic. Again, it can be overcome, as my comment in the previous paragraph shows. I still know what search terms you used to reach this page and how many "views" it received.</p> </td> <td width="20%" bgcolor="#fff000" valign="top"><div>Part of tutorial<br /><br />Site design decisions<br /><br />Three column structure<br /><br />Two frames<br /><br />Why?<br /><br />Site contents always visible<br /><br />E-learning review<br /><br />Also sub-section contents<br /><br />Search engine effect<br /><br />Web statistics</div></td></tr></table> <table cellspacing="0" cellpadding="5" width="100%" border="0"> <tr> <td width="80%" valign="top"> <h4><br />Frames and Adsense</h4> <p>Frames require monitoring, for example with services like Google's Adsense (TradeMark) program. On the top of this page are advertisements placed by Google Adsense. If everything is working correctly, you should be seeing adverts about web design and/or services, irrespective of whether or not you are "in a frame".</p> <p>After implementing Adsense, I had to obtain an extra piece of programming code from Google to fix a particular problem. It only occurred on framed pages, and only after the left menu had been "clicked" to go to a new page. The new or second page was showing public service ads which Adsense shows if it cannot match the page "content" to particular advertisements. As my pages are designed to be content rich (!!!!), this doesn't often occur on this website. The extra line of code fixed the "error".</p> <p>Google now automatically offer this code - just tick the appropriate box when designing the Adsense code.</p> <h3>Frames require more effort, but they are better!</h3> <p>Frames require more coding, but once it is coded and tested, it is relatively easy to use. I use the same format over and over again. I find it much easier than trying to "nest" tables.</p> <p>I still get frustrated when I have to scroll up and down on non-framed sites! I much prefer the ease and speed of moving about my site!</p> <p>So there you have it - a fairly long statement justifying my decision to use frames.</p> <h3>Would I use frames again?</h3> <p>If I was "starting from scratch" today, I might not use frames. CSS is getting better all the time as the browsers upgrade. </p> <p>Will I continue to use frames? <b>Probably yes!</b> My website is performing well (please tell me if it isn't!) and I do not see a need to restructure it at present.</p> <p>I've done two restructures already. They are a lot of work, and they do not alter the important thing - content!</p> <p>The popularity of this page, and the search terms used, strongly suggest that others are deeply interested in this issue. Please let me know your thoughts, even if it is only a quick note. If you think I should mention other points, please also let me know. </p> </td> <td width="20%" bgcolor="#fff000" valign="top"><div><br /><br />Frames and Adsense<br /><br />External links<br /><br />Feedback<br /><br />Justification<br /><br />Advantages and disadvantages<br /><br />Jakob Nielsen<br /><br /></div></td></tr></table> <table cellspacing="0" cellpadding="5" width="100%" border="0"> <tr> <td width="80%" valign="top"> <p>PLEASE NOTE: more useful comment follows this form. </p> <div class="form" > <br /> <script language="javascript" type="text/javascript" src="scripts/mailtofeedback.js"></script> FRAMES FEEDBACK <br /><br /> Let me know what you think!<br /><br /> Your privacy will be maintained. Your details will not be sold or rented to a third party.<br /><br /> <input type="hidden" name="Title" value="Frames Use Feedback" /> Name: <input type="text" name="Name" size="33" maxlength="40" /><br /> Email: <input type="text" name="Email" size="47" maxlength="50" /><br /><br /> How would you rate this information? <br /><br /> <input type="radio" name="Information Rating" value="Excellent" />Excellent <input type="radio" name="Information Rating" value="Very Good" />Very Good <input type="radio" name="Information Rating" value="Good" />Good <input type="radio" name="Information Rating" value="Satisfactory" />Satisfactory <input type="radio" name="Information Rating" value="Poor" />Poor <br /><br /> How would you rate the website? <br /><br /> <input type="radio" name="Website Rating" value="Excellent" />Excellent <input type="radio" name="Website Rating" value="Very Good" />Very Good<input type="radio" name="Website Rating" value="Good" />Good <input type="radio" name="Website Rating" value="Satisfactory" />Satisfactory <input type="radio" name="Website Rating" value="Poor" />Poor <br /><br /> General or other comments:<br /><textarea name="General comments" rows="4" cols="50" wrap="wrap"></textarea><br /><br /> You will receive an acknowledgement email within a few minutes of sending your feedback. <br /><br />Do you want an additional <b>personal </b>reply? <br /><br /> <input type="radio" name="Reply Requested" value="Yes" checked="checked" />Yes <input type="radio" name="Reply Requested" value="No" />No<br /><br /> When you press the "Submit Now" button, you may be advised that your email address is being transmitted, and the data is not encrypted - please press "OK". <br /><br /> <input type="submit" value="Submit Now" /> <input type="reset" value="Start Over" /> <br /><br />Thank you for your comments. A copy of this Email will be placed in your "sent" folder. <br /><br /> </div> <br /><br /> <p> If you the above form does not work, please send your feedback by email to: <script language="javascript" type="text/javascript" src="scripts/mailtoframes.js"></script></p> <p>I searched extensively to find someone to justify my decision to keep using frames. Luckily, many of the initial problems with frames have been overcome with the later versions of most browsers (Internet Explorer, etc.).</p> <p>Many writers still list frames as a bad design decision. They are incorrect. Careful reading indicates that they have put frames in the "too hard" basket. Yes, it takes some work, but if you know what you are doing, you can use frames efficiently and effectively.</p><p> They also have some SEO (Search Engine Optimisation) advantages.</p> <p>An article that supports my approach is: <a href="http://www.websitetips.com/info/frames.html" target="_blank"> To Frame or Not to Frame ...That is the Question</a>. (This will open a new page. Please close it to return to this point.)</p> <p>Another useful tutorial is: <a href="http://www.freewebmasterhelp.com/tutorials/framestables/index.htm" target="_blank"> Frames and Tables - Advantages and Disadvantages</a>. (This will open a new page. Please close it to return to this point.)</p> <p>Jakob Nielsen's 1996 and 1999 articles are very good. To read them, select: <a href="http://www.useit.com/alertbox/990502.html" target="_blank"> Jakob Nielsen's 1999 Article</a> - this is the revised article. A link to the original article is included as are links to related articles. (This will open a new page. Please close it to return to this point.)</p> <p>Good luck with your "framing".</p> <br /> </td> <td width="20%" bgcolor="#fff000" valign="top"> <a href="#top"><br /><br /><br /><script language="javascript" type="text/javascript" src="scripts/up.js"></script></a><br /> </td></tr></table> <hr />  <table cellspacing="0" cellpadding="5" width="100%" border="0"> <tr> <td width="80%"> <a name="subhead2"></a><br /><h2>What's next?</h2> </td> <td width="20%"> <a href="#top"><script language="javascript" type="text/javascript" src="scripts/up.js"></script></a><br /> </td> </tr></table> <hr /> <table cellspacing="0" cellpadding="5" width="100%" border="0"> <tr> <td width="100%" valign="top"> <p>To return to web design principles, please select: <a href="ej1e-good-web-design.html">Web Design</a></p> <p>If you now wish to reconsider hosting issues, please select: <a href="ej1b-web-design-tips.html">Service Provider and Hosting Issues</a></p> <p>If you now wish to review your HTML, etc., select: <a href="ej1c-web-hosting.html">Learning HTML and Other Programming Languages</a></p> <p>Alternatively, if you are now ready to proceed with your web development, see: <a href="ej1f-web-redevelopment.html">Web Development Processes</a></p> <p>To return to the index of this e-journey, see: <a href="ej1a-web-training.html">Web Design and Construction - Road Map</a></p> <p>To return to the Derek Stockley Home Page: <a href="index.html" title="Human Resources Development and Performance Management" target="_top">Derek Stockley Home Page</a></p> <script language="javascript" type="text/javascript" src="scripts/ejelpromo.js"></script> </td></tr></table> </body>