Written by:
Hovers India
To design marketing emails that convert, follow seven steps: set one goal, choose a layout that serves it, build hierarchy top-down, write copy before styling, design a single dominant CTA, optimise for mobile and dark mode, and test across clients. Emails built on a 600px single-column layout with one primary CTA consistently outperform multi-column, image-heavy designs.
What is Email Marketing?
Email marketing is the practice of sending commercial messages to a list of subscribers who have opted in to hear from you. It covers newsletters, promotions, onboarding sequences, cart recovery, and re-engagement campaigns. Unlike paid channels, you own the audience and the delivery cost stays flat as the list grows.
Design is the part most teams underinvest in. The list and the offer decide whether someone opens. The design decides whether they act.
Types of Marketing Emails (And How Design Changes for Each)
The email type sets the goal. The goal sets the number of CTAs. The number of CTAs sets the layout. That chain is the whole logic of email design, and most guides skip it.
Welcome emails activate a new subscriber. One CTA, minimal imagery, warm plain-style copy.
Newsletters drive retention. Multiple scannable blocks, one link per story, one visually dominant CTA.
Promotional emails sell now. Hero image, price, and button above the fold.
Abandoned cart emails recover revenue. Product image plus a single CTA. Nothing else.
Re-engagement emails win back dormant subscribers. Text-heavy and low-friction, because heavy design signals "marketing" to someone already ignoring you.
Transactional emails inform. Plain, functional, no promotional chrome.
Announcement emails inform and click. Headline-led with one action.
Notice the pattern: the more commercial the intent, the more design work it needs. The more personal the intent, the less.
How to Design a Marketing Email in 7 Steps
1. Define one conversion goal
Write the goal in one sentence before opening any editor: "Get subscribers to book a demo." If you cannot name a single action, you are not ready to design. Emails with competing goals produce competing buttons, and competing buttons split clicks. This is the same discipline that drives conversion rate optimisation on landing pages.
2. Pick the layout that matches the goal
Use the inverted pyramid for single-action emails: headline, supporting detail, then the button. Use stacked single-column blocks for newsletters. Avoid multi-column layouts entirely. They collapse unpredictably on mobile and there is no reliable way to control the stacking order across every client.
3. Build the visual hierarchy top-down
Assume eight seconds of attention and a reader who scans rather than reads. Establish three levels: headline, body, action. Size, weight, and whitespace create those levels, not colour alone. If you squint at the email and cannot identify the button in one second, the hierarchy has failed.
4. Write the copy before you style anything
Design cannot rescue a message with no value in it. Write the headline, the two or three body lines, and the button label in a plain document first. Use "you" and "your" more than "we" and "our". Then style what survives. Copy-first is the fastest way to cut an email in half.
5. Design the CTA as the focal point
One primary CTA per email. Build it as HTML and CSS, never as an image, because blocked images will hide your only action. Give it a brand-contrast fill, generous padding, and a label describing the outcome rather than the mechanic. Secondary actions become text links or outline buttons, never a second solid button.
6. Optimise for mobile and dark mode
Most opens happen on a phone. Full-width buttons, 16px minimum body copy, and a single column handle mobile. Dark mode needs separate attention: transparent PNGs instead of white-background logos, and near-black and off-white hex values instead of pure #000000 and #FFFFFF, which invert badly.
7. Test across email clients before sending
Outlook renders through the Word engine and ignores much modern CSS, so buttons need VML fallbacks. Preview in Gmail, Apple Mail, and Outlook at minimum, in both light and dark mode, on desktop and mobile. Send yourself a live test. Editor previews lie.
Email Marketing Template Design: Structure and Specs
A reusable template removes most design decisions from every future send. Build it once in this order, top to bottom: preheader text, logo header, hero, headline, body, primary CTA, social proof, secondary CTA, footer with unsubscribe. Then lock the specs below into that template so nobody has to relitigate them per campaign.
| Element | Recommended Specification | Why It Matters |
|---|---|---|
| Email Body Width | 600px maximum | Prevents horizontal scrolling across email clients. |
| Body Text Size | 16px minimum | Improves readability and avoids automatic text resizing. |
| Headline Size | 22–28px | Maintains a clear visual hierarchy on mobile devices. |
| CTA Button | Minimum 44 × 44px | Makes buttons easier to tap on touchscreens. |
| Primary CTA | One per email | Keeps readers focused on a single action. |
| Text-to-Image Ratio | 60:40 (text to images) | Ensures key content remains visible if images are blocked. |
| Email Size | Under 100KB | Helps prevent Gmail from clipping the email. |
| Colour Contrast | Minimum 4.5:1 | Improves accessibility and text readability. |
| Alt Text | Add to every image | Communicates the message when images don't load. |
Two specs do the most work here: 600px width and one primary CTA. Get those wrong and no amount of polish recovers the campaign.
Email Marketing Campaign Design: Designing Across a Sequence
Almost every guide treats email design as a single-asset problem. It is not. Subscribers experience a sequence, and the sequence needs its own design logic.
Keep the frame consistent across the campaign: same header, same type scale, same button style. Familiarity reduces the cognitive cost of each open. Then escalate deliberately. Email one can afford to be spacious and low-pressure. Email three, sent to people who did not act, should be shorter, plainer, and more direct, with the CTA higher up. By the final message the design should look almost like a personal note.
The mistake is sending the same designed template three times and only changing the subject line. If someone ignored a polished promotional layout twice, a third copy of it will not work. Change the format, not just the words. This sequencing discipline sits at the centre of retention marketing, where email, WhatsApp, and SMS have to feel like one coordinated campaign rather than three separate ones.
9 Email Marketing Design Best Practices
Single column, always. Multi-column layouts break on mobile.
600px maximum body width.
16px minimum body copy, 22px or larger headlines.
One primary CTA, built in HTML, at least 44px tall.
Styled alt text on every image, with no critical text baked into graphics.
Transparent PNG logos and off-black or off-white values for dark mode safety.
4.5:1 contrast minimum on all body text.
Real preheader text, written as an extension of the subject line, never left as template filler.
Test in Gmail, Apple Mail, and Outlook, in both colour modes, before every send.
Most of these are enforced automatically once they live in a locked template, which is why template design pays for itself faster than any individual campaign optimisation.
Frequently Asked Questions
How many CTAs should a marketing email have?
One primary CTA. Newsletters can carry one link per story, but only one action should be visually dominant. Equal-weight buttons cause decision fatigue, and every additional CTA dilutes the others.
Are plain text or designed HTML emails better?
Neither wins universally. Format is a proxy for perceived intent, not a deliverability lever. Most tests showing plain text "winning" actually compared plain-text-styled HTML, not true plain text. Simple and personal beats commercial and designed, in the right context.
What is the best width for a marketing email?
600px. That figure exists because it fits the Outlook reading pane without horizontal scrolling. Below that width you lose usable space; above it, desktop clients clip or shrink your layout.
Why does my email look broken in Outlook or dark mode?
Outlook renders through the Word engine and ignores much modern CSS, so buttons need VML fallbacks. Dark mode inverts colours and exposes white-background images. Use transparent PNGs and avoid pure black and pure white.
Do I need a designer to create marketing emails?
No. A locked template plus a drag-and-drop builder covers most sends. A designer earns their fee on the initial template system, the brand type scale, and complex campaign creative, not on individual newsletters.