Newsletter

The email design

One 600-pixel column: a white card on a soft grey page, a four-pixel lime accent bar across the top, the wordmark beneath it, and Inter for every line. Then the band: the post's hero artwork, darkened, with a large green part numeral and the title in white. Links use the readable text green and the card corners sit at 14 pixels. It is the site, translated into what email clients allow.

The band is a generated image (one per post, per language), so it renders the same in every client, and the title under it is repeated as real text: a reader with images off, larger type, or a screen reader loses nothing but mood. Dark mode follows the reader's preference, with the same paired-values idea as the site tokens: the page flips to near-black, the card to dark grey, the logo swaps for its light version, and the greens step up to stay readable. The band is dark by design, so it is the one element that needs no swap.

Why the title is doubled

The band and the heading show the same title to different readers. Each reason below is a reader the design would otherwise lose.

• Scanners skip banners. A styled graphic block at the top of an email reads as an advert (the pattern is called banner blindness), and a reader in a hurry jumps past it to the first text. If the title lived only in the band, that reader would not see it. The text heading is where their eye lands.
• Corporate Outlook blocks remote images by default, and this newsletter's readers are engineers, the audience most likely to sit behind it. With the title as text, an email with every image blocked still says what it is about; the band's alt text restates the series, part and title for the same reason.
• Screen readers navigate email by headings, and a title inside an image is not a heading. Reader-set larger type scales text, never images. WCAG (the Web Content Accessibility Guidelines) makes the same demand in point 1.4.5: no images of text where real text can do the job.
• The doubling is measured, not assumed. The band and the button link the same post with different utm_content values, so the click data shows whether the band earns its place or the button does the work.

Sources: Nielsen Norman Group — banner blindness, the eyetracking research · Litmus — email image blocking, client by client · W3C — Understanding WCAG 1.4.5, images of text

What the email says

The email reuses the post’s own words, so nothing is written twice and nothing can disagree with the site. A series post gets the series eyebrow and its part number, the body is the post’s own description, and the button is the one action.

• Series subject: “New in the series: {title} (Part N)”, with the title cut at its first colon so the line stays short.
• Standalone subject: “New post: {title}”.
• One green button, “Read the post →”. The email asks for exactly one click.
• A series post closes by naming the series and linking the previous part, so a new subscriber can reach the earlier parts.
• Each language’s campaign goes to its own list, and only when the translation exists.
• The title appears twice on purpose: composed in the band image and again as a text heading. The band is presentation; the text heading is what a screen reader or an images-off client actually gets.