HTML Email Design: How to Build a Newsletter That Works

What Is HTML Email Design and How Does It Differ From Web Design?

HTML email design is the craft of building the layout, images, copy and buttons of a newsletter that opens inside email clients. It differs from web design because Gmail, Outlook and Apple Mail each read the same code differently. The goal is not the fanciest page, but a simple message that holds up everywhere.

On the web, you can lean on modern CSS. In email, the opposite happens. Each client applies its own rules, and some of them rewrite your code before showing it, so test early.

For example, three columns side by side take a few lines of CSS on a web page. The same columns can fall apart in classic Outlook. In short, email design means accepting the limits up front.

This guide sticks to official documentation for every technical and legal claim. If you want to use AI for email copy, read our guide to AI in email marketing instead; we do not repeat it here.

What Goal Should You Set Before You Start HTML Email Design?

Pick one goal first. For instance, should the newsletter sell something, bring readers to a blog post, or book a call? If you build the layout before you decide, the message pulls in several directions and readers click nothing.

Write the goal in one sentence. Next, choose no more than three content blocks that support it.

• A headline and a one-line promise.
• A short paragraph or image that backs up the promise.
• One call-to-action button.

This keeps the template simple on its own. Also think about the audience. A newsletter to current customers should not sound like a message to a cold list. Knowing which group gave permission shapes both the copy and your legal position.

A sample goal sentence: "The only job of this email is to send readers to the quote form on our new service page." A sentence like that tells you what belongs in the email and what stays out. It also gives you a yardstick when you review the results.

How Wide Should HTML Email Design Be?

Most teams keep the main content column at about 600 pixels. That number is a habit, not an official standard. Desktop reading panes fit it well, and on mobile the column shrinks to the screen width.

So think "up to about 600, narrower on small screens" rather than a fixed 600. Match image widths to the column and leave the height on auto.

Note one catch. Microsoft's documentation for the Word-based rendering engine lists max-width among the properties it does not support. For Outlook, you therefore also need to set the width as an attribute on the table. That way classic Outlook gets a fixed width, and modern clients get a flexible one.

Also, leave padding inside the column. If text touches the column edge, it gets hard to read on a phone. Give the padding to the table cell, because the same Microsoft document lists padding as supported on table cells. So build this skeleton once and copy it into later templates.

Why Does HTML Email Design Still Use Tables?

Classic desktop Outlook renders HTML with the Word engine. Microsoft's archived documentation says that engine does not support float, position, background-image or max-width. Tables, on the other hand, sit in the fully supported group.

That is why the skeleton of an email layout still consists of nested tables. The outer table carries the background colour and width. Then the inner table carries the content.

Microsoft wrote the document for Outlook 2007, but classic Outlook still uses a Word-based engine, so the limits remain a practical reference. Still, confirm the current behaviour with your own tests.

The small example below shows a layout table that tells assistive technology it is for layout only.

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff">
  <tr>
    <td align="left" bgcolor="#ffffff" height="48">
      Headline and short promise go here.
    </td>
  </tr>
</table>

A layout table is not a data table. Tell screen readers so with role="presentation".

How Do You Keep an Email Compatible Across Clients?

Compatibility does not come from one magic snippet. It comes from sticking to a small set of features. According to Microsoft's document, the Word engine does not recognise elements such as form, script, iframe and button. It also shows only a static version of an animated GIF.

So put the most important information in the first frame of any GIF. Then the message survives in clients that never play the animation.

The table below sums up the web habits and their email-safe replacements.

In other words, you do not have to drop your web habits. You only need a second route for email.

How Do You Handle Inline CSS and Fonts in HTML Email Design?

Write the critical styles directly on the elements. Some clients may trim or ignore style blocks in the head. Indeed, Microsoft's table marks the style element as having no support. Putting colour, size and spacing inline is therefore the safest route.

Most tools do this for you automatically. Still, check the result yourself, because inliners sometimes miss a rule.

