How to design an email newsletter: a beginner's guide

Step 1

One goal and the structure of the email

Don't start with the layout; start with the question: what should the reader do after reading? Buy a book, register for an event, read an article. One goal, one main button. For a practice exercise, take an imaginary brief: a bookstore's monthly newsletter with one new release, a selection of three books and an invitation to a readers' meetup.

• •the subject line is short and specific, not "November news";
• •the preheader is the line an email program shows next to the subject: continue the subject's thought, don't repeat it;
• •the order: a header with the logo, a main block with a heading and a button, secondary blocks, a footer with contacts and unsubscribe.

💡 Write the copy before the design. Once the text is ready, you can see how many blocks you really need and how many are filler.

Step 2

Width, grid and modules

Email programs render HTML differently: Mailchimp's help notes they use different rendering methods, including Microsoft Word's, so complex code may not display as intended. That's where the main rules of email design come from. Keep the email 600 px wide or less, as Mailchimp recommends, because emails are often read in a narrow preview pane. Stick to one column: it reads best on a phone. According to Can I email, Outlook for Windows (versions 2007–2019) doesn't support display: flex, so complex multi-column grids are a risk.

• •build the email from modules: heading, text, image with a caption, button, divider;
• •keep the same spacing between modules;
• •if you need two columns (say, a book cover and its description), plan how they become one on a phone.

Step 3

Fonts, colors and dark mode

Custom web fonts work poorly in email: by Can I email's estimate, only a minority of email clients support @font-face. So either use system fonts or set a web font with a system fallback, and check how the email looks with the fallback. According to Can I email, the dark mode media query (prefers-color-scheme) is also supported by only some email clients, so check the email in dark mode too.

• •body text should be large enough to read on a phone without zooming;
• •contrast: for normal text, WCAG (level AA) requires a ratio of at least 4.5:1;
• •check a logo on a transparent background against both white and dark: a dark logo can vanish in dark mode.

💡 Make two versions of the email in your layout, light and dark, and see whether anything important gets lost. That's quicker than catching the problem after sending.

Step 4

Images, buttons and accessibility

A typical mistake is making the whole email one image. If images don't load, the reader sees an empty email, and screen readers read nothing. So headings, body text and buttons should be real text, with images as a supplement.

• •give every meaningful image short alt text: "Cover of the book ...", not "image1";
• •make the button text-based and large, so it's easy to hit with a finger;
• •the button text describes the action: "Register for the meetup", not "Click here";
• •compress images: large files load slowly on mobile data.

Step 5

Footer, testing and feedback

The footer needs the sender's contacts and a visible unsubscribe link. Google's sender requirements say marketing messages must include a clearly visible unsubscribe link in the message body, and senders of more than 5,000 messages a day to Gmail accounts must support one-click unsubscribe. Before sending, test the email: Mailchimp advises checking it in different email programs, because each renders HTML its own way.

• •send a test to yourself in several email services and open it on a phone and a computer;
• •turn on image blocking in your email program and check whether the email still makes sense;
• •check every link and button;
• •show the layout or test email to other people and ask what they understood in 5 seconds.

💡 In your portfolio, show not only the final email but also the constraints: width, fallback fonts, how it looks in dark mode and without images. That's what separates email design from a pretty picture.