Frames allow a website author to split a page into multiple panels, where each panel can show a different HTML page.
Several websites use frames so they have one HTML document that contains the header, shown in a frame at the top of the window, then a separate HTML document for the website navigation, shown in a frame to the left, with the remaining space on the right being a frame for the main HTML document.
With this setup, a website visitor can use a link in the navigation bar in the left frame, which then shows the relevant webpage in the right frame.
In the example, by splitting the whole page in to multiple files, it can make maintenance easier, as there is only one file that contains the code for the navigation bar, so if a new page needs to be added to the website, its just a matter of editing one file to effect the whole website.
Alternatively using a server side scripting language like PHP, or a feature like Server Side Includes (SSI) makes it possible for pages to include common files, like "nav.html", in the output.
For example, on this website, the navigation bar has been included on this page from a common file, this allows me to edit the navigation bar with just one file.
It can be said that with a framed website, the loading time for each page is improved, this is because each link only loads the pages content without the header and navigation bar, as these elements have already been loaded in a different frame.
While this is technically correct, the website author should also consider that when the visitor loads the website for the first time, they must download more files (in the example it would be 4 HTML files, 1 for the frameset). This will normally increase the loading time for the first page, which can give the wrong impression of how the rest of the website will take to load.
Before making a decision to use frames, the website author should look into how much smaller pages would be if they were split between frames. Most of the time it is barley a couple of KB - typically the time to transfer this small amount of data is trivial when the whole page size and time required to establish a connection with the server is considered.
With a small website that has a consistent (static) navigation bar, using a frame might help (as explained above), but as soon as the website gets big enough to require the use of sections, the navigation bar will probably be updated to only show relevant links. For example, only linking to the main website sections and to the pages within the current section the visitor is in.
As soon as a dynamic navigation bar is create, then it can almost guaranteed that there will be synchronisation problems. This is where the navigation bar on the left frame does not match up with the main content frame.
This synchronisation problem usually crops up because the two frames are independent of each other.
As an example, if a website visitor is in section A of the website, then clicks on a link to get to section B, the navigation bar should begin to re-load (or change with JavaScript) to show the relevant links for section B. If the website visitor is on a very slow computer or internet connection, or there very quick with the mouse, they could jump to section C before the navigation bar has finished being updated. Now the visitor can see a section C page, while the navigation bar is only showing the links for section B.
This is one possible problem, which some website authors believe can be overcome with excessive use of JavaScript. But as the site develops, the website author will get more into the possible problems that the visitors find themselves in and begin to realise that they cannot solve every synchronisation problem.
If the server is very busy, the visitors internet connection is slow or their computer is having problems, it is possible that a frame fails to load. When this happens, most browsers will either show a white square or an error message in that frame. This can be a major problem if the frame should show the navigation bar.
As a website visitor, how do you overcome this? well most visitors don't know about features like the "reload frame" found in some browsers. Instead they will either think the website is broken and give up, or they will try to refresh the page using the big "refresh" button provided by their browser, which leads us onto...
When using a website with frames, like the example setup described above, if the visitor was to press their browsers refresh button, it will typically forget what page the visitor is currently viewing and throw them back to the page they saw then they first loaded the website.
Some website authors have tried to overcome this by setting a cookie that remembers the last page loaded. The idea is that if the visitor loads the frameset again, and they have a cookie that denotes the last page they viewed, the frameset will show that page instead of the default page. But this seems to confuse visitors even more, as if they open a new browser window (or tab) and go to the website again, they expect to see the homepage first.
Continuing with the example setup, as the visitor moves though the website, they should notice that the address in the address bar does not change. Some website authors think this "looks nice" as it typically only shows the domain name, with no messy folder/file address.
But how can the websites author expect the websites visitor to bookmark a page they find interesting? Most visitors will use the "bookmark this page" feature in their browser (the feature they have used for every bookmark), then they move on. Later, when they want to use the bookmark, it will not load the page they were expecting (normally it loads the homepage instead), they will either spend the time trying to find that page again, or they will delete the bookmark and give up.
The same is true if the visitor wants to quickly tell a friend about something they think might be interesting. The visitor copies the URL from the address bar and has to send it to their friend with instructions to find the relevant page - although this also requires the visitor to remember how they got to that page.
Some website authors provide a bit of text on each page to give the URL for the current page. Somehow they are expecting the visitors to be looking for this text and then they expect the visitor to know what to do with it. Normally doing this is a waste of time, as most visitors don't look for special instructions on how to bookmark a page.
Nearly every search engine can index the content of a website which uses frames. So no problem there, however when a potential visitor does a search and a websites page is considered relevant, the visitor will just see that page. With the example frame setup explained above, they will not see the page header or navigation bar.
Some website authors have found ways to use JavaScript on each page to detect if the page has been loaded in a frame. If that JavaScript cannot find the frame, it will reload the page with the frames included. Doing this can be annoying for the visitor as they see the content, then it disappears as its put into a frame (drastically increasing the load time).
Using frames is possible and can be used to good effect, but as the website grows the websites author will see problems that can only be solved with partial solutions, which in turn have their own problems.
So if you want to build a website with frames, you should consider if they are really useful. Most of the time if you can avoid them, then don't use them.
Any feedback would be greatly appreciated, I don't include comments due to the admin time required, but if you email me, I will reply and make appropriate updates. Also, if you would like to take a copy of this article, please read the terms this article is released under. This article was originally written Friday 24th November 2006.