Website layouts: how to pick the right one for your business

A website layout is the arrangement of blocks on a page: where the headline sits, how wide the text runs, where images go and where the button waits. Think of it as the floor plan of a house.

Style is a separate layer. Colors, fonts, photos and illustrations decide how the page feels. The same layout can look calm and formal for a law firm or bold and bright for a gym.

That split matters when you make decisions. You can change colors in an afternoon. A weak layout keeps hurting whatever the colors are, because visitors fail to find the answer or the next step.

A good layout does three jobs. It shows what matters first, it groups related things, and it leads the eye to one action, such as booking, calling or requesting a quote.

This guide covers the parts every layout shares and the main types. It also shows how to choose, sketch and test a layout for your own business.

A grid is a set of invisible columns that every block lines up with. It keeps edges straight, gaps equal and pages consistent, so a site feels orderly before anyone reads a word.

Many designers use a 12-column grid on desktop. Twelve divides by 2, 3, 4 and 6, so you can place two halves, three thirds or four quarters on the same system. Bootstrap, a popular front-end framework, uses twelve columns too.

On a phone the grid shrinks to four columns or a single column. Blocks that sat side by side now stack.

1. ColumnsThe vertical strips that hold content. Text and images span one or more of them.
2. GuttersThe gaps between columns. Equal gutters make a page look calm and deliberate.
3. MarginsThe space between the grid and the edge of the screen. Wider margins on desktop keep lines readable.
4. Maximum widthThe widest your content may grow. Capping it keeps text easy to follow on a large monitor.

People scan a screen before they read it. Eye-tracking research by the Nielsen Norman Group, first published in 2006, found that on text-heavy pages many users follow an F-shaped path.

The F-pattern works like this: a visitor reads across the top line, drops down, reads a shorter line, then scans down the left edge. Words on the left and at the top get the most attention.

The Z-pattern fits pages with little text, such as a homepage hero. The eye moves from top left to top right, cuts diagonally to bottom left, then reads across to bottom right.

1. Use the F-pattern on text pagesStart headings and list items with the key word, so the left edge carries meaning on its own.
2. Use the Z-pattern on simple screensPlace the logo top left, the menu or phone number top right, and the main button at the end of the Z.
3. Guide the scannerNielsen Norman Group advises clear headings, bullets and bold key terms, so people who scan land on the right words.

A web page layout tells a story in a fixed order. Each block answers the question a visitor has at that moment, from what is this to how do I start.

For most business pages that order stays the same. Get it right and the page reads like a good sales conversation.

1. HeaderLogo, a short menu and one action, such as a phone number or a booking button.
2. HeroThe first screen: what you offer, for whom and where, with one main button.
3. ProofA rating, reviews or a recognizable figure, placed close to the hero.
4. OfferServices or products as clear blocks, each with a short line and a link.
5. ProcessThree or four steps that show how working with you goes.
6. FAQThe questions that hold people back, answered in a few lines.
7. Closing action and footerA final call to act, then contact details, hours and legal links.

Inside each block, size sets the order. People read the largest element first, so make that the point you want them to remember.

Nine types of website layouts cover almost every business site. Most real sites combine two or three: a hero on top, a card grid in the middle and a single column for long text.

The table shows where each type fits and what to watch for.

Pick the type that fits the main job of the page. A page that sells one service needs focus. A page that offers twenty choices needs a grid.

A single column layout stacks every block in one vertical line. It is the most natural shape for a phone, and it keeps attention on one thing at a time. Long guides, blog posts and simple service pages suit it well.

The trick is rhythm. Alternate text blocks with an image, a quote or a short list, so scrolling feels like progress.

A split screen layout divides the first screen into two equal halves. Each half carries its own message and button. It works when you serve two clear groups, such as private clients and companies for an accountant.

On a phone the two halves stack, so decide which half comes first. Lead with the group that brings you the most work.

1. Single column fitsContent that people read in order, from the first line to the last.
2. Split screen fitsA real choice between two paths that both deserve equal space.

A hero is the large block at the top of a page. In a full-width hero, a photo or video fills the screen from edge to edge, with the headline and button on top.

