Website Layout and Design Guidelines: A Checklist

Layout guidelines

• Use a consistent grid and container width across pages
• Put the most important message and main action in the first screen
• Use generous spacing between sections so each idea stands alone
• Alternate text and visuals to keep long pages readable
• Keep line length comfortable — roughly 60–80 characters for body text
• Design the mobile layout first, then expand for larger screens

Homepage layout

A reliable home page layout: headline naming what you do and where; short supporting line; primary button; proof strip; services overview linking to service pages; process or 'how it works'; featured work; reviews; FAQs; final call to action; footer with contact details and key links. You don't need every section, but this order follows the questions visitors ask.

Service page layout

Headline with the service and location; who it's for; what's included; starting price; process; examples of related work; FAQs; call to action. Every main service deserves its own page so it can rank and answer specific questions.

Typography guidelines

• Use one or two font families at most
• Body text at least 16px on mobile, with line height around 1.5–1.7
• Clear size steps between H1, H2, H3 and body text
• Avoid long passages in all caps or light, thin weights
• Left-align body text for readability

Colour and contrast

Use a neutral base, one primary brand colour for buttons and highlights, and one accent at most. Check text contrast against backgrounds — light grey text on white is a common readability failure. Don't rely on colour alone to convey meaning; pair it with text or icons.

Navigation guidelines

• Five to seven top-level menu items
• Plain labels: 'Services', 'Prices', 'Contact' rather than clever names
• Main action button visible in the header
• Breadcrumbs on inner pages
• Footer links to key services, locations and policies
• Every important page within three clicks of the homepage

Buttons and calls to action

Buttons should look like buttons, use action words ('Get a Quote', 'Book a Visit'), and be large enough to tap — around 44px high on mobile. Use one primary style for the main action and a quieter secondary style for others.

Images and media

Use real photos wherever possible. Compress images, use modern formats such as WebP, size them for the space they fill and add descriptive alt text. Reserve space for images so the layout doesn't jump while loading. Avoid autoplay video and heavy sliders above the fold.

Forms

Ask only for what you need, label every field, use the right keyboard on mobile, show errors next to the field and confirm what happens after submission. Three or four fields is ideal for an enquiry.

Responsive design guidelines

Test every layout on a small Android phone, a large phone, a tablet and a desktop. Stack columns in a logical reading order, keep tap targets spaced, and make sure no content is hidden on mobile that exists on desktop. More in responsive website design.

Accessibility checklist

• Sufficient colour contrast for all text
• Alt text on meaningful images
• Labels on every form field
• Keyboard-accessible menus and buttons
• Descriptive link text instead of 'click here'
• Headings in a logical order

Content guidelines

• Lead with what the visitor gets, not your company history
• Use descriptive headings that make sense when scanned
• Keep paragraphs to two to four sentences
• Use lists for steps, features and requirements
• Show prices or starting prices where possible
• Answer common questions in an FAQ section
• Link to related pages with descriptive text

Contact and footer guidelines

The contact page should offer phone, WhatsApp, email and a short form side by side, with address, map and hours. The footer should repeat key contact details, link to main services, location pages and policies, and confirm your business name. Consistency between the footer, contact page and Google Business Profile helps local SEO.

Performance guidelines

• Keep the largest image on the first screen under a few hundred kilobytes
• Use WebP or AVIF images, sized to the space they fill
• Limit web fonts to two families and the weights you use
• Lazy-load images below the fold
• Avoid sliders and autoplay video above the fold
• Reserve space for images and embeds to prevent layout shift

A one-page review checklist

Before approving any page, check: Is the purpose clear in five seconds? Is there one primary action? Are headings descriptive? Is text readable on a phone? Do buttons look clickable and big enough? Are images real, compressed and described? Does it load quickly on mobile data? Does it link to the next logical page? If yes to all, the page meets the guidelines.

Guidelines for different page types

• About page — real people, real photos, why customers choose you; avoid long company histories
• Portfolio page — filter by service or industry; each item links to a case study
• Blog post — clear title, table of contents for long posts, short paragraphs, related links
• Contact page — multiple contact methods, map, hours, response time promise
• Landing page — one offer, one action, no main navigation distractions
• 404 page — friendly message, search and links to key pages

Using templates and these guidelines

Templates can follow these guidelines — or ignore them. Use this checklist to judge any template or theme before committing; see website templates vs custom design. Want a site built to these standards from day one? Talk to our website design team.