Layouts

Web page wireframes.

All layouts are responsive, scaling "mobile first" from the smallest smartphones to the largest desktop displays. Resize your browser window and use your browser's print preview to see how the layouts adapt.

One-column layouts

One-Column Layout 01

A single column layout that scales to a maximum width of just 600px. Only the main zone is printed.

One-Column Layout 02

A single column layout that scales to a maximum width of 1000px. The navigation zone follows the main zone in the order of the markup, and appears beneath the main zone on small screens. But for screen widths of 700px or more, the navigation zone jumps above the main zone, using absolute positioning. Only the main zone is printed.

Two-column layouts

Fluid-Fluid Layout 01

For screen widths of 800px more, this snaps to a two-column layout. It mimics a three-column grid, the main zone spanning two columns and the nameplate/navigation zones occupying the third column. The layout scales to a maximum width of 1200px. Only the main zone is printed.

Fluid-Fluid Layout 02

A similar layout to Fluid-Fluid 01, except the nameplate and navigation zones are floated to the left of the main zone.

Fluid-Fluid Layout 03

This layout has just a single breakpoint, with the aside floated to the right of the main zone on screens wider than 799px. The layout is based on a five-column fluid grid, with column widths of 15% and a 6.25% gutter between columns. The main zone spans three columns, the aside two. The layout scales to a maximum width of 1200px. Only the main zone is printed.

Fluid-Fixed Layout 01

This layout features a fluid main zone and a fixed-width aside on screens 800px or more wide. The layout scales to a maximum width of 1200px. Only the main and aside zones are printed.

Fluid-Fixed Layout 02

This layout features a fluid main zone and a fixed-width aside on screens 800px or more wide. There is a second breakpoint at 1000px where the nameplate and navigation zones are floated adjacent to one another in a 25%/75% fluid-column structure. The layout scales to a maximum width of 1200px. Only the main and aside zones are printed.

Fixed-Fluid Layout 01

This is a similar layout to Fluid-Fixed 01 except the fixed-width aside is floated to the left of the main zone instead of the right. The aside zone remains below the main zone in the order of the HTML markup.

Fixed-Fluid Layout 02

This is an identical layout to Fixed-Fluid 01 except the nameplate and navigation are also arranged in the same way as the aside and main zones on screens 800px or more wide.

Fixed-Fluid Layout 03

In this two-column layout, the intro zone is floated to the left of the main zone and given a fixed width when the screen size exceeds 799px. The layout scales to a maximum width of 1200px. Only the intro and main zones are printed.

Three-column layouts

Fluid-Fluid-Fluid Layout

For wide screens, the intro, main and aside zones are arranged horizontally in three fluid-width columns. There are two breakpoints: 800px and 1200px. The layout scales to a maximum width of 1600px. Only the intro and main zones are printed.

Fluid-Fixed-Fixed Layout

This full-width layout features a fluid main zone on the left and two fixed-width asides to the right, on screens 1000px or more wide. Only the main zone is printed.

Fluid-Fluid-Fixed Layout

This full-width layout features a fluid main zone on the left, a fluid (20%) aside zone in the center, and a second fixed-width (200px) aside zone on the right. The responsive breakpoint is 1000px. Only the main zone is printed.

Fluid-Fixed-Fluid Layout

This full-width layout features a fluid main zone, a fixed-width (200px) aside zone in the center, and a second fluid-width (20%) aside zone on the far right. The responsive breakpoint is 1000px. Only the main zone is printed.

Fixed-Fluid-Fixed Layout

Another full-width layout with a single responsive breakpoint of 1000px, at which point the main zone becomes a fluid central column; the intro zone becomes a fixed-width column floated to the left; and the aside zone becomes a fixed-width column floated to the right. Only the main zone is printed.