Website layout ideas: proven page layouts and the content each suits

Start with what's on the page

Good website layout ideas start from content, because a layout is a container for it. So the first question is what the content is. Count the things: one product or forty? Read the words: a paragraph or two thousand? Look at the images: one hero or a gallery? Decide what a visitor does: read, compare, choose, book, fill in a form. Each answer points at a different layout, and most failed pages are a mismatch, such as a gallery forced into a reading column or an essay chopped into cards.

The layouts that keep working

Single column

One centred column of content, around 640px to 760px wide for text-led pages. It suits articles, about pages, one-page sites with a short story and anything read on a phone first. It fails when there's a lot to compare side by side, because everything becomes a long scroll.

Split (two columns)

Text on one side, an image or form on the other, often 50/50 or 40/60. Good for a product with its pitch, a contact section with the address beside the form, or a booking page with the calendar next to the details. On phones it stacks, so decide which half comes first; usually the words. See split screen layout.

Card grid

Repeated items in equal columns: products, menu items, team members, projects. It suits collections where items share a shape and visitors scan before choosing. It fails when the items are different kinds of thing, or when there are only three of them and the cards are filler.

Magazine

A lead story large, others smaller, in a mixed grid. Works for publications, journals and sites with regular news. On a small business site it can make three posts look like a newspaper with nothing in it.

Sidebar and main

A narrow column of navigation or filters beside a wide working area. It's the standard for dashboards, documentation and shops with many filters. On phones the sidebar usually becomes a menu or disappears behind a button.

List with detail

Rows of items with name, short description and a price or duration on the right. It's the most efficient layout for a services menu, a price list or a timetable, and it often beats cards because the eye can run down one column of prices.

Full-bleed image sections

Alternating edge-to-edge photographs and text bands. Suits hotels, restaurants and portfolios whose images do the persuading. It fails without strong photography and can be heavy to load.

Matching layouts to common sites

Rules that apply to every layout

• Use a grid. Twelve columns is common because it divides into halves, thirds and quarters. Elements should start and end on column lines.
• Cap the content width. Around 1200px to 1320px for layouts, with a narrower measure for paragraphs.
• Design the phone version first. Decide the stacking order for every multi-column section before polishing the desktop.
• Keep source order and visual order the same. Screen readers and keyboard users follow the HTML order; CSS that moves things around visually can make the page confusing to them.
• Vary rhythm, not style. Alternating a split section with a list and a grid keeps a long page interesting; changing type, colour and radius between sections doesn't.

How Anticode lays out pages

Anticode's design engine builds pages from sections rather than from a blank canvas: a hero, then sections such as services, work, shop, pricing, reviews, FAQ, booking and contact, each laid out with a pattern that suits its content (a priced list for services, a grid for products, a split for contact). The kind you pick (landing page, online store, booking app, dashboard or portfolio) sets the starting set.

To change the arrangement, the layout editor lets you select any element and drag it within its section, or drag its edge to resize it; sizes snap to columns and drops become an order, a layer or an anchor. Whole sections can be reordered by drag or with buttons in the visual editor.

Questions people ask

What is the most common website layout?

A header with navigation, a hero, a stack of full-width sections and a footer, with each section using a grid, a split or a list inside it. Most small business sites follow this shape.

Single column or multi-column?

Single column for reading and for phones; multiple columns where people compare things side by side. Most sites use both, section by section.

Which layout suits a portfolio?

An image grid for the index, with each project opening into a single-column page that tells the story with large images and short text.