# How these notes work, and who they are for

> These notes answer the questions people ask before they hire a designer and developer: what it costs, whether it pays, what can go wrong. Each one gives the answer first and links every number to its source.

By Dion Zeneli · 20 January 2026 · updated 12 November 2026 · 5 min read

Source: https://www.theweb0.com/blog/how-this-blog-works
Filed under: Process, Interactive

---

I make websites, brands and products for companies that need them to earn money. These notes are where I write down what I learn doing it: what things cost, why, and what I would do with your budget.

> **About the orange line.**
>
> On a wide screen there is an orange line down the left margin. It is a dimension line, the kind an architect uses to say how long a wall is. This one measures the note. The pen marks where you are, and the number beside it says how many minutes are left.

They are written for a buyer. If you run a company or its marketing and you are about to spend five figures on design and development, you are who I have in mind. If you are a designer who came for the pen plotter, welcome too. The pen is in the margin.

## What is a note for?

A note answers one question that someone asks before they hire me. How much is a website. Will it pay for itself. Can I change platform and keep my search traffic. Those are the questions a first call starts with, so I may as well answer them once, properly, where you can read the answer without booking anything.

Every note is built the same way.

1. **The question is the title.** No wordplay. If you searched for it, you should recognise it.
2. **The short answer comes first.** It sits under the title, in one or two sentences. If that is all you read, you still leave with something.
3. **Then the evidence.** Numbers, each with a link to where it comes from. My own experience, marked as mine.
4. **Then something you can use.** A checklist, a sum, a tool you can drag.
5. **One sentence about what I sell.** At the end, once, after the note has done its job.

> If a number has no source, it does not go in.

## Where do the numbers come from?

From someone I can name, at an address you can open. Here is one.

