A website layout is the way everything on a page is arranged: where the logo, menu, headline, images, text and buttons sit, and in what order people meet them. A good layout makes it obvious what you do, who it is for and what to do next, within a few seconds of someone landing.

For most small businesses, the best layout is not the cleverest one. It is a clear, familiar structure built for phones first, with one main action per page. Below we walk through the common layout patterns, what to put above the fold, how to handle navigation and spacing, which layouts suit which types of business, and the mistakes we see most often.

Layout is how visitors decide whether to stay

People do not read web pages from top to bottom like a book. They scan, looking for a sign that they are in the right place. Layout controls that scan. It decides what gets seen first, what gets skipped and how much effort it takes to find a phone number or a price.

A strong web page layout does three jobs:

• Answers the first question fast. What is this business and can it help me?
• Builds trust as people scroll. Reviews, examples of work, accreditations and real photos placed where doubts usually appear.
• Makes the next step easy. A clear button or form that is always close at hand, rather than buried at the bottom.

Get those right and a simple layout will beat a beautiful but confusing one.

Six layout patterns worth knowing

Most websites mix a handful of tried and tested patterns, for example a hero plus sections on the home page and a card grid on the blog.

Single column

Everything stacks in one column down the page. It is easy to read, works naturally on mobile and keeps people focused. It suits landing pages, blog posts and service pages where you want people to follow a story from problem to solution to call to action.

F-pattern

Eye-tracking research by the Nielsen Norman Group found that people often scan text-heavy pages in an F shape: across the top, across again a little lower, then down the left-hand side. An F-pattern layout works with that habit by putting key words at the start of headings and lines, using clear subheadings and keeping important links on the left. It suits blogs, guides and pages with a lot of copy.

Z-pattern

On simpler pages with less text, the eye tends to move in a Z: logo top left, menu or button top right, then diagonally down to content and a call to action bottom right. It works well for simple home pages and campaign pages with one clear message.

Card or grid

Content sits in equal boxes, each with an image, a short title and a link. Grids make lots of options easy to browse, which is why they suit product listings, portfolios, blog archives and menus of services.

Split screen

The page is divided into two halves, often an image on one side and text on the other. It is useful when you have two equal choices (for example “I’m a homeowner” and “I’m a trade customer”) or want a strong image alongside a short message. On mobile, the halves need to stack neatly.

Hero plus sections

A large opening panel (the hero) with a headline, short supporting line and button, followed by a series of sections: services, benefits, proof, process, FAQs and a final call to action. This is the most common small business home page layout because it handles both quick scanners and people who want detail.

Above the fold needs to earn its space

“Above the fold” is the part of the page someone sees before scrolling. On a phone, that is not much room. It should include:

• A clear headline that says what you do and for whom, in plain words. “Family solicitors in Guildford” beats “Excellence in every detail”.
• A short supporting line covering the main benefit or what makes you different.
• One primary button, such as “Get a quote”, “Book a table” or “Shop the range”.
• A quick trust signal, like a review score, years in business or a recognisable accreditation.
• Your logo and a simple menu, with a phone number visible if calls matter to your business.

Avoid sliders that rotate between several messages. Visitors rarely wait for slide three. One strong image with one strong message does more.

Design for the phone first

Google now uses the mobile version of a site for indexing and ranking, and for many local businesses most visits come from phones. Designing mobile-first means starting with the small screen and then expanding for desktop, rather than squashing a desktop design down.

In practice that means:

• Stack content in a sensible order so the most important thing comes first on a phone.
• Make buttons and links big enough to tap comfortably, with space between them.
• Keep body text at a readable size without zooming, and avoid long lines on desktop (around 50 to 75 characters per line is a comfortable range).
• Put click-to-call and click-to-map links where people expect them.
• Compress images and avoid heavy animations that slow the page down on mobile data.

Always check layouts on a real phone, not just a resized browser window. Sticky headers, pop-ups and cookie banners can eat half the screen.

Navigation should feel boring, in a good way

Menus are not the place to be creative. People expect the logo top left (linking to the home page), the main menu along the top or behind a “hamburger” icon on mobile, and contact details in the header and footer.

