# Product update email design that gets read [Canonical HTML page](https://gradiently.design/guide/product-update-email) Customers open a product update to see what changed for them. Here is the header, the 600 pixel column and the words that make that clear in one skim. ## The short version - A product update email gets read when it names one customer-facing change in the subject, the header and the first sentence. - The header is a 1200×600 image displayed at 600 pixels wide, with the gradient exported into the picture rather than drawn with CSS. - Alt text and the first line of live text repeat the headline, so the email still works when images are blocked. - The full list of changes stays on the changelog. The email links to the one entry a customer would notice. - Close with a real name and, if you want a picture, a 600×200 signature strip that carries the brand and not the news. 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](https://gradiently.design/guide/changelog-design): 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. > **Write the inbox lines first** If the subject and the preview text do not say what changed, no header will save the email. Design after those two lines are true. ## 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. | Part | Job | Make it | | --- | --- | --- | | Subject | Gets the open | The change, in the customer's words | | Preview text | The grey line in the inbox | A result, not a view-in-browser line | | Header | Brand and headline | 1200×600 image, shown at 600 wide | | First line | Survives images off | The same headline, as live text | | The change | What they can do now | Three short points at most | | Button | The one next step | One HTML link, not a picture | | Sign-off | Who sent it | A real name, then an optional 600×200 strip | Seven parts, two pictures. Everything the reader must understand is text, so a blocked image cannot hide the news. ## 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. - Email header 1200×600: 1200 × 600 - Shown in the inbox 600×300: 600 × 300 - Signature strip 600×200: 600 × 200 The file is twice the size you display. The signature is a slim strip under the name, not a second header. 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. A 1200 by 600 email header reading What shipped this week, with no specific change named A label, not news. The reader still has to open the email and look for the point. A 1200 by 600 email header reading Notes stay on the day, labelled Halden version 1.8 The change is the headline. The version and the result sit in the small lines. 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](https://gradiently.design/guide/gradients-in-email). Size, alt text and dark mode in general are in [email header design](https://gradiently.design/guide/email-header-design). - Deep ember: #7c2d12 - Flame: #ea580c - Apricot: #fdba74 - Fallback: #9a3412 - Paper: #fff7ed - Ink: #431407 Ember, flame and apricot are the ground you export. Fallback is the solid colour behind the image, dark enough for light type. Ink is for live text on paper. Header ground to export: `linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%)` Export this as the header image. Do not paste it into the email as CSS. Light type holds on the deep end. On the pale end, the type goes dark. 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](https://gradiently.design/guide/color-contrast-accessibility) pair. ```html
Halden 1.8: notes stay on the day you wrote them
Notes stay on the day you wrote them. Open yesterday's note where you left it.
See what changed
``` The image is 1200×600, shown at 600 by 300. The cell's colour and the styled alt text remain when the picture is blocked, and the button is HTML. > **Host the image** Point the image at an https address. Do not embed the file in the HTML. Gmail clips a long message and hides the ending, often the unsubscribe line. 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. ### Avoid - A header that only says "Product update" - The whole changelog pasted underneath - The headline living only inside the image - Two or three competing buttons - A CSS gradient as the only background ### Do - A header that names the one change - Three things they can do now, then the changelog link - That line repeated as alt text and as the first sentence - One button, built in HTML - The gradient exported as the image, with a solid colour behind it 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](https://gradiently.design/guide/saas-startup-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](https://gradiently.design/guide/email-signature-design). A 600 by 200 email signature strip with the wordmark Halden and the line From Mina Cole A 600×200 strip under the name. It carries the brand. It does not carry the news. ## Build the email in this order 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. **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. **Repeat it as live text** The same sentence, at most three points, one button to that changelog entry, then your name. 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. **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](https://gradiently.design/guide/animated-email-header) covers the weight and that first frame. ## FAQ ### What size should a product update email header be? 1200×600 pixels, shown at 600 wide and 300 tall, so it stays sharp inside a column of about 600 pixels. ### Should the gradient in a product update email be CSS? No. Export the gradient as the header image and put a solid fallback colour behind it. Classic Outlook for Windows does not render CSS gradients. Use layers of CSS only when the words must be live text on a coloured band. ### How many changes belong in one product update email? One change the customer would notice, plus at most three short points. Put the full list on the changelog and link to that entry. ### What does the reader see if images are blocked? The alt text, the solid background colour, the first sentence and the button. Write the alt text as the headline and repeat it in the live text. ### Does a product update email need a signature banner? A name and a role as text are the signature. Add a banner only as a 600×200 strip, and keep every contact detail out of the image. ### Should a release email header be animated? Only when the first frame already names the change. Some Outlook versions show a GIF as a still. A PNG header is the better default.