Layout Examples: Compact Sites Built with DFM2HTML

Gallery of page layouts and site structures built with DFM2HTML template-driven editor

This page shows what DFM2HTML produces in realistic site-building scenarios. These are demonstration examples and layout walkthroughs, not a collection of live customer sites. The goal is to give you a concrete sense of what template-driven page building looks like in practice, what kinds of sites the tool is genuinely suited for, and how different template choices affect the structure and readability of the output. The examples cover brochure sites, compact business pages, documentation hubs, product listing pages, and utility interfaces. Each example notes the template used, the layout decisions made, and the editing considerations involved. For a broader view of the template library, including each template's layout anatomy and use case guidance, start there before working through these examples.

Example One: Small Business Brochure Site

A four-page brochure site is the most common use case for DFM2HTML. The structure is simple: a home page, a services or products page, an about page, and a contact page. Template 5 is a natural fit for this pattern because its compact layout gives the home page enough visual weight without requiring a complex multi-column structure.

In this layout scenario, the home page uses a centered content column with a brief product summary, a feature list, and a prominent call to action. Navigation across the top links to the three supporting pages. The services page breaks down the offering into three or four distinct sections, each with a short descriptive paragraph and a supporting image or diagram. The about page uses a single column layout with a short narrative and a sidebar panel of quick contact information. The contact page presents a form with basic fields.

The entire four-page set is produced from the DFM2HTML canvas with no code editing required after export. The CSS the editor generates handles font sizing, spacing, and link styling. The JavaScript menu provides dropdown support for additional pages added later.

Example Two: Product Documentation Hub

Documentation sites have specific structural requirements. Readers need reliable navigation, a clear information hierarchy, and the ability to move between sections without losing their place in the content. Template 7 frames is the most capable DFM2HTML template for this use case. The persistent sidebar navigation stays visible as readers scroll through content pages, and the main content area loads independently without reloading the navigation frame.

A documentation site in this pattern typically organizes content into sections, with each section having an index page and several sub-pages. The navigation sidebar lists the sections and expands to show subsections using the DFM2HTML JavaScript menu system. The content area uses a single column layout with clear headings, code examples in pre-formatted blocks, and callout sections for important notes.

The main tutorial itself is an example of a documentation-style page built with DFM2HTML conventions. The layout uses a focused content column with internal navigation links at the top and cross-references within the text.

Example Three: Service Business Listing Page

A service business with multiple offerings needs a page that presents each service clearly without becoming a wall of text. Template 2 handles this well. The two-column layout puts the service navigation in the left column and the service detail in the main content column. A visitor can scan the service list on the left and click through to detailed descriptions in the main column without the page feeling like a single long document.

In a typical implementation of this layout, the left column navigation is built with the DFM2HTML menu system, configured for click-to-expand behavior rather than hover since the navigation is sidebar positioned. Each service detail section includes a brief summary paragraph, a list of specific deliverables or included items, and a contact prompt at the bottom. The visual hierarchy uses the editor's heading styles to differentiate service categories from individual service entries.

Example Four: Software Utility Interface

Some of the most practical DFM2HTML use cases are internal tools and utility pages that do not need to be visually polished, just structurally reliable. Template 1, the single column layout, is particularly suitable here. A software utility page typically presents a set of inputs or controls, a results or output area, and help text. Template 1's clean single column keeps the layout readable and makes the functional elements easy to identify.

Static HTML pages can handle a significant amount of utility functionality through JavaScript alone, without any server-side logic. A calculator, a unit conversion tool, a date formatter, or a lookup table can all be implemented as pure client-side HTML pages that DFM2HTML exports cleanly. The JavaScript integration documentation covers the approach for adding custom scripts to DFM2HTML exported pages.

Example Five: Portfolio or Gallery Page

Image-heavy pages require careful layout decisions in any visual editor. DFM2HTML's image placement tools let you set explicit dimensions for image regions, which prevents the layout shift that occurs when images load without defined sizes. A portfolio page typically uses a grid of thumbnail images, each linked to a larger view or detail page.

Template 8's multi-section layout provides natural zones for a portfolio grid. The header section carries the site navigation and brief introduction. The main content section holds the image grid. A footer section provides contact information and additional navigation. Each section is independently managed in the editor, which makes rearranging the layout straightforward without disrupting other sections.

The /liquid_demo/ Layout Example

The liquid layout demo explores fluid, flexible page behavior specifically. It shows how DFM2HTML pages can be structured to adapt to different viewport widths rather than staying fixed at a single column width. This example is relevant for users who want their pages to present well on wider monitors as well as standard desktop sizes. The demo covers the CSS approaches involved and the editing decisions that affect layout flexibility.

Template Selection Guide

After reviewing these examples, the practical template selection process becomes clearer:

Each template page in the library includes more detail on layout anatomy, editing patterns, and responsive considerations.