How to Make an Email Header That Doesn't Break
A friend sent me her newsletter last month and asked why it "looked fine in the preview and terrible in my inbox." I opened it on my phone. The header — a nice 1600px-wide banner with the issue name, the date, and a 40% off code baked into it — showed up as a grey box with a torn-image icon. The one piece of information the whole email existed to deliver was inside a picture Gmail had decided not to load.
That's the thing about an email header. It's the only design you make that has to survive being not displayed. Every other graphic you build — a poster, an Instagram story, a thumbnail — gets shown or it doesn't. An email header gets shown, or cropped, or inverted, or blocked, and it still has to leave the reader oriented. So the design brief isn't "make a pretty banner." It's "make a banner that degrades gracefully."
Here's what I've settled on, and a worked example you can copy.
The email header size that actually works: 600×200
Email is stuck in 2005 and that's genuinely fine. The near-universal safe content width for an HTML email is 600px. Wider than that and Outlook's desktop clients start scrolling horizontally or shrinking your layout in ugly ways.
So: design your header canvas at 600 × 200, and export at 2× (1200 × 400). Then set the image's display width to 600 in your email builder. The file is retina-crisp on a phone, and it's still "600 wide" as far as every email client is concerned.
Two hundred pixels tall is a deliberate choice, not a rounded number. The average phone shows roughly 500–600px of email before the reader has to scroll. If your header eats 400 of that, your actual first sentence — the reason they opened it — starts below the fold. I've seen open-to-click rates move on nothing but shrinking a header. Give it a fifth of the first screen, no more.
If you want a slimmer version: 600×120 for a text-only wordmark bar. That's often the better call for a weekly letter where people already know who you are.
Nothing important goes inside the image
This is the rule my friend broke, and it's the one that matters most.
Outlook desktop blocks images by default. Plenty of Gmail users have image-loading off. Some corporate mail gateways strip remote images entirely. Estimates vary, but a meaningful slice of your list — often 15–30% — sees your email with the header as an empty rectangle on first open.
So the discount code, the event date, the deadline, the "Issue #12" — none of it lives in the image. It lives in HTML text underneath. The header carries identity and mood: your wordmark, a colour block, maybe a small motif. Decoration, not information.
Which means writing real alt text, too. Not header.png. Something like Thistle & Thorn — Spring Issue. When the image is blocked, that alt text is what appears, and a good one reads as a legitimate line of the email rather than a broken asset.
Dark mode will flip your background — plan for it
Roughly half of email readers are in dark mode, and the major clients handle it inconsistently. Apple Mail aggressively inverts light backgrounds. Gmail on Android sometimes does. Outlook does its own thing.
The practical consequences:
Don't use a transparent PNG with dark text. It looks sharp on white, and it vanishes when the client paints a near-black background behind it. This is the single most common dark-mode header failure I see.
Use a solid background baked into the image. If your header has its own dark navy or deep green panel, the surrounding email can invert all it likes — your block stays exactly as designed.
Pick a background that works in both surroundings. A mid-tone or dark panel with light text sits comfortably on a white email and a dark one. A pure-white header on a white email is invisible in dark mode — it becomes a glowing brick.
The worked example: a 600×200 header for a small candle shop
Let's build one properly. The client is a fictional-but-typical small business: Thistle & Thorn, a candle maker who sends a monthly letter.
The content inventory is short, and that's the point:
- Wordmark: Thistle & Thorn
- A small right-aligned label: Spring Issue
- Nothing else. No date, no offer, no "shop now" button.
The layout: a deep forest-green panel filling the whole 600×200. The wordmark sits left at around x=48, vertically centred, in a warm cream (#f4ede3) at about 44px — big enough to read at a glance on a phone, small enough that it doesn't shout. "SPRING ISSUE" goes right-aligned, in a small-caps Inter at 16px with generous letter-spacing, in a muted version of the cream at maybe 60% opacity. One thin cream rule, 1px, sits under the wordmark as a bit of structure.
Then, in the email body directly beneath the image: an HTML text line reading "Spring Issue · March 2026 · 20% off the whole shelf with SPRING20".
Notice the split. Everything perishable and important is in text. Everything atmospheric is in the image. When the image is blocked, the reader sees "Thistle & Thorn — Spring Issue" as alt text, then the real line of text, and they've lost nothing except the mood. When it loads, they get the brand.
That's a header that degrades gracefully.
Building one in Ridvay Studio
Studio makes this quick because the canvas size is something you just say out loud. Open Ridvay Studio and type:
Email newsletter header, 600x200 canvas. Deep forest green solid background. "Thistle & Thorn" wordmark in warm cream on the left, large serif. Small right-aligned label "SPRING ISSUE" in letter-spaced uppercase, muted cream. Thin cream rule under the wordmark. Nothing else — no dates, no buttons.
What comes back is an editable design, not a flat picture you'd have to regenerate to change. The green panel is a shape layer. "Thistle & Thorn" is a text layer with a real font on it. That distinction is the whole reason this workflow beats prompting an image model — you can fix it instead of re-rolling it.
Three edits I'd make next:
- Click the wordmark and pull the size up until it fills roughly half the width. Small logos read as timid; at header scale, generous is right. This is the hierarchy point from Design Principles for Non-Designers doing real work.
- Check the contrast on the cream against the green. If it feels soft, nudge the cream lighter rather than the green darker — you want the panel to stay comfortable against a white email body.
- Swap the background to your brand's actual colour by applying your brand kit, so this header matches every other graphic you send. If you haven't set one up, How to Build a Brand Kit That Stays Consistent covers it.
Then export at 2× PNG to get your 1200×400 file, and set it to display at 600 wide in your email tool.
One more thing worth doing while you're in there: use one-click resize to spin the same header into a 1200×630 version for the web archive page of that newsletter. Same design, different frame, no rebuild.
The short version
Design at 600×200, export at 2×. Keep every date, code, and deadline out of the image and in HTML text. Bake a solid background in so dark mode can't gut you. Write alt text that reads like a sentence. And make the header do one job — say who this is from — because the email itself does the rest.
Ready to make one? Open Studio with this header prompt pre-filled — swap the name and the colour for your own and you've got a header in about two minutes.