HomeFrame 00 · Opening12-column grid on
A website people and search can both use
This guide is drawn as a wireframe: grey boxes standing in for what will go there, and red notes on what each box needs before it is real. The notes come from the bodies that set the standards for a usable site: the W3C’s accessibility guidelines, Google’s own documentation, and business.gov.au’s steps for setting up a business website.
A guide to building a small-business website, published by Dotto from the official sources linked on each page.
- 1Title. Each page has a title that describes its topic or purpose.WCAG 2.2 · 2.4.2 Page Titled · Level A
- 2Navigation. Menus repeated across pages come in the same relative order each time.WCAG 2.2 · 3.2.3 Consistent Navigation · Level AA
- 3Image. A text alternative that serves the same purpose, and width and height attributes so the browser can reserve its space while it loads.WCAG 2.2 · 1.1.1 Non-text Content · Level A; web.dev on layout shifts
- 4Text. A contrast ratio of at least 4.5:1 with its background, or 3:1 for large text.WCAG 2.2 · 1.4.3 Contrast (Minimum) · Level AA
- 5Button. A target of at least 24 by 24 CSS pixels, with some listed exceptions.WCAG 2.2 · 2.5.8 Target Size (Minimum) · Level AA
HomeFrame 01 · Index
Six sheets, one for each part of the build
Each sheet takes one part of a website and reads it against the source that sets it out. The grey box on each card is where a picture would go once the page is made.
Sheet 01
Accessible by design
The W3C’s guidelines for a small-business site: the four principles, the three levels, and the quick checks anyone can run.
Sheet 02
Page experience and speed
Core Web Vitals in Google’s words, and the build decisions that move them.
Sheet 03
Mobile first
Google uses the mobile version of a site’s content for indexing and ranking. What that asks of a layout, from the viewport to the size of a tap.
Sheet 04
Site structure and navigation
How pages relate to each other, for a person finding their way and a crawler following links.
Sheet 05
Images and alt text
Choosing the words for an image, and the image habits that help search find it.
Sheet 06
Questions to ask a web designer
Ten questions that draw on the five sheets before it, with what a full answer covers.
HomeFrame 02 · Sequence
Where the sheets sit in a build
business.gov.au sets out ten steps for setting up a business website. These sheets cover the four outlined in red. The rest are on the government’s own page.
- Define your website goals
- Choose and register a domain name
- Choose the right hosting and content management system
- Choose a design for your websiteMobile and accessibility: sheets 01 and 03
- Plan your website structureSheet 04
- Create your website contentImages: sheet 05
- Make sure your website is secure
- Test and launch your websiteWhat to ask before launch: sheet 06
- Promote your website
- Maintain, monitor and measure your website
“Avoid overly fancy designs or gimmicks that might distract users from your content.”
business.gov.au, Set up a business website, on choosing a design
HomeFrame 03 · Spec
The spec sheet
Seven numbers come up again and again in the sheets. Each one is set by the body named beside it, and each sheet explains what sits behind it.
| Number | What it measures | Set by |
|---|---|---|
| 4.5:1 | The least contrast between text and its background; 3:1 for large text | WCAG 2.2, 1.4.3, Level AA |
| 24 × 24 | The smallest target for a pointer, in CSS pixels, with some exceptions | WCAG 2.2, 2.5.8, Level AA |
| 320 | The width in CSS pixels at which content should reflow without scrolling in two directions | WCAG 2.2, 1.4.10, Level AA |
| 200% | How far text can be resized without loss of content or function | WCAG 2.2, 1.4.4, Level AA |
| 2.5 s | Largest Contentful Paint to aim for: how soon the main content has loaded | Google Search Central |
| 200 ms | Interaction to Next Paint to aim under: how quickly the page responds | Google Search Central |
| 0.1 | Cumulative Layout Shift to aim under: how much the page jumps as it loads | Google Search Central |
HomeFrame 04 · Readers
One build, two readers
The same markup is read by a person, often through a screen reader, a phone or a zoomed screen, and by a search engine’s crawler. The sources often describe both readers in the same breath.
In 2022, 5.5 million Australians (21.4%) had disability, up from 17.7% in 2018, according to the Australian Bureau of Statistics. The W3C adds that accessibility also helps people on small screens, older people, someone with a broken arm, someone reading in bright sunlight, and anyone on a slow connection.
Headings and page structure
Screen reader users often use headings to move around a page, the W3C notes.
Its page-structure tutorial adds that search engines can use the same structure to index a page’s content better.
Alt text on images
A screen reader can read a text alternative aloud or show it as braille.
Google says it uses alt text, along with computer vision and the page’s content, to understand what an image shows.
Link text
WCAG asks that a link’s purpose can be worked out from its text, or its text and context.
Google says better anchor text makes it easier for people to move around a site and for Google to understand the page linked to.
The mobile layout
business.gov.au notes that mobile devices are responsible for over half of the world’s internet traffic.
Google uses the mobile version of a site’s content for indexing and ranking.
HomeFrame 05 · About
About this guide
seowebsitedesign.com.au is a concept website: a guide to building a small-business website that people and search can both use, published by Dotto. Every sheet is written from the official sources it links, mostly the W3C’s Web Accessibility Initiative, Google Search Central and web.dev, and business.gov.au, and lists them at its foot.
Standards move. The W3C encourages using the latest version of WCAG, which is WCAG 2.2. Where a sheet and its source differ, follow the source.