This layout sells atmosphere. A restaurant shows a full table, a hotel shows the view, a landscaper shows a finished garden. One strong image says more than three paragraphs.

It comes with two risks. Text over a busy photo gets hard to read, and a large video can delay the first screen.

1. Add a dark overlayA semi-transparent layer between image and text keeps the headline readable on every part of the photo.
2. Keep the video short and mutedA silent loop of a few seconds sets the mood. Offer sound only on request.
3. Check the largest elementGoogle's web.dev documentation counts a largest contentful paint of 2.5 seconds or less as good. The hero image is often that largest element.
4. Keep the button visibleThe main action belongs inside the first screen on a phone too.

A card grid shows several items as equal tiles: a picture, a title, a short line and a link. Services, team members, portfolio projects and property listings all fit this shape.

Cards scan fast because each one has the same structure. On desktop three or four sit in a row. On a phone they stack into one column or two narrow ones.

Equal cards have one weak spot: they give every option the same weight. If one service brings most of your work, make that card larger or place it first.

A magazine layout mixes card sizes, columns and headlines, the way a newspaper front page does. It suits sites that publish a lot, with several sections competing for attention.

For most small businesses a full magazine layout offers too many entry points. Borrow one idea from it: a large featured article beside a short list of recent ones on your blog page.

An asymmetrical layout places blocks off balance on purpose: a large image on one side, a small text block lower on the other. It feels creative and fits studios, designers and tattoo artists.

Asymmetry still needs a grid underneath. The blocks look free, yet their edges line up with the same columns, so the page stays readable.

A scroll story reveals content step by step as you scroll. A product turns, a process unfolds, numbers count up. It holds attention for a launch or a complex service. Keep animations light and short, because phones have less power than desktops.

A single page layout puts every section on one long page, with a menu that jumps to each part. Those jump links are called anchors.

It suits a one-person business, an event or a small offer. The trade-off is search: one page can rank for a limited set of topics. Separate service pages give each topic its own chance in Google.

A product focus layout builds the whole page around one product or one service. Large photos, the price, the main benefit and the buy or book button sit together in the first screen.

Below that, the page answers questions in order: what it does, what it is made of, how delivery or the appointment works, what others say. Each block removes one doubt.

It fits a webshop with a short range, a fixed-price service or a signature treatment at a salon.

1. Photos from several anglesLet visitors zoom in and see the product in use.
2. Price near the buttonA clear price beside the action builds trust and answers a question before it is asked.
3. Sticky action on a phoneA button that stays visible at the bottom of the screen while you scroll.
4. Reviews close to the priceProof right where the decision happens.

A responsive layout adapts to the screen it appears on. Blocks that sit side by side on a laptop stack on a phone, and images resize to fit.

Google uses the mobile version of a page for indexing and ranking, as its Search Central documentation explains. So design the phone version first and widen it for larger screens. That approach is called mobile first.

The points where the layout changes are called breakpoints. Place them where your content starts to look cramped or stretched.

1. Stack in reading orderOn a phone, blocks fall into one column. Check that the order still tells the story: headline, proof, offer, action.
2. Size tap targets for thumbsWCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels. Many designers aim for about 48 pixels for main buttons.
3. Keep lines readableOn desktop, cap body text at roughly 50 to 75 characters per line.
4. Reserve space for imagesSet image sizes in advance so the page stays still while it loads. Google counts a layout shift score of 0.1 or less as good.

Each page on your site has its own job, so each one gets its own layout. Reuse the same grid, header and footer everywhere, and change the middle.

Consistency across these pages matters. When the menu, buttons and spacing stay the same, visitors learn your site once and move faster on every page after that.

A sketch is a rough drawing of the blocks on a page, also called a wireframe. It uses boxes and labels and leaves out colors. Sketch first, so you settle order and content before anyone discusses fonts.

