Skip to content
Filter

Type at least two letters.

Home / Building Drafted / Part 2

Why Drafted has no images

I wanted type and layout to do the work a picture usually does. That one rule shaped the whole site.

Dev
· 3 min read
DraftedDesignTrue story

One of the first rules I wrote down for Drafted was a strange one for a blog: no images in posts. No screenshots, no illustrations, no stock photos at the top of an article.

It was not a rule I arrived at by accident. I wanted the writing to look like itself. The reading experience I was after was clean, close to Medium, with a little bit of heavy outline and hard shadow to give it character. Pictures would have pulled the page away from that. Type would not.

Type Can Do More Than Carry Words

If a post needs a figure, the figure has to be built out of what the site already has: letters, spacing, colour and structure. I called that idea Imaxt, and it became the signature of the site.

Here is the difference in practice. Say a post needs to show how three models scored.

A picture of a chart
A fixed-size image. It looks wrong in dark mode, needs alt text written separately, and cannot be searched or selected.
A block built from type
Real text and real numbers. It fits any screen, follows the light or dark theme, reads aloud properly, and shows up in feed readers.

None of that is magic. It is just what happens when the figure is text to begin with.

Instead of an image library I ended up with a handful of blocks, each with one job: a large Statement, a Stat for a number that matters, a Compare for a before and after, Steps and Timeline for things in order, Bars and a Heatmap for measurements, a CodeWalk that explains code line by line, and a few more for rhythm. Every post can use them without importing anything.

I try to use them sparingly. A block is there to show an idea that the paragraph above it has already said, not to add a second idea.

If a figure cannot be selected and read aloud, it is not finished.

What About Diagrams?

Some ideas really do need a drawing: how a request travels, how a job restarts after a failure. For those I use diagrams written as plain text, which the site draws when it is built.

How a diagram is builtA diagram written as text goes into the site build. The build draws it twice, once for the light theme and once for the dark theme, so it is readable in both.Diagram as textSite buildLight versionDark version
How a diagram is builtA diagram written as text goes into the site build. The build draws it twice, once for the light theme and once for the dark theme, so it is readable in both.Diagram as textSite buildLight versionDark version

Because they are drawn at build time, there is nothing extra for your browser to run. And every diagram must come with a title and a description, written for people who cannot see it. The build refuses to finish without them.

What the Rule Cost Me

It takes away the easy way out. A screenshot is often quicker than building a figure, and the rule rules it out. The writer has to understand the point well enough to say it with type, which is slower, and usually clearer.

In return, every figure on this site works in both themes, can be read by a screen reader, and arrives in a feed reader as real text.

The rule is strict on purpose: it makes me say the thing, not point at it.

Comments

Private

Only you and the author can see what you write here. The author replies, and you can answer back.