One of our long time Email Marketing clients finally made a decision to break out of frames.

They run a popular membership site, with well over 10,000 pages, a members-only back office, member websites and a blog. The site has been around since 1997.

Unfortunately, because the site runs inside frames, Google report only 3 pages are included in its index.

The site is invisible to Yahoo and MSN as well.

If you're not sure why frames are such a bad idea, both from a usability standpoint and search engine marketing, just Google frames are bad. Or read the Top Ten Mistakes in Web Design (hint: Using frames is #1)

The site design followed a typical frameset layout:



Left frame: Site navigation menu
Top frame: Site logo
Main frame: The document body


To prevent users who direct linked to an internal page from ending up in a "frameless" version of the site, a JavaScript was embedded on every page to detect if the page is running inside frames. If not, the JavaScript would redirect the user to the framed version of the page.

The challenge

How can our client cost effectively switch a 10,000 pages framed site, to no frames, without investing countless hours in redesigning the site internal linking structure from scratch?

How to avoid having to redesign graphics, while maintaining the existing look & feel?

What about the member's back office that relies heavily on cookies and session handling?

Our Suggested Solution

Luckily the existing site was including a header.cfm and footer.cfm files on all pages (Document Body main frame).

The header.cfm included the HTML meta tags, page title, stylesheet and a few Javascripts.

The footer.cfm included the site copyright message and some quick links.

To break out of frames, all it takes is include the content of the left frame (navigation menu) and top frame (site logo) as part of header.cfm

The new frameless version of the site, features single files, embedding the content of the left navigation menu and site logo as part of the header.cfm file:



We created a basic prototype of the new design and were able to run the site in a frameless mode. In one instance an IFrame had to be used to keep contents from a third-party site, appear encapsulated within our client's design.

The member's back office should continue to function normally without any drastic changes, as we are maintaining the same file names and domain structure.

The benefits of a frameless site are countless.

Fortunately, as long as your framed site includes header/footer files, which is common practice among all professional web design companies, breaking out of frames should be a snap.

Please comment and let me know your thoughts about frames and any other tips you can share with our readers.

Thank you Adrian.

I had to take a site out of frames and I used a similar approach. Once I figured out how to do it, everything else was easy.

Frames?! Who the heck is still using frames?

There's a good introduction to Frames here:
http://www.w3.org/TR/html401/present/frames.html

Simple, but sounds like it could work