What is a frame or a frameset? According to Wikipedia(2016),” a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements that go in a frame may or may not come from the same website as the other elements of content on display.” In a post by Rouse(2005), she stated that they were “originally created by Netscape as an HTML extension and now part of the HTML 4.0.” Figure 1.0 Frames use client-side coding, rather than server-side execution.
Figure 1.0 illustrating 3 Frames – header, navigation and content(Florio, 1999)
When frames were first introduced, it gave rise to dynamic content. It gave developers the ability to create websites with dynamic and static content much faster, Figure 1.1, which was also known as templating. They were able to create a page that contained the header, the navigation, the body, and the footer all separately, then by use of a Frame, bring them all together on one page. If changes were needed to a navigation or to the footer or any aspect of the static content, rather than making changes throughout the entire website, they could simply make one change and it replicates throughout all pages thus reducing code maintenance.
This new-found technique even though it provided the above-mentioned merits, it’s weaknesses far outweighed them. With the implementation of Frames came printing problems, search engine problems, bookmarking problems, SEO problems, navigation, and real estate problems just to name a few.
Figure 1.1 Frameset – Implementation(O’Reilly, n.d)
|SEO||Typically frames load the website as a single page, thus making the search engines think that the website has only one page and that it never changes. Each page on your website will not be an index, thus, SEO would not work in your favour. Thus, visitors will enter the site out of context, which means that they may not have access to the navigational element.|
|Bookmarking||Booking a page is a nightmare because the URL never changes in the browser, it’s more difficult to bookmark or link to internal pages. The bookmark only will lead back to the default or home page, not the one on which you had created the bookmark.|
|Search Engine||If your website as a complex frame set up, search engines such as Google or Bing may not be able to access every page on your website. “Google supports frames and iframes to the extent that it can. Frames can cause problems for search engines because they don’t correspond to the conceptual model of the web.”(Google, n.d)|
|Printing||Browser would often enable you to print one of the pages, or have everything crumbled together in one big mess.|
|Real Estate||Consider the evolution of smart mobile devices and the mechanism by which they connect to the internet and view webpages. Frames do not allow for such flexibility for these devices. The width of each displayed frame is set and thus, will not conform to the display resolution of these devices, rendering the website hard to navigate or unusable.|
|Navigation||Search engines do not understand the frames tag, therefore, there is no way for it to know how to navigate these frames or where to find the navigational instructions. There is a workaround, by way create the problem in the first place.|
I am of the impression, that although this technique was made obsolete by W3C in HTML5, it gave rise to the earliest implementation of dynamically linking repeated content. As technology evolves and new developments are made, the purposes for which frames were used are indeed becoming obsolete. However, while frames and framesets are slowly dying, the iframe also know as inline frame remains useful, the major difference being that iframes are used to embed applications whilst frames are used for templating.
Rather than use them, here are some alternatives for FRAMES:
- Cascading Style Sheets (CSS) scrollable elements can be set independently of each other
- Server-Side Includes and PHP Includes allowed shared content to be edited once and automatically included on every page such as navigation, header, and footer.
- AJAX allows for dynamic display within a page of content by server-side fetching.
Although the list above might be a learning curve, at the end of the day it will be worth the effort. In an article by Shannon(2012), “framed pages do not behave the same as normal HTML pages, and as such lead to confusion and awkwardness.”. Therefore, if you have or have not started; do not use FRAMES in your Web Project, they cause more harm than good, it has though the technology is moving forward however you decide to remain in reverse.
Google (n.d) Frames, Available at: https://support.google.com/webmasters/answer/34445?hl=en (Accessed: June 5, 2016).
Wikipedia (2016) Framing (World Wide Web), Available at: https://en.wikipedia.org/wiki/Framing_(World_Wide_Web) (Accessed: June 5, 2016).
Rouse, M. (2005) frames (web site), Available at: http://searchsoa.techtarget.com/definition/frames (Accessed: June 5, 2016).
Shannon, R. (2012) Frames: Good or Bad?, Available at: http://www.yourhtmlsource.com/frames/goodorbad.html (Accessed: June 5, 2016).
O’Reilly (n.d) Basic Frameset Structure, Available at: http://docstore.mik.ua/orelly/web2/wdesign/ch14_03.htm (Accessed: June 5, 2016).
Florio, S. (1999) Domino Designer R5: Framesets, Available at: http://www.ibm.com/developerworks/lotus/library/ls-Designer_R5_Framesets/ (Accessed: June 5, 2016).