Microsoft's document lists the basic properties the Word engine fully supports. They include:

• color, font-family, font-size and font-weight.
• text-align, line-height and vertical-align.
• background-color and the border properties.
• width, height and padding on table cells.

Set these inline and you get the look you expect in most clients, classic Outlook included.

Keep fonts simple too. Web fonts may not load in every client, so name a fallback family that ships with the system. If you want a custom headline font, test that the fallback also looks good. For brand typography, see our guide on how to choose a logo font.

How Do You Make HTML Email Design Readable on Mobile?

First, start with a single-column flow. A layout that stacks columns on a phone causes the fewest problems on a narrow screen. Then keep body text at a comfortable reading size. About 16 pixels is a common starting point, but that is a habit, not a standard.

Make buttons big enough for a thumb and leave space around them. Also, do not pack links tightly together.

Mobile-first thinking works in email too. We covered the web version in our guide to mobile-first design. The principle is the same: build the narrowest screen first, then widen.

Also, send a test to your own phone. Opening the same message in several clients also exposes problems within seconds. On mobile, check this short list:

• Does the column fit without sideways scrolling?
• Do the headline and button show on the first screen?
• Can a thumb hit each link separately?
• Does the message still make sense with images off?

These four questions catch most mobile problems before you send.

How Does Dark Mode Affect HTML Email Design?

Dark mode makes some clients invert or adjust colours on their own. As a result, dark text can vanish on a dark background, or a white box can appear around your logo. Each client does it differently, so no single rule exists.

On the web, the prefers-color-scheme media query detects whether a user wants a light or dark theme. According to MDN, it has had wide browser support since January 2020. The color-scheme meta tag also tells the browser which themes you support.

Email clients differ in how far they support these features, so do not rely on the query alone.

• Export the logo with a transparent background and test it on both light and dark.
• Pick softer tones instead of pure black and pure white.
• Do not bake text into images.
• Preview in both light and dark mode.

Why Does Image Alt Text Matter in HTML Email Design?

Some clients may block images by default. In that case the reader sees the alt text where the image should be. Without alt text, half your message turns into an empty box.

First, write a short, descriptive alt text for every meaningful image. Then leave the alt text empty on purely decorative images.

Do not build the button as an image, because an image button disappears completely when images are off. Build a text button with a background colour on the cell instead.

You will find the details in our guide on what alt text is and how to write it. For example, "discount on selected winter items" helps more than just "sale".

Also, Microsoft's document says the Word engine shows only a static version of an animated GIF. Never tie key information to the animation.

Which Image Sizes and Formats Should You Choose?

First, prepare images for the column width. A common habit is to export an image at twice the column width and shrink it with the width attribute for sharp screens. That is a practical tip, not a rule. Keep file sizes small as well, because heavy images load slowly on mobile data.

JPEG and PNG are the most common formats. JPEG suits photos, and PNG suits logos that need transparency. Not every client shows newer formats, so test them in your target clients first.

You can shrink images with our image resizer.

• Do not bury the whole message in one image.
• Write the main information as text.
• Set width and height on every image.
• Remove large unused files from your server.

That way the message stays readable whether images are off or slow.

What Is a Preheader and How Do You Write One?

A preheader is the short preview text next to or under the subject line. It usually comes from the first text in the message. If you skip it, the client may show whatever text it finds first, such as a "View in browser" link.

Think of the preheader as the second half of the subject line. If the subject builds curiosity, then let the preheader state the concrete benefit.

Most templates write this text in a hidden span at the very top of the message. They hide it with inline values such as display:none. The number of visible characters differs between clients, so put the key information at the start of the first sentence.

Finally, do not repeat the same sentence in the subject and the preheader. Readers see that as a wasted chance.

A sample pair: subject "Our new service page is live", preheader "Fill in the quote form in two minutes." They complement each other. This is only an example, so adapt it to your own message.

Why Does the Single-CTA Rule Work?

