CSS Frames VS Standard HTML Frames

March 7th, 2006

Why not frames?

Nowadays frames are not quite as widespread as they used to be, which is good, since frames have quite a few drawbacks. You have probably heard of these drawbacks before:

  • The fundamental design of the Web is based on having Web pages as the atomic units of information represented by unique URLs. Frames break this unified model. With frames the atomic unit is a frame, not a Web page.
  • URLs doesn’t work: the address at the top of the browser no longer represents the information shown in the browser window.When a client want to send someone the URL of a document contained in a frameset they can’t just copy the address since that’s the frameset’s URL, not the Web page’s URL. I.e., the URL would refer to the initial state of the frameset.
  • Bookmarking is impossible in most browsers when frames are used. When you open the bookmark of a site using frames, it will refer to the initial state of the frameset.
  • There will also be problems for search engine spiders trying to index a site based on frames. Some of them, such as Lycos’s spider, index Web pages with error messages like “this site uses frames but your browser doesn’t support them”.
    Yes, there are ways around this, e.g. by embedding content into the <NOFRAMES> tag, but then one would have to manage the same content in two places in order to support both bots handling frames and those who don’t.
  • Most people surfing the Web use modern browser and most modern browsers handle frames correctly. However, there are still problems for these browsers when they got the URL to a framed site from a search in a search-engine since they are likely to reach documents that are taken out of context.
    There are ways around this too, e.g. by prevent viewing documents outside it’s frameset, or by storing information in the site’s robots file to let spiders know not to index child pages of the frameset. However, this would get the site less visitors.

Why frames – emulated frames?

One can use CSS to emulate frames. This is sometimes called “CSS frames”, “Emulated frames” or simply “Fake Frames”. There are different techniques to do this, where the most popular is to use position:fixed properties for some parts of the page, e.g. the header and footer. Since Internet Explorer doesn’t support position:fixed a workaround is needed. (You can read more on how to do this in the CSS Frames example page linked to at the bottom of this post).
CSS frames won’t get around all of the drawbacks with real frames, but close to. The main reason I choose to use CSS frames at some sites is that they allow you to always have pertinent information on the screen.

Conclusion

In my opinion it’s usually best not to use frames. However, if the site you are developing have alot of links and/or categories – such as an e-shop -, and if you like me feel that the functionality of frames is of importance, try to implement them with CSS frames.
To view an example of a CSS Frames implementation and read about how it can be implemented, see this page in the tutorial section of WebPelican:
CSS Frames Example/Tutorial

Entry Filed under: CSS

Bookmark with del.icio.us

Digg it?

10 Comments

  • 1  |  April 27th, 2006 at 1:47 am by mohamed

    It well help for me and colligue a wish youn please m sent to the tutoriayal

  • 2  |  April 27th, 2006 at 4:23 am by Martin Carlsson

    I am not sure what you are asking, Mohamed. If you are asking how to create CSS Frames, try the CSS Frames Example I linked to at the end of this post.

    To view the CSS code you can look at the source of the example page and copy the link to the CSS file, or you could just follow the the links to the CSS files provided in the page.
    The example page also contains a full explaination on how it works.

    Good luck and let me know if you have any questions

  • 3  |  May 26th, 2006 at 11:56 pm by Aussi

    I really like the CSS frames example , but I would wan’t to have a link menu in the sidebar. Any suggestions?

  • 4  |  May 29th, 2006 at 4:36 am by Martin

    Aussi said:
    I really like the CSS frames example , but I would wan’t to have a link menu in the sidebar. Any suggestions?

    Do you you wan’t the sidebar to be fixed and not scroll with the rest of the content? If that is the case should use the same technique used for making the header and the footer fixed.

    If not the case – i.e. if you wan’t the sidebar to scroll with the rest of the content – you could make a new div within the content div, lets say id=” left-content” or id=”sidebar”, and then float it to the left.

  • 5  |  May 30th, 2006 at 10:58 am by Tweaked

    Lets say you had links in the header (ex. menu) and wanted the links to open in the content section. How would this be done without reloading the header and footer each time like can frames do? I am asking this because I have a flash file in a header that I dont want reloaded each time.

  • 6  |  May 31st, 2006 at 3:41 am by Martin

    Tweaked, I belive the only way to do that would be with a client-side script, such as javascript, which would mean your site won’t work for about 10 -15% of the site visitors. Hence, not recommended if you wan’t your site to be accessible for as many as possible.

    Although I don’t know Flash my guess is that it should be possible to make Flash intros etc be executed only once for a visitor. The reloading will of course take place for each page visit, but it won’t be visible for the visitor.
    However, I know there are accessibility problems with Flash, both for visitors and search engines. It can look kind of cool and flashy, but if you wan’t high traffic and many visitors I don’t recommend Flash.

    You could of course use standard HTML frames(frameset) to prevent reloading, but this would – as I mentioned in the article – break the unified model of the Web where Web pages are the atomic units of information represented by a unique URL.

    Ok, if you wan’t to use Flash my suggestion is to let the Flash header and footer reload and use PHP or any other server-side scripting language to do includes for the header, content and footer.

  • 7  |  September 2nd, 2006 at 7:49 pm by LKBM

    The real benefit of frames is that you don’t reload all the nav controls and such each time you go somewhere on a website. What’s done here could probably be done better with overflow: scroll. Or, it would more closely resemble the behavior of frames in that the scroll bar and focus would be at the right place. Maybe not better.

  • 8  |  September 4th, 2006 at 12:45 pm by Martin

    LKBM:
    You are right about the reloading, the hole page has to be downloaded from the server – not just the content frame.
    However, if big images such as banners are placed in – for example – the header, those would be cached by visitor browsers, hence only downloaded once.
    If no images are placed in the header, or footer, the overhead would anyhow be minimal.

    Don’t really see what you mean by overflow:scroll.
    In the CSS Frames example I use overflow:auto for browsers that don’t support position:fixed, which in this case give the same result as overflow:scroll, but in other cases would mean that the scrollbars would be visible automatically only when the element in question is overflowed.

    As for the position of the scrollbar it’s at the far right because I overflowed the body selector.
    I could have used a overflowed content wrapper to get the scrollbar right by the content area and use overflow:hidden for the body selector, but so far I haven’t managed to get that technique to be as cross-browser friendly as the one used in the CSS Frames Example.

  • 9  |  August 21st, 2007 at 5:58 am by Rob

    Great Example, but could you just explain one thng! I tried this with less content than you actually have and in IE6 the content gets pushed 10-20 px to the right of the header and footers. The same thing happens when you minimize the browser and start to minimize the page horizontally it gets to a point where the header and footer are stuck to the side of the browser but the content stops short and has a margin of 10 – 20px (again in IE6 but not Moz). Can this be fixed?

  • 10  |  August 21st, 2007 at 6:09 am by Rob

    Just like to add the same thing happens in IE if you change all widths from 720px to 100%.

Links

Subscribe