420 Design Blog
Unframing the Web (or why frames are bad)
11 Dec 2006 | Angie H
Back in the 90s, when the web was still growing and finding itself, a lot of designers and developers used frames when building websites. At the time, it seemed like a good idea. Frames were a way for webmasters (is that word still used?) to supposedly maintain sites more efficiently. Unfortunately they just made a mess of things.
How frames work
On "normal" sites, when you view a single web page, you're looking at a single page; a single HTML file 1. When you're on a single web page that uses frames however, you're actually looking at at least 3 different HTML files. Let's take a common website layout that is simply just a sidebar and the body content:
Seems simple enough, right? Here's what that one page is really made up of:
What you get is three different files to make up one file. So why is this practice bad? Let's break it down.
3 ≠ 1
Back in December of 1996, Jakob Nielsen wrote, "The fundamental design of the Web is based on having the page as the atomic unit of information, and the notion of the page permeates all aspects of the Web." In other words, each page is a single unit; 1 = 1. Frames completely break this fundamental principle by using 3 different files for each web page. While this seems trivial at first, it makes more sense when you think about bookmarking and URLs for web pages.
Bookmarking made impossible
Most of us who use the web bookmark specific web pages for later viewing. In order to do that a web page must have its own URL. With frames, that's nearly impossible.
Let's say you visit a site called WidgetsAndThings.com, and you really want to save a particular page for later viewing. On a frames-based website every single page has the exact same URL: widgetsandthings.com It doesn't ever vary. So when you bookmark it, you get taken straight to the site's home page instead of the product page you initially wanted. On a "normal" website, however, you might get something like widgetsandthings.com/products/areallycoolproduct.html Bookmarking that takes you right where you want to go.
Accessibility thrown out the window
One major component of modern-day web development is accessibility; making sites accessible to the widest audience possible, including those on PDAs, web-enabled cell phones and folks with disabilities who use specific software to browse the web. Frames severely hurt the accessibility of a site. This is due to the complexity of frames. It makes navigation much more difficult in a non-standard web browser, such as screen readers .
Usability gets thrown out too
Usability greatly suffers with frames-based sites too. Because the navigation of a frames-based site is almost always controlled by a separate, static file, it is nearly impossible to provide visual cues to the user of where one is in the hierarchy of the site. For example, on this site's navigation, there's an orange triangle pointing at the section you're currently on (along with the text being orange too). If this site were built using frames, that kind of subtle but extremely useful information would not be possible to do. That means a less intuitive, harder to use or understand website.
Ineffective search engine ranking/results
While it's possible for search engines to crawl and index frames-based sites, the complexity of having to go through multiple files will almost always result in poor ranking. Even if a site of this nature gets ranked decently, the search engine will most often list the individual file that contains all the content. So if a user clicks on that particular search result, there's no accompanying navigation file to let them know where they are or how to get to other parts of the site. There goes another prospect off to a competitor's website.
Other considerations
In addition to the above, there are other reasons frames-based websites aren't a good idea for any site:
- Some browsers (especially older versions) can't print framed pages correctly
- To make up for its shortcomings, many workarounds are required that inevitably mean more work and development time, which means more money out of your pocket, especially for maintenance.
- More files means more bandwidth or data transfer. For some of you, that means more money shelled out.
- Lost search engine referrals.
So can frames ever be useful? Sure, on non-public websites, or web applications such as email programs. But for the most part, frames cause far more problems than they solve and should be avoided entirely.
- For those of you familiar with web development, you'll of course know that this is an oversimplification if you use server side includes. ↩