---
title: "Site"
description: "The front of a product site."
canonical: site.html
navigation-title: "Site"
---

<a id="site"></a>

# Site

- [The landing page](#the-landing-page)
- [A feature in full](#a-feature-in-full)
- [The tour](#the-tour)
- [One audience](#one-audience)
- [Which way to run it](#which-way-to-run-it)
- [What it costs](#what-it-costs)
- [One deployment](#one-deployment)
- [Who is behind it](#who-is-behind-it)
- [Get started](#get-started)

The front of a product site. Every page here argues: it is `sds-bands`,
and the ground changes where the argument takes a step. A reader arrives with
a question about the product and leaves with a decision.

<a id="the-landing-page"></a>

## The landing page

The first page a project shows: the pitch, the parts of the system, and how
to start. Every element on it is the real one. A change to a button or a code
block arrives here without an edit to this page.

[Landing · 1440x900](../../../_cards/screens/landing.html)

<a id="a-feature-in-full"></a>

## A feature in full

The page a product site owes each claim. What the thing is, how it works,
what it changes, what it costs, and what it does **not** do. The last one is
the reason a reader trusts this page.

[Feature · 1440x900](../../../_cards/screens/feature.html)

<a id="the-tour"></a>

## The tour

A feature presentation that is not three cards in a row. Cards compare: they
put four things beside each other for a reader to pick from. A reader reads
a tour in order, because the second step means nothing until the first one
has happened. So the steps alternate sides down the page, and the eye
crosses the column at every one. Each carries the picture of the thing it
describes, and a press opens it at full size.

[Tour · 1440x900](../../../_cards/screens/tour.html)

<a id="one-audience"></a>

## One audience

The same software, argued to one audience. A landing page that tries to
convince three different people convinces none. So this page speaks to one
of them and says at the top which one. The way across is there for whoever
landed on the wrong one. This is the agency: not the buyer and not the
user, but who carries the thing for years after both have moved on. What
convinces them is what it costs them to keep.

[Audience · 1440x900](../../../_cards/screens/audience.html)

<a id="which-way-to-run-it"></a>

## Which way to run it

A comparison whose gaps are the point. A matrix with everything present
somewhere tells a reader nothing. Every mark carries the name of its column,
so the table reads without sight.

[Compare · 1440x900](../../../_cards/screens/compare.html)

<a id="what-it-costs"></a>

## What it costs

The page a marketing site gets wrong most reliably, in the same two ways.
The tiers are adjectives instead of what you get. And the question every
reader has, what happens when I stop the payment, has no answer anywhere.
Both answers stand on the page. Three tiers, and the middle one carries a
mark: not the one to sell, but the one most readers land on.

[Plans · 1440x900](../../../_cards/screens/plans.html)

<a id="one-deployment"></a>

## One deployment

A reference page earns nothing unless a reader can check it. So the two
things that decide are near the top. Who this was, in figures a reader can
compare themselves against. And what it cost, the part that went wrong
included. A case study with no bad month reads as marketing. The headline
is the outcome rather than the name, because somebody who scans a list of
these looks for their own situation.

[Case study · 1440x900](../../../_cards/screens/case-study.html)

<a id="who-is-behind-it"></a>

## Who is behind it

Who answers for it, why it exists, who pays for it, and what happens if it
stops. No photographs: a face is a file to fetch, keep in step and licence,
and none of that names a maintainer.

[About · 1440x900](../../../_cards/screens/about.html)

<a id="get-started"></a>

## Get started

The three questions a careful reader asks before they run somebody else's
code. Which file is mine, is it the published one, and what happens when it
does not answer. It needed no new component.

[Get started · 1440x900](../../../_cards/screens/get-started.html)