Template 1: Single Column Page Layout in DFM2HTML
Template 1 is the simplest structural option in the DFM2HTML library. It produces a single column of content centered on the page, with no sidebar, no persistent navigation frame, and no multi-region split. Everything the reader sees lives in one continuous vertical flow. That simplicity is exactly what makes it useful for a specific category of site.
Template Concept
The idea behind Template 1 is to remove every structural decision that does not serve the content itself. There is no competing column pulling attention sideways. There is no frame border separating a nav panel from the reading area. The page is just a header, a content block, and a footer, arranged in a single line from top to bottom.
This layout is not a compromise or a stripped-down version of something more capable. It is the right tool for a particular type of project: one where the reader needs to focus on text, and where the navigation hierarchy is shallow enough that a simple top or inline nav handles it without requiring a dedicated sidebar. Many of the most readable sites on the internet use this structure because it scales cleanly to any content length and introduces no visual noise alongside the writing.
In DFM2HTML, Template 1 is the recommended starting point for tutorials, documentation articles, long-form product descriptions, and any page that prioritizes reading over scanning.
Layout Anatomy
The layout consists of three regions stacked vertically. The header region sits at the top and contains your site identity, whether that is a logo, a site name in text form, or a banner image. Below the header is the main content region, which occupies the full usable width of the page within the defined max-width container. The footer closes the page at the bottom.
Inside the content region, you have full control over the internal structure. You can divide the content into sections using headings, insert images inline with the text, or use the editor's table tools to create a simple data display. None of that internal structure is imposed by the template itself. Template 1 just gives you the container; what goes inside is entirely up to you.
The header in Template 1 is designed to be edited in place. You click on the site name or logo placeholder, replace it with your own content, and the template adjusts around it. The same applies to the footer. DFM2HTML handles the structural wrappers so you never have to touch the underlying markup unless you choose to.
Navigation in the default Template 1 output sits as a horizontal bar directly below the header. This works well for sites with five to eight top-level pages. If your site has more pages than that, consider whether the flat nav list becomes too long for a single line, which is the point where a two-column layout with a sidebar starts to make more sense.
Where Template 1 Works Well
Single column layouts perform best in four situations.
The first is documentation and tutorial content. When a reader is working through a process step by step, any competing visual element in a second column creates distraction. A single column keeps the eye moving down the page in the same direction the instructions are meant to be followed.
The second is long-form articles and written content. Blog-style posts, product stories, case study writeups, and FAQ pages all benefit from full-width text that uses the reading measure well. Template 1 lets you set a content container width that keeps line lengths readable without the reader needing to hunt across a wide screen.
The third is simple business sites with shallow page hierarchies. If your site has a home page, an about page, a services page, and a contact page, you do not need a sidebar navigation to handle that structure. Template 1 gives you a clean, professional output without overengineering the layout for content that does not require it.
The fourth is landing pages and focused conversion pages. A page designed to get the reader to take one action, fill out a form, download a file, or click a specific link, works best when nothing else competes for attention. Template 1 supports that focus by design.
Navigation Pattern
With a single column layout, navigation typically lives in one of two places: a horizontal bar below the header, or an inline list embedded within the content itself.
The horizontal nav bar works for sites where all top-level pages are named and ordered, and where the number of items fits comfortably in a single row. DFM2HTML generates this nav as a simple unordered list that you can style through the editor's CSS controls. You add pages to the nav by editing the list items directly in the template.
Inline navigation, where you reference other pages using links within paragraphs or at the end of sections, works well for documentation sites where the reading order matters. The reader finishes one section and follows a link to the next, rather than jumping out of the content to a nav bar.
Template 1 does not include a fixed or sticky navigation element. If your project requires a nav that stays visible as the reader scrolls, the frame-based templates in the library handle that through a persistent nav frame rather than CSS positioning.
Responsive Concerns
Single column layouts have the easiest responsive story of any layout type. Because there is only one content column, there is nothing to restack or reflow when the viewport narrows. The container simply reduces its width to match the screen, and the text reflows inside it.
The main responsive decisions in Template 1 involve font size, image width, and horizontal padding. On small screens, images set to full column width will scale down proportionally, which usually produces acceptable results without any additional CSS. The main risk is images that look fine at desktop width but become too small to read at mobile width, particularly any image that contains text or labeled diagrams.
Padding and margin values also matter on small screens. Template 1's default output includes reasonable side padding for mobile, but if you are adding custom styles through the editor, test that your additions do not remove the breathing room between the content and the screen edge. A page that runs text flush to the edges of a phone screen is harder to read than one with even a small margin.
Table elements inside the content region are the one common problem area for single column layouts on mobile. Tables created in DFM2HTML using the table tool will clip or overflow if they are wider than the viewport. For content that needs to be tabular, keep column counts low, or consider using a simple list structure instead when the data allows it.
Related Templates
If Template 1 fits your content type but you find you need a sidebar for navigation or supplementary content, Template 2 adds a second column to the right or left of the main content area. It keeps the same top-level structure while giving you a dedicated space for navigation links, quick facts, or related page references.
For compact, focused pages that share the single-column spirit but are designed around a specific product or service rather than long-form reading, Template 5 offers a brochure-style structure with a defined content zone and a layout tuned for shorter, more structured page content.