When a newsletter has several buttons of equal weight, readers struggle to choose. One clear call shortens the click path. Other links can exist, of course. One call just needs to dominate visually.

Let the button copy name the action. Instead of "Click here", choose "Open the quote form" or "Finish your order". Keep it short so that the button fits on one line, which also helps on mobile.

Build the button as a table cell. Give the cell a background colour, put the link inside, and add generous padding. This also works in the Word engine, because cell backgrounds and padding are on the supported list.

For copy ideas, read our guide on what a call to action is.

Colour matters too. Give the button text and the button background enough contrast, or the button looks faded. Check that the button still stands out in dark mode.

How Do You Order the Content in a Newsletter Template?

Readers scan a newsletter quickly from top to bottom. So put the most important information at the top. The order below is a solid start for most newsletters.

1. Preheader text.
2. A small logo and, if you like, a view-in-browser link.
3. One-line headline.
4. A short paragraph that explains the promise.
5. One call-to-action button.
6. A secondary block, such as a product or article summary.
7. Footer and unsubscribe link.

Keep this skeleton for every send. Then readers learn where things are and move through the content faster.

Avoid long newsletters. Because one message with too many topics confuses readers, split it into separate sends. In short, let each newsletter do one job well.

Do the Sender Name and Subject Line Belong to HTML Email Design?

Yes, because readers see only these two before they open the message. Keep the sender name familiar and consistent, because a different name each time wears down trust.

Keep the subject line true to the content too. A misleading subject loses readers and can cause legal trouble. The FTC's CAN-SPAM guide, for example, says the subject line must accurately reflect the content of the message.

Sending from a business domain matters as well. A bulk newsletter from a free mailbox weakens both trust and deliverability. For a domain-based mailbox, see our business email guide.

Point the reply address to a mailbox that someone reads. That way, you do not lose readers who answer.

How Do You Keep Colour and Accessibility in HTML Email Design?

Contrast between text and background is the first condition of accessibility. The W3C's WCAG 2.2 success criterion 1.4.3 asks for a contrast ratio of at least 4.5:1 for normal text and at least 3:1 for large text. Aim for those ratios in email as well.

Light grey text on a grey background looks elegant, but nobody reads it on a sunny screen. So measure contrast in advance. Our colour contrast checker does it in seconds.

More accessibility steps are worth taking.

• Add role="presentation" to layout tables.
• Set the message language with the lang attribute.
• Write meaningful link text instead of "click here".
• Mark headings with real heading elements.

For the wider principles, see how to use contrast in design.

How Do You Keep Your Brand Consistent in an Email?

The newsletter is the email face of your website. Logo, colour and tone should match the site. When readers see the same brand in both places, trust grows.

First, keep the colour palette small. One main colour, one accent and neutral tones are enough for most newsletters. If you use the accent only on the call-to-action button, the button stands out naturally.

Also, keep your voice consistent. If your site sounds friendly, do not switch to a formal tone in the newsletter. Carry the heading style over too.

Tying font, colour and logo decisions to a guideline makes this easier. Our brand identity service covers that work.

Also, approve one template and copy it. Redesigning from scratch for every send wastes time and breaks consistency.

What Do US Rules Require in a Commercial Email?

The FTC's CAN-SPAM compliance guide for business covers commercial messages. It lists the main requirements. The header information must be accurate. The subject line must reflect the content. You must disclose clearly that the message is an advertisement.

The guide also asks for your valid physical postal address in the message. It requires a clear and conspicuous explanation of how the recipient can opt out. You must honour an opt-out request within 10 business days.

The FTC adds that you cannot contract away your legal responsibility, even if another company handles your email marketing.

Therefore, put your address and a visible unsubscribe link in the footer. Do not shrink them to unreadable size.

This section is not legal advice. Rules differ by country, so if you email people in the EU or the UK, also read our guide on how to build a GDPR-compliant website and ask a lawyer about your case. You can read the FTC guide on its official page.