**2.56 MB** The weight of the median home page when it loads on a phone. (Source: [HTTP Archive Web Almanac, 2025](https://almanac.httparchive.org/en/2025/page-weight))

That block is the only way a statistic gets into a note. It asks for a link and a year. Leave either out and the site refuses to build,[^strict] which makes it a stricter editor than any I have worked with.

Smaller facts get a footnote instead. Google's own speed test calls 1.6 megabits a second "Slow 4G".[^slow] On a wide screen that footnote sits in the margin, next to the sentence it belongs to. On a phone it waits at the bottom with a link back.

Put the two numbers together and the median page is a wait. At 1.6 megabits a second, 2.56 megabytes takes 12.8 seconds to arrive. That is arithmetic, not a study, so you can check it by dragging.

*Interactive: Page weight, time and money. Megabytes divided by the speed of the line. The lower half uses your numbers and one published study. Use it at https://www.theweb0.com/blog/how-this-blog-works*

> **A source is not proof.**
>
> The study in that box watched 37 retail and travel brands for 30 days at the end of 2019.[^mmm] Your site was not one of them. I use numbers like these to size a question, never to promise an answer.

Numbers that belong together sit side by side.

**8.4%** More retail conversions from a mobile site that is 0.1 s faster. (Source: [55 and Deloitte for Google, 2019](https://web.dev/case-studies/milliseconds-make-millions))

**10.1%** More travel conversions. Same study, same 0.1 s. (Source: [55 and Deloitte for Google, 2019](https://web.dev/case-studies/milliseconds-make-millions))

When I quote someone, the quote is short and the link is right under it.

> …sites should strive to have Largest Contentful Paint of 2.5 seconds or less.
>
> [web.dev, Largest Contentful Paint](https://web.dev/articles/lcp)

## What can a note show?

More than paragraphs. These are the parts I have to work with.

### A claim, before and after

**A claim**

Fast sites convert better.

**The same claim, with its papers**

A mobile site that was 0.1 s faster converted 8.4% more retail visitors, in a 30-day study of 37 brands at the end of 2019.

### A table

| Number | What it measures | Who says so | Year |
| --- | --- | --- | --- |
| 2.56 MB | The median home page on a phone | HTTP Archive | 2025 |
| 1.6 Mbps | "Slow 4G" in Google's Lighthouse | Lighthouse guide | checked 2026 |
| 2.5 s | A good largest paint | web.dev | 2025 |
| +8.4% | Retail conversions per 0.1 s | 55 and Deloitte | 2019 |

On a phone the table scrolls inside its own box. The page stays put.

### Prices that cannot go stale

> **Money.**
>
> I never type one of my own prices into a note. They are read from the same file as the [pricing page](https://www.theweb0.com/pricing), so a website is from $16k here and there, and usually takes 3–⁠5 weeks. When a price changes, every note that mentions it changes with it.

### Drawings

Every figure is drawn by the same plotter as the rest of the site, the first time it scrolls into view. There are four to pick from.

*Drawing: A schematic, not data. Cost is the flat line, earnings climb, and the ring marks the month they cross. See it at https://www.theweb0.com/blog/how-this-blog-works*

*Drawing: Median home page weight, July 2025. Source: [HTTP Archive Web Almanac](https://almanac.httparchive.org/en/2025/page-weight). See it at https://www.theweb0.com/blog/how-this-blog-works*

*Drawing: Most redesign briefs in one drawing. The page on the left says everything. The page on the right says one thing. See it at https://www.theweb0.com/blog/how-this-blog-works*

*Drawing: An example shape for a small site, not a quote. Real timelines are on the pricing page. See it at https://www.theweb0.com/blog/how-this-blog-works*

### Any other figure

*Figure: The parts of a note, in the order you meet them. See it at https://www.theweb0.com/blog/how-this-blog-works*

### Code, when a note needs it

Most will not. When one does, the block says which file it is and has a copy button.

```ts title="app/_v3/blog/config.ts"
// drafts show in development and on preview links, never in production
export const SHOW_DRAFTS = process.env.VERCEL_ENV !== "production";
```

### A checklist

Before a note goes live, it has to pass this.

- The title is a question a buyer asks.
- The answer is in the first two sentences.
- Every number has a source and a year.
- Anything only I can confirm, I have confirmed.
- It has a date, and a new date when it changes.
- It ends with one sentence about what I sell, not five.

## What does a late launch cost?

One more thing you can touch. A launch that slips has a price, and you can work it out without me.

*Interactive: What a week of delay costs. Every number in this one is yours. I looked for a public figure on how late projects run and could not confirm one at its source, so there is none. Use it at https://www.theweb0.com/blog/how-this-blog-works*

And the big one: when the work has paid for itself. The price is one of mine; everything else is yours.

*Interactive: When the work pays for itself. Price divided by what one new customer leaves you is how many customers the work has to win. Divided again by the extra customers a month, it is the months to pay back. Use it at https://www.theweb0.com/blog/how-this-blog-works*

## How does a note get published?

Slowly. Every note starts as a draft. A draft shows on my machine and on preview links, with a tag that says so. On the live site it does not exist: not in the list, not in the feed, not at its own address.

While a note is a draft, anything only I can confirm carries a comment in the file. The comment never reaches the page. A separate page lists every one of them, so I can see what I still owe a note before I publish it.

```mdx title="content/blog/a-note.mdx"
Three weeks is typical for a move like this.

{/* CHECK: is three weeks right? Use the figure from a real project. */}
```

## How do I follow along?

There is an [RSS feed](https://www.theweb0.com/blog/rss.xml). Every note has a "Copy as markdown" button under its title, and the same text lives at the note's address with `/md` on the end. That is for people who keep notes, and for the AI tools that read on their behalf.

There is no newsletter to sign up for. I would rather you read one note than get an email every week.

That is the whole system. The next notes are about your money, not my blog.

[^strict]: Only on the live site. On my machine and on preview links it shows a red tag where the source is missing, so one mistake does not take everything down.

[^slow]: Lighthouse's throttling guide gives "Slow 4G" as 1.6 Mbps down with 150 ms of latency, "roughly the bottom 25% of 4G connections". [Lighthouse on GitHub](https://github.com/GoogleChrome/lighthouse/blob/main/docs/throttling.md), checked 11 November 2026.

[^mmm]: *Milliseconds Make Millions*, commissioned by Google and run by 55 and Deloitte: 37 brand sites, over 30 million sessions, 30 days at the end of 2019. [Summary on web.dev](https://web.dev/case-studies/milliseconds-make-millions).