Retro Fitted: Three Columns, Content Left

This layout variant of Retro Fitted places the primary content in the left column of a three-column grid — the widest column at roughly 50% of the available width — with two narrower supporting columns to the right. The arrangement follows traditional broadsheet conventions where the lead article occupies the left side of the page, taking advantage of the natural left-to-right reading direction in Latin-script languages.

Placing content left in a three-column layout is the most natural option for English-language publications, but it introduces specific challenges around line length, column balancing, and responsive collapse order. This page documents the structural decisions, readability tradeoffs, and responsive rules that make this variant work in practice.

Layout Structure

The three-column grid uses a 50/25/25 ratio. The content column targets a 55-character measure — narrower than a single-column layout would allow, but appropriate for the context where supporting information is visible alongside the main text. The two right columns serve different functions: the middle column holds related content links and secondary navigation, while the far-right column handles metadata, timestamps, and tags.

Readability Tradeoffs

The primary tradeoff is measure. A 55-character line is shorter than the ideal 65 characters, which means more line breaks and a slightly faster reading pace. For news-style content where paragraphs are short and information density is high, this works well. For long-form essays or narrative content, the shorter measure can feel choppy. Consider this variant best suited for informational content that benefits from adjacent context — reference material, news articles with related stories, or documentation with a sidebar table of contents.

Responsive Collapse Rules

At medium viewports (below 1100px), the far-right column collapses first, and its content moves below the main article. The two-column layout persists until 768px, at which point the middle column also collapses below the content. This progressive collapse maintains content visibility as long as possible while preserving reading comfort. The key decision is which column collapses first — the far-right column is metadata, which is supplementary, so it goes first. The middle column contains related content that is useful but not essential to comprehending the main article.

Common Implementation Mistakes

• Making all three columns equal width. The 50/25/25 ratio is not arbitrary — the content column needs enough width for a readable measure, and equal thirds (33/33/33) creates columns that are too narrow for comfortable reading.
• Collapsing all three columns to single-column at the same breakpoint. Progressive collapse provides a better experience on tablets, where two columns are perfectly readable.
• Using the same font size across all columns. The narrower right columns need slightly smaller text (14px) to maintain appropriate line counts and visual hierarchy.
• Placing essential content in the far-right column. It collapses first on responsive, so anything critical to understanding the main content should be in the middle column or inline with the content itself.