Greetings friend! Welcome to my guide explaining the past and future of HTML framesets. While once essential for web layouts, framesets have faded from use due to major accessibility flaws.
Fortunately modern CSS makes it easier than ever to build complex, responsive designs without framesets. By the end, you‘ll understand the technical details, downsides, and alternatives to obsolete frameset code. Let‘s dive in!
What Purpose Did Framesets Originally Serve?
To understand framesets, we first need to travel back to early web design standards. In January 1997, the HTML 3.2 specification introduced the “ tag for splitting browser windows into independent sections called frames [1].
This allowed loading separate HTML documents into each frame to create multi-column page layouts. By 1998, most popular browsers like Internet Explorer and Netscape supported framesets.
Diagram showing two frame columns with inline frame contents.
The figure above illustrates a simple frameset structure. The container tag uses thecolsattribute to define percentages for two vertical columns. Then each tag loads additional HTML content files into the frames.
This was transformational compared to the mostly single column layouts used previously!
But over time, the many downsides of framesets emerged…
Framesets – A Technical Explanation
Before we critique frames, let‘s explore what‘s happening technically in more detail.
The “ acts as a container that splits the browser window into separate scrolling regions [2]. Here are key attributes for configuring the rows and columns:
| Attribute | Description |
|---|---|
| cols | Defines widths of columns using %, pixels or wildcard * sizes |
| rows | Defines heights of rows using formats like above |
| border | Specifies thickness of border between frames |
| framespacing | Space between frames in pixels |
Within each frame, additional HTML documents would load to display content:
| Attribute | Description |
|---|---|
| src | URL of the document to load in frame |
| name | Unique identifier for targeting frames |
| marginwidth | Space between frame borders and content |
| scrolling | Values yes, no, auto to show scrollbars |
For example:
<frameset cols="25%,*,200px">
<frame src="frame1.html" name="leftcol">
<frame src="frame2.html" name="main">
<frame src="frame3.html" name="right">
</frameset>This creates a 3 column layout with the first column 25% wide, middle column taking up remaining space, and final 200 pixel wide column on the right.
The concept seems simple enough in hindsight. But as the web evolved, deep flaws in this approach emerged.
The Downfall of Framesets
While many early web designers embraced framesets, by the early 2000s major drawbacks surfaced:
Accessibility – Frames created obstacles for assistive technologies like screen readers and keyboard navigation [3].
Usability – Separate page elements divided across frames caused confusing experiences [4].
Responsiveness – Framesets broke layouts on smaller mobile screens requiring media queries [5].
SEO – Search engines had trouble crawling and indexing content locked in frames [6].
Linkability – Users couldn‘t bookmark specific sections within discrete frame documents [7].
Statistics quantified the scale of these problems. One study in 2003 found over 85% of websites with frames had accessibility flaws [8]. And a 2000 survey saw designers ranking frames as the 3rd most overused inefficient web design element [9].
With both quantitative data and expert analysis stacked against frames, they fell further out of favor. When HTML5 standards emerged in 2014, framesets were classified as obsolete [10]. All major browsers dropped support.
Better Alternatives for Layouts
Fortunately, open web standards evolved with powerful technologies providing safer alternatives to frames.
Here are some top responsive layout options:
Divs + CSS
<div class="column" style="width:25%; float:left">
Column 1 Content
</div>
<div class="column" style="width:75%; float:left">
Column 2 Content
</div> CSS Grid
<div class="grid">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
</div>.grid {
display: grid;
grid-template-columns: 25% 75%;
} Flexbox
.flex-container {
display: flex;
flex-direction: row;
}These modern layout methods give full control over responsive designs without frameset drawbacks!
Iframes remain useful for limited embedded content from external sources. But any iframe accessibility considerations still apply depending on your implementation [11].
Framesets Remain In The Past
While revolutionary in their day, framesets ultimately created more web design problems than they solved. Restrictive specs also hindered early browser competition and innovation [12].
Fortunately open standards and graceful deprecation ensures the web continues evolving for the better. The flexibility of CSS now provides countless layout options without frameset downsides.
So say goodbye to messy frame code, my friend! I hope you enjoyed exploring their history and technical details along with better modern practices. Let me know if you have any other web technology topics you would like to see an in-depth guide on!
