Should I Use iFrames in My Web Design?

At first glance, iFrames may look like a quick and easy hack for your website’s needs, but after weighing the pros and the cons, an iFrame is almost never the best solution.

An iFrame (introduced in HTML 4.0) is an in-line frame that can be placed anywhere on a web page, and is used to hold content. Navigation buttons can reside outside of the iframe and when clicked, only the content in the iFrame changes. An iFrame is a newer alternative to an HTML frameset or “regular frames”. Framesets share almost all of the disadvantages of iFrames and have many additional disadvantages.

Here is an example of an iFrame at work in a simple mockup design.

Reasons to stay away from iFrames
These are some of the most important reasons to stay away from iFrames. This list ignores accessibility or cross-browser compatibility problems that are also caused by iFrames. The points below are based on my views of the most important considerations in web design: search engine optimization, usability, consistency, and flexibility.

• Search engine optimization nightmare

First and foremost, using an iFrame makes it nearly impossible for Google or any other search engine to index your site efficiently. This alone should be reason enough to steer clear of iFrames.

Search engines send out robots to crawl websites, and when they find a page with an iFrame, the robot has no way to recognize the content inside. The content in your iFrame is seen as a black hole. If your content does get indexed, quite often it will only be the page that is meant to show up within an iFrame. When your site shows up in a search, the user clicks your link and only sees the content that is meant to be viewed inside an iFrame. The surrounding page is gone, and the user has no way to access navigation, or get to your other pages.

• Users have limited viewing options

Some users like to maximize their browser to make content areas large, some users keep their browser windows small. Since iFrames do not expand with the browser, flexibility is taken away from the user.

• Users cannot bookmark individual pages

When a bookmark is created for a page using iFrames for navigation, there is no way for the bookmark to load correct content into the iFrame. A bookmark to my demo iFrame page is going to load the default content no matter what content is in the iFrame when I create the bookmark.

• Printing yields unexpected results

When printing a page that contains an iFrame, only the visible content will be printed. If an iFrame has a scrollbar, and requires scrolling, a printout will not be able to show all of the data in the iFrame.

• Browser history can behave strangely

Because your browser only views an iFramed site as one page, and then loads different content into the iFrame, browser history may not log all your clicks as you would expect.

There are many reasons people give for using iFrames in their design. While there are a few legitimate uses (a site must load an external web service in an iFrame, or the iFrame is merely providing disclaimer text) most every time an iFrame is used, there is a better alternative.

The next article in this series will discuss common reasons why people choose to use iFrames in their design, and offer a user and search engine friendly alternative to each.