• Keep the main menu short. Five to seven items is usually plenty. Group the rest into dropdowns or the footer.
• Use plain labels. “Services”, “Prices”, “About” and “Contact” are clearer than “Solutions” or “Our world”.
• Add one standout button in the header for your main action.
• Use the footer properly. Address, opening hours, phone, email, key pages and legal links all belong here.

Spacing and hierarchy do the heavy lifting

Visual hierarchy means making the most important things look the most important. You do it with size, weight, colour, position and space.

• Headings in clear steps. One main page heading, then section headings, then smaller subheadings. Readers should be able to skim the headings alone and understand the page.
• Generous white space. Space around elements is not wasted. It separates ideas and makes buttons stand out.
• A consistent grid. Lining things up to the same column structure makes a page feel calm and professional.
• Limited colours and fonts. Two fonts and a small palette, with one accent colour saved for buttons and links.
• Short paragraphs. Two to four lines on mobile is easier to read than big blocks of text.

Website layout examples by business type

There is no single right layout, but some patterns fit certain businesses better than others.

Business type	Layout that tends to work	Main action above the fold
Trades and home services	Hero plus sections, with reviews and service areas near the top	Call now or get a quote
Restaurants and cafés	Full-width image hero, then menu, opening times and map	Book a table or order online
Professional services	Hero plus sections, F-pattern service pages, team profiles	Book a consultation
Online shops	Card or grid for categories and products, single column product pages	Shop now or add to basket
Creative studios and photographers	Grid portfolio	View work or enquire
Events and campaigns	Single column or Z-pattern landing page	Buy tickets or register
Membership and B2B	Split screen for audience choice, then hero plus sections	Request a demo or join

If you sell products online, our ecommerce web design page covers how we approach shop layouts specifically.

How to design a website layout in six steps

1. Decide the goal of each page. One main action per page, whether that is a call, a booking or a sale.
2. List the questions visitors ask. Price, location, timescales, proof you can do the job. Each question becomes a section.
3. Sketch on paper or a simple wireframe. Boxes and labels only, no colours yet. Start with the mobile version.
4. Write the words before the design. Layout should fit the content, not the other way round.
5. Build, then test on real devices. Ask someone who does not know your business to find your phone number or prices and watch where they get stuck.
6. Measure and adjust. Use analytics to see where people drop off, then tweak the order of sections or the wording of buttons.

Common website layout mistakes

• Too many messages at the top. If everything is important, nothing is.
• Hiding contact details. Phone numbers tucked away on a contact page cost enquiries.
• Walls of text. No subheadings, no lists and no breathing space.
• Desktop-only thinking. Side-by-side columns that become a long, muddled stack on mobile.
• Inconsistent pages. Different layouts, fonts and button styles on every page make a site feel unfinished.
• Pop-ups on arrival. A newsletter box before someone has read a line is a fast way to lose them.
• No proof. Reviews and examples of work placed nowhere near the call to action.

Related reading: Our Website Design Process, Step by Step and How to Write a Website Brief for Your New Website.

Frequently asked questions

What is the best website layout for a small business?

For most small businesses, a hero plus sections layout works best: a clear headline and button at the top, followed by services, proof, process and a final call to action. It is familiar, easy to scan and adapts well to mobile.

How many sections should a home page have?

There is no fixed number, but six to ten sections is common. Each section should answer a real question a customer has. If a section does not help someone decide, cut it.

Does website layout affect SEO?

Yes, indirectly. Clear headings help search engines understand your content, and a fast, mobile-friendly layout gives visitors a better experience. Layout alone will not rank a page, but a poor one can hold good content back.

Should I use a template or a custom layout?

A good template is fine for a simple site, as long as you adapt it to your content and goals. A custom layout makes sense when you need specific features, want to stand out from competitors or have outgrown what the template can do.

Get a website layout that brings in enquiries

If your website looks fine but the phone is not ringing, the layout is often the first place to look. Our team designs and builds WordPress sites for small businesses across Surrey, Hampshire and beyond, starting with what your customers need to see. Have a look at our website design service or get in touch for a friendly chat about your site.