Product update email design that gets read

A product update email gets read when it tells a customer that something they use has changed, in their words, and gives them one next step. Make the header a 1200×600 image with the gradient baked in, show it at 600 pixels wide, and keep the change plus one button as live text.

What a product update email is for

People open this because the product they rely on moved. They want the change that affects them, and a way to use it. That is a different object from a changelog: the page is the record, and the email is the one entry a customer would notice, plus a button that opens it.

• Subject: name the change. "Notes stay on the day you wrote them" beats "Halden 1.8 is here".
• Preview text: the grey line under the subject should add a result, not "View this email in your browser".
• First screen: the header and the first sentence repeat the change, so a skim is enough.

The parts, from the inbox to the sign-off

The email is a short column about 600 pixels wide, the width layouts have long been built around so it fits a desktop reading pane and a phone. Halden, a fictional notes app, is the example: version 1.8 keeps a note on the day it was written.

Design the header at 1200 by 600

Export the header at 1200×600 pixels and display it at 600 pixels wide, so it shows at 300 pixels tall. The larger file stays sharp on high density screens, and the short shape leaves the first sentence visible on a phone.

The picture has to say the change. A header that reads "What shipped this week" asks the reader to hunt. A header that reads "Notes stay on the day" has already delivered the news.

Put the gradient in that image. Classic Outlook for Windows lays email out with Word and ignores CSS gradients, and other apps keep or drop them by version. A release should look the same everywhere, so the ground is a picture, with a solid colour from the same family on the cell behind it. Live text on a coloured band, built in layers, is covered in gradients in email. Size, alt text and dark mode in general are in email header design.

In Gradiently, design the frame on your Mark at 1200×600. Auto ink picks light or dark type from the Mark's palette, per line, and the calmest part of the ground moves behind the words, so the headline needs no box, shadow or blur. Export a PNG. That file freezes the choice. Set the live text colour yourself, and check it the way you would any colour contrast pair.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#9a3412" style="background-color:#9a3412;">
      <img src="https://example.com/email/halden-1-8.png"
           width="600" height="300"
           alt="Halden 1.8: notes stay on the day you wrote them"
           style="display:block; width:100%; max-width:600px; height:auto; border:0;
                  color:#fff7ed; font-family:Arial, Helvetica, sans-serif; font-size:20px;">
    </td>
  </tr>
  <tr>
    <td bgcolor="#fff7ed"
        style="background-color:#fff7ed; padding:28px 24px 8px;
               font-family:Arial, Helvetica, sans-serif; font-size:18px;
               line-height:1.5; color:#431407;">
      Notes stay on the day you wrote them. Open yesterday's note where you left it.
    </td>
  </tr>
  <tr>
    <td bgcolor="#fff7ed" style="background-color:#fff7ed; padding:8px 24px 28px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td align="center" bgcolor="#9a3412" style="background-color:#9a3412; border-radius:6px;">
            <a href="https://example.com/changelog/1-8"
               style="display:inline-block; padding:14px 22px;
                      font-family:Arial, Helvetica, sans-serif; font-size:16px;
                      line-height:16px; color:#fff7ed; text-decoration:none;">See what changed</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Many apps recolour the page and the live text in dark mode, and usually leave the image alone. Set an explicit text colour and background on the column, then read both modes. If the live sentence disappears, the picture is doing the text's job.

Words that still work when images are off

Some clients hide images until the reader allows them. The alt text is the headline, the first sentence repeats it, and the button is HTML, so the news survives. Three points are enough. For Halden 1.8: yesterday's note opens where you left it, today's note starts empty, and older days are one tap away.

The same ground can sit behind the changelog entry the button opens, so the click feels like one product. How a software brand stays consistent past a single email is covered in SaaS branding.

The signature is a strip, not a second header

Sign with a name and a role, as text: Mina Cole, Halden. If you add a picture, use a 600×200 strip with the wordmark only. Phone, address and the reply link stay in text, because the image can be blocked. Weight and a sharp export are in email signature design.

Build the email in this order

1. 1

   Write the one sentence

   Say the change the way a customer would repeat it. "Notes stay on the day you wrote them" is ready. "Various improvements" is not.

2. 2

   Design the header

   Build a 1200×600 frame on the Mark. Version in the small line, the change in the large one. Auto ink sets the type. Export a PNG.

3. 3

   Repeat it as live text

   The same sentence, at most three points, one button to that changelog entry, then your name.

4. 4

   Code a 600 pixel column

   One presentation table. The image is width 600 and height 300. The cell carries the fallback colour, and the alt text is the headline.

5. 5

   Test the three failures

   Read it with images blocked, in dark mode, and on a phone. If the change is obvious in all three, send it.

A moving header only earns its place when the first frame already says the change, because some Outlook versions show that frame and stop. A still PNG is the default. Animated email headers covers the weight and that first frame.