Template 4 Frames: Persistent Navigation with Frameset Layout
Template 4 Frames produces a frameset layout with two panels: a narrow navigation frame on the left and a wider content frame that fills the rest of the window. The navigation frame stays fixed in place as the reader navigates between pages. Only the content frame refreshes. That behavior, a locked nav panel alongside a scrolling content area, is what this template is designed to deliver, and it is something that table-based or single-file layouts cannot replicate without JavaScript.
Template Concept
The frameset approach splits the browser window into independent HTML files. The outer container is the frameset file, which defines how the window divides and which HTML file loads into each region. Template 4 Frames uses a vertical split: the left frame loads your navigation file, and the right frame loads your content pages.
The key behavior is persistence. When a visitor clicks a link in the left nav frame, that link targets the right content frame. The nav frame does not reload, flash, or change position. The reader sees the same navigation list throughout their entire visit, with the content beside it changing on each click. For documentation sites, reference hubs, and any site where the user moves between many pages in a session, this is a meaningful usability gain over a nav bar that disappears and reappears on every page load.
DFM2HTML generates all three files in the correct structure when you use Template 4 Frames: the frameset container, the nav frame HTML file, and the content page template. You edit the nav file once, and that single edit is reflected across every content page on the site.
Layout Anatomy
The frameset file contains no visible content of its own. Its job is to define the frame regions and specify the source files. It sets the column widths, typically expressed as a fixed pixel width for the nav frame and an asterisk wildcard for the content frame, which tells the browser to give the content frame all remaining space.
The left navigation frame is a standalone HTML file. It contains your nav links, a site logo or name if desired, and any supplementary elements you want permanently visible. Because this file loads once and stays in place, it should be lightweight. Heavy images or scripts in the nav frame will affect perceived load time on every page visit.
The content frame loads whichever page the visitor navigates to. Each content page is a standard HTML file with its own head section, body content, and internal structure. Content pages in a frames layout should not include a site-wide header or footer by default, because those structural elements are typically handled by the nav frame and the frameset itself. This keeps each content file focused on its own material.
The frameset also specifies border settings. Template 4 Frames defaults to a visible frame border with a defined width. You can edit this to a zero-width border for a borderless appearance, which makes the two panels look like a single unified page rather than two separate window regions. The visual effect is closer to what readers expect from modern two-column layouts.
HTML Framesets and Browser Compatibility
The HTML frameset element was deprecated in HTML5. It is not part of the current HTML specification, and modern browsers handle it through legacy compatibility modes rather than as a first-class supported feature.
In practice, all major desktop browsers in current versions continue to render frameset layouts correctly. Chrome, Firefox, Edge, and Safari all display Template 4 Frames output as intended on desktop. The compatibility concern is not that frames stop working in these browsers; they do not. The concern is around specific behaviors that have changed or been removed over time.
Frames and the browser history system do not interact cleanly. When a visitor uses the back button in a frames layout, the browser may navigate the frameset itself rather than the content inside it, or it may step back through content frame history while leaving the nav frame unchanged. This behavior is inconsistent across browsers and versions, and it can confuse visitors who expect the back button to work the way it does on standard single-file pages.
Search engine crawlers handle frames with varying degrees of accuracy. The content inside frames is indexable, but the relationship between the frameset container and the individual frame content pages is not always parsed correctly. A visitor arriving at a content page directly from a search result will see only that page, without the nav frame, unless you implement a noframes fallback or handle this case through server-side redirects.
Mobile browsers have reduced their support for frameset layouts. On iOS Safari and Chrome for Android, frameset layouts may display with incorrect proportions, may not allow independent scrolling of the two frames, or may collapse one frame entirely. If your site needs to function on mobile devices, Template 4 Frames is not the right choice. A two-column layout using Template 2 or a CSS-based approach gives you the visual structure without the mobile compatibility problems.
Where Template 4 Frames Works Well
Template 4 Frames is the right choice in specific circumstances: internal documentation sites accessed on desktop by a defined user group, offline HTML reference files packaged for local use, and sites designed to run in controlled environments where browser type and version are known in advance.
Technical reference documentation that users will consult repeatedly and navigate non-linearly is the strongest case. When someone is looking up command syntax, checking configuration options, or cross-referencing specifications, persistent navigation reduces the number of clicks required to stay oriented. The nav frame works as a persistent table of contents without requiring the reader to scroll back to the top of every page.
Local HTML help files, the kind that used to ship with software installations, were historically built on frameset structures for exactly this reason. If you are producing a self-contained HTML help package for offline use, Template 4 Frames is a natural fit.
Navigation Pattern
All navigation in Template 4 Frames happens through the left nav frame. Links in the nav file use a target attribute set to the name of the content frame, which tells the browser to load the linked page inside the right panel rather than replacing the entire frameset.
In DFM2HTML, the nav frame links are set up with the correct target attribute automatically when you use Template 4 Frames as your starting point. You edit the link text and destinations in the nav file, and the targeting behavior is already configured.
Current page indication in the nav frame requires manual editing. Because the nav file is a single static HTML file, it cannot automatically know which content page is currently loaded in the right frame. You can handle this by bolding or coloring the active link in the nav file for whichever page you are currently editing, and adjusting it when you update the site.
Responsive Concerns
As noted above, frameset layouts do not adapt well to small screen sizes. The fixed-width left column and independent scrolling regions are desktop behaviors that mobile browsers do not handle consistently. If your intended audience includes mobile visitors, use a non-frames layout instead.
On desktop, the frame width proportions set in the frameset file determine how much space the nav frame consumes. A 180 to 220 pixel nav frame works for text-only nav lists. If your nav includes icons or longer link text, you may need to increase this value. Changes to frame proportions affect all pages simultaneously because the frameset file controls the split.
Related Templates
For a more capable frame-based documentation layout with expandable navigation sections and a structure tuned for larger reference sites, Template 7 Frames adds depth to the frame approach with a sidebar designed for multi-level content hierarchies.
If you need two-column functionality without the frameset structure, for sites where mobile compatibility matters or where modern HTML compliance is required, Template 2 provides a sidebar and main column in a single HTML file using a table-based layout that works across all current browsers and devices.