1. 1. Write the page goalOne sentence: what should a visitor do here? Book, call, buy or ask for a quote.
2. 2. List the questionsWrite down what a new customer wants to know before acting, in the order they ask it.
3. 3. Turn questions into blocksEach question becomes a block: price, process, reviews, area served, FAQ.
4. 4. Draw the phone version firstDraw a tall narrow rectangle and stack the blocks in order. Keep the main button in the first screen.
5. 5. Widen to desktopDecide which blocks may sit side by side, such as text beside an image.
6. 6. Fill in real textReplace placeholder text with your own words. Real headlines show whether a block has enough room.

Paper and pen work fine. Free tools such as Figma or Excalidraw help when you want to share the sketch with others.

A layout is a guess until people use it. Small tests reveal most problems. Nielsen Norman Group has long advised testing with about five users per round.

1. Five-second testShow the page for five seconds, then ask what you offer and what to do next.
2. Task testAsk someone to book, call or request a quote on a phone while you watch quietly.
3. Heatmaps and scroll mapsFree tools such as Microsoft Clarity show where people click and how far they scroll.
4. A/B testShow two versions of a page to split traffic and compare requests. This needs enough visitors to give a clear answer.
5. Search Console checkGoogle Search Console shows which pages get impressions and clicks, so you know where a layout change matters most.

Change one thing at a time and give it a few weeks. Then you know which change made the difference.

Most layout problems repeat across sites. Each one below has a simple fix you can make this week.

1. Too many choices in the heroFive equal buttons slow a decision. Keep one main action and at most one quieter alternative.
2. Proof far down the pageReviews in the footer reach few people. Place a rating close to the first button.
3. Text across the full widthLines of 150 characters tire the eye. Cap the text column.
4. A desktop design squeezed onto a phoneSide-by-side blocks shrink into tiny columns. Let them stack into one column.
5. Content jumping while it loadsImages and banners that load late push text down. Reserve their space in advance.
6. Every page a different shapeChanging grids, buttons and spacing make a site feel stitched together. Use one system.
7. Hidden contact detailsA phone number or booking button belongs in the header, on every page.

The right layout follows how customers in your trade decide. Here are website layout examples that fit common businesses.

1. RestaurantFull-width hero with a dish or the dining room, then the menu, opening hours and a reservation button that stays visible.
2. Plumber or contractorHero with phone number and service area, a card grid of jobs, reviews and a short quote form.
3. Dentist or therapistCalm single column with a clear booking button, treatments as cards and a friendly team photo.
4. Law firmSplit screen for private clients and companies, then practice areas as cards and a consultation form.
5. Salon or barberProduct focus on treatments with prices, an online booking calendar high on the page and a photo grid of work.
6. Photographer or tattoo artistAsymmetrical portfolio grid that lets the work lead, with a booking or inquiry button in the header.
7. Real estate agentSearch bar in the hero, listings as a card grid and a split screen for buyers and sellers.

Use these as a starting point. Your own customers, offer and brand decide the final shape.

At Delta Six we choose the layout based on your brand and your trade. We look at how your customers decide, which action matters most and what proof you have, then build the page order around that.

We build your complete custom website free first, on our own platform with hand-written code. The design is premium 3D in your own brand, so the layout and the style fit together.

You see the result in a 15-minute online showcase. You only pay when you're happy, and you pay nothing upfront. Choose us and your website is live within two weeks.

Online booking, an AI chatbot, a lead magnet that fits your trade, email and WhatsApp follow-up, review follow-up and monthly SEO come as standard. Each gets its own place in the layout, close to the moment a visitor needs it.

Two months after launch you choose again. Stop after two improvement rounds and you get your money back.

• Write one sentence that states the goal of each key page.
• Sketch the phone version of your homepage as stacked boxes.
• Check that the main button sits inside the first screen on a phone.
• Place a rating or review close to the first button.
• Line up every block with one grid across all pages.
• Cap body text at roughly 50 to 75 characters per line on desktop.
• Start headings and list items with the key word for people who scan.
• Make main buttons at least 24 by 24 CSS pixels, and preferably about 48.
• Reserve space for images and banners so the page stays still while loading.
• Make the service that brings most of your work the largest card.
• Run a five-second test with someone new to your business.
• Watch two people book or request a quote on a phone.
• Install a free heatmap tool such as Microsoft Clarity and check scroll depth.