What Applies When You Email Recipients in Turkey?

Turkey's rules are stricter on consent. Article 6 of Law No. 6563 says commercial electronic messages can go to recipients only with their prior approval. You can collect that approval in writing or through any electronic means.

The second paragraph of the same article lets you send to tradespeople and merchants without prior approval. Article 8 gives recipients the right to refuse at any time. You must offer an easy and free way to refuse, and stop sending within three business days of the request.

Article 11 sets up a state system for approvals. Approvals that you do not transfer to it count as invalid. In practice, this system is called IYS.

This is not legal advice. Check the original text on the Turkish legislation portal and ask a local lawyer.

How Do Sender Authentication and Unsubscribe Headers Affect Delivery?

A beautiful design does not matter if the message lands in spam. According to Google's sender guidelines, bulk senders who send more than 5,000 messages a day to Gmail accounts must set up SPF, DKIM and DMARC.

The same guidelines ask for one-click unsubscribe in marketing messages, using the List-Unsubscribe and List-Unsubscribe-Post headers. They also tell you to keep the spam rate in Postmaster Tools below 0.30%.

These settings live at the DNS and sending-platform level. However, most email platforms add them for you.

You can check your own domain's records with our SPF, DKIM and DMARC checker. For details, read Google's email sender guidelines.

How Do You Test HTML Email Design Before Sending?

Testing is the step teams skip most often. Follow this order.

1. Send a test message to yourself and your team.
2. Open it in Gmail, Outlook and Apple Mail.
3. Check the phone in light and dark mode.
4. Turn images off and confirm the alt text reads well.
5. Click every link; for broken links, try our broken link checker.
6. Add tracking parameters to the links.

For tracking, the UTM builder does the job. We explain the logic in what UTM parameters are.

Never send test messages to a real customer list. Instead, send only to your own addresses.

Also check whether the message lands in spam. Send it to your own addresses at different providers and see where it goes. Prepare a plain-text version as well, so clients that show no HTML still get your message. Finally, proofread the subject line once more just before you send.

Which HTML Email Design Mistakes Show Up Most Often?

The same mistakes repeat. Knowing them saves time.

• Too many buttons and links.
• The whole message baked into one large image.
• Empty alt text.
• No preheader.
• A hidden or faded unsubscribe link.
• No dark mode test.

A newsletter made of a single image looks blank when images are off. Moreover, it tells screen reader users nothing.

You prevent most of these mistakes at the start, not at the end. So decide the goal, the single call and the exit route before you build the template.

In short, a plain template beats a fancy but fragile one every time.

How Do You Measure HTML Email Design Results?

First decide what to measure. Some clients can distort open tracking, so do not trust the open rate alone. Clicks and the conversions after them are sturdier signals.

Then add UTM parameters to every link so you can see the traffic source in your analytics tool. After that, look at conversions page by page.

You can calculate the rate with our conversion rate calculator. Compare the result with your goal.

When results fall short, change the subject line first, the call-to-action copy second and the layout last. If you change three things at once, you cannot tell which one worked.

Watch these signals:

• Clicks and which link got them.
• What clickers do on your site, such as submitting a form.
• The share of readers who unsubscribe.
• The share of messages that bounce.

If unsubscribes jump unexpectedly, you may be sending to the wrong audience. Review your list selection first.

When Should You Not Build the Email Yourself?

However, you do not have to hand-code every template. The template editor of a ready-made email platform is enough for many small businesses. Still, hand the job to a specialist in some cases.

• You need a flawless look in many clients and have no testing setup.
• Deliverability problems keep showing up, and you cannot manage SPF, DKIM and DMARC records.
• You have a large list and need to set up the sending infrastructure.
• You are unsure about the legal side of your consent and opt-out records.

Ask your hosting or email provider about sending infrastructure and DNS settings. Also, get a lawyer for legal compliance.

Our web design work can also connect to this workflow when you need design consistency between site and newsletter.