Thanks for joining me today as we take a deep dive into frameset – an early HTML technique for splitting browser windows into independent panels. Frames might seem ancient now, but they were key to laying out websites for years!
I want to give you the insider perspective on framesets so you can understand their purpose, see how they work, and importantly – learn why modern web design steer clears of them. There may even be a few relic websites still using frames that you encounter. So let‘s unravel this bit of web history together!
Briefing You On Frames – A Blast From the Past!
First thing‘s first – what exactly ARE html framesets? Well, before the days of fancy code frameworks and lightweight components, the only way to divide up a webpage was by literally splitting the window into separate scrollable frames.
These frames got introduced in the 1990s as part of the HTML 3.2 specification. They allowed loading multiple HTML documents together to create columns and rows of content on one page.
Prominent web designers like Lynda Weinman wrote at the time about how frames were ideal for:
"Having common navigational elements that remain static while various content frames refresh with new information"
So frames offered a nifty way to sandbox related content. And soon complex nested frame pages started popping up everywhere!
But even during the early frame craze, experts like Jakob Nielsen raised concerns about their impact on usability. And those concerns would only multiply over time…
But before we get to the bad stuff – let‘s quickly recap how these frameset things actually work under the hood!
Here‘s The Skinny on Frameset Code
The frameset itself is defined with the <frameset> tag situated between the opening <html> and <body> tags:
<html>
<frameset>
<!-- frames defined inside here-->
</frameset>
</html>You can set up rows and columns via the rows and cols attributes:
<frameset cols="25%, 75%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>This splits the window horizontally into two columns – with the first being 25% in width.
Within each frameset, individual <frames> point to the external HTML content:
The framed files can have their own <head> and <body> elements – allowing you to section up content and even reuse components across different pages.
And by nesting multiple framesets you could create pretty wild layouts!
| Frameset Attributes | Purpose |
|---|---|
| cols | Defines width of columns |
| rows | Defines height of rows |
| frameborder | Whether frames have borders |
| border | Sets thickness of border |
Early web developers went frame crazy with multi-column designs like these:
But in doing so they created fragile structures that would soon start to crumble…
Where Frames Went Wrong – A Cautionary Tale!
Frames seemed really cool for their time. So what happened? Well, as the web evolved – framesets began showing nasty limitations:
For Users:
- Links in one frame couldn‘t easily target content in another frame
- Browser history and bookmarks didn‘t work across frame boundaries
- On mobile devices frames just DON‘T work or display properly!
For Accessibility:
- Assistive tech like screen readers can‘t handle frame relationships
- Losing one frame breaks the whole content flow
- Frames simply fail compliance with modern standards like WCAG 2.1
For SEO:
- Search engine crawlers index frame content out of context
- Keywords and page titles get severely diluted in efficacy
Not only were these issues annoying – they were showstoppers for large audiences critical to any website‘s success.
Soon web pioneers were urging designers to move to better options. Industry leader Jeffrey Zeldman wrote in 2003:
"Frame-based sites failed the web by choking off content from search engines"
And the W3C was starting the long process of deprecating frames from web standards:
"Using frames damages usability and accessibility"
So much for frames! But we live and learn – so what better approaches can we take instead today?
Frame Friends, Meet Flexbox! Modern Layouts to the Rescue
We have fantastic tools at our disposal in 2023 to create versatile page layouts without hacky frames:
Flexible Box Layout (AKA Flexbox)
By applying display: flex to any container element we unlock ultra flexible responsive row and column alignments.
.container {
display: flex;
}CSS Grid
The Grid system gives us incredible control over 2-dimensional alignments without worrying about what device or browser users have.
Floating Elements
We can still float elements the old school way for basic alignments:
.left {
float: left;
width: 65%
}
.right {
float: right;
width: 35%
} And using box-sizing intelligently gives us way more predictable dimensions.
For any residual use cases like embedding dynamic third party widgets, iFrames remain solid:
<iframe src="map.html"> </iframe>The days of fractured framed sites are behind us friends. Rejoice in the freedom to create living breathing responsive pages!
We‘ve Come a Long Way Baby!
As I bring this guide to a close, I want to acknowlege we‘ve covered a LOT of ground around html framesets – from their peak popularity to their ultimate demise. I appreciate you sticking with me!
Hopefully you now feel equipped to understand frames references out in the digital wilderness. And avoid their pitfalls on any shiny new projects!
So to recap – use frames for educational purposes only. And tap into modern magic instead for building a seamless browsing experience. The web has so much more in store. Our journey has only begun!
Let me know if you have any other relic web questions. Until next time frame friends!
