{"id":97032,"date":"2014-10-07T07:21:44","date_gmt":"2014-10-07T07:21:44","guid":{"rendered":"https:\/\/mailrelay.com\/blog\/2026\/09\/30\/the-10-basic-keys-to-newsletter-layout\/"},"modified":"2026-11-01T01:05:50","modified_gmt":"2026-11-01T01:05:50","slug":"the-10-basic-keys-to-newsletter-layout","status":"publish","type":"post","link":"https:\/\/mailrelay.com\/en\/blog\/2014\/10\/07\/the-10-basic-keys-to-newsletter-layout\/","title":{"rendered":"Newsletter dimensions: size, width and 10 keys to a good layout"},"content":{"rendered":"\n

What size should a newsletter be? Between 600 and 640 pixels wide, images at double resolution and under 102 KB of HTML so Gmail doesn’t clip it.<\/p>\n\n\n\n

There’s no height limit, but what matters has to be visible on the first screen.<\/p>\n\n

With those three measurements you can start building your layout. But a newsletter that looks fine on your computer can break on mobile, in Outlook or in dark mode.<\/p>\n\n

In this guide you’ll find the full dimensions table, how your email looks in each email client and the 10 keys to laying it out without surprises.<\/p>\n\n\n

Newsletter dimensions: reference table<\/h2>\n\n

These are the email dimensions I recommend in 2026. They apply whether you code the HTML by hand or use a visual editor.<\/p>\n\n

Element<\/th>Recommended size<\/th>Why<\/th><\/tr><\/thead>
Email width<\/td>600-640 px<\/td>It fits entirely in the reading pane of desktop email clients and adapts well to mobile<\/td><\/tr>
Email height<\/td>No fixed limit<\/td>What decides whether they keep reading is the first screen: about 300-500 px<\/td><\/tr>
Header image<\/td>600 \u00d7 200-300 px (uploaded at 1,200 px wide)<\/td>At double resolution it looks sharp on retina screens<\/td><\/tr>
Body images<\/td>The width of their column, uploaded at double size<\/td>A 300 px image is uploaded at 600 px<\/td><\/tr>
Size of each image<\/td>Under 200 KB, as a guideline<\/td>Loads quickly even on mobile data<\/td><\/tr>
HTML size<\/td>Under 102 KB<\/td>Above that, Gmail clips the message and shows “[Message clipped]”<\/td><\/tr>
Body text font size<\/td>16 px (minimum 14 px)<\/td>Below 13 px, the iPhone enlarges it and throws the design off<\/td><\/tr>
Headline size<\/td>22-28 px<\/td>A clear hierarchy without taking up half the screen<\/td><\/tr>
Buttons<\/td>At least 44 \u00d7 44 px<\/td>It’s the minimum touch target Apple recommends for tapping with a finger<\/td><\/tr>
Preheader (preview text)<\/td>40-100 characters<\/td>It’s what people read next to the subject line in the inbox<\/td><\/tr><\/tbody><\/table><\/figure>\n\n
\"Infographic<\/figure>\n\n

If you only remember one thing, make it this: 600 px wide and under 102 KB of HTML<\/strong>.<\/p>\n\n

That alone avoids most problems. The other measurements fine-tune the result.<\/p>\n\n

How your newsletter looks in each email client<\/h2>\n\n

Why do you need to lay out an email so carefully when a website looks fine in any browser? Because each email client interprets the code in its own way. And not always the way you expect.<\/p>\n\n

According to Litmus’s September 2026 market share report, Apple Mail accounts for 76.56% of opens.<\/p>\n\n

It’s followed by Gmail, with 16.10%, and desktop Outlook, with 3.48%.<\/p>\n\n

Be careful with the Apple figure: Apple Mail Privacy Protection opens emails automatically and inflates it. Even so, it gives you an idea of where you need to test.<\/p>\n\n

Email client<\/th>What to keep in mind when building the layout<\/th><\/tr><\/thead>
Apple Mail (iPhone and Mac)<\/td>Good HTML and CSS support. Applies dark mode and enlarges small text<\/td><\/tr>
Gmail (web and app)<\/td>Clips messages with more than 102 KB of HTML and may invert colors in dark mode<\/td><\/tr>
Classic Outlook for Windows<\/td>Uses the Word engine: ignores many CSS properties and needs tables<\/td><\/tr>
New Outlook and Outlook.com<\/td>Web engine, much closer to a browser<\/td><\/tr>
Yahoo Mail<\/td>Decent support, but it’s worth testing buttons and dark mode<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

The trickiest case is still classic Outlook.<\/p>\n\n

Microsoft is moving its users to the new Outlook, but it hasn’t set an end date for the classic version.<\/p>\n\n

As long as it’s still used in so many companies, laying out with tables is the safe choice.<\/p>\n\n

What to consider before designing an email<\/h2>\n\n

Email dimensions are the technical foundation. But before you open the editor, it’s worth being clear about three design decisions.<\/p>\n\n

Keep an eye on image file size<\/h3>\n\n

Images are heavy. A newsletter with five uncompressed photos can take several seconds to load on mobile data.<\/p>\n\n

And if it’s slow, the reader leaves.<\/p>\n\n

Compress each image before uploading it, and don’t use a 3,000 px photo where it will be displayed at 600.<\/p>\n\n

There’s more detail in key 8.<\/p>\n\n

Use images that support the message<\/h3>\n\n

An image should say the same thing as the text. If you’re selling a mountain getaway, a photo of a valley does part of the work.<\/p>\n\n

If you’re promoting clothes, show the garments.<\/p>\n\n

What doesn’t work is filler images. They take up space, add weight and give the reader nothing.<\/p>\n\n

Simple design works too<\/h3>\n\n

Not every email needs images. In a promotional send, the email should be visual because you’re after a purchase, a sign-up or a booking.<\/p>\n\n

But if you want to feel close to your readers or share an opinion, an almost text-only email works just as well.<\/p>\n\n

\n
\n

When designing an email, whether in HTML or with a visual editor, my advice is always the same: the simpler, the better. We’re not creating a work of art, but an email with a clear, specific goal: to sell, drive traffic to the website or get replies. Yes, it has to look good, but it’s not there to distract the reader with its beauty; it’s there to get them to do what you want. Even in a promotional email, a good product photo and a clear button are worth more than ten decorations. Simple and clear: it’s almost always the best advice.<\/p>\nJose Argudo<\/strong>, CMO at Mailrelay<\/cite><\/blockquote>\n<\/div><\/div>\n\n

The ideal newsletter structure<\/h2>\n\n

The structure decides whether the reader understands your message in the first few seconds. This is the one I recommend, from top to bottom:<\/p>\n\n

Area<\/th>What to include<\/th>Guideline size<\/th><\/tr><\/thead>
Preheader<\/td>A sentence that completes the subject line<\/td>40-100 characters<\/td><\/tr>
Header<\/td>Logo and, if needed, a main image<\/td>600 \u00d7 200-300 px<\/td><\/tr>
First screen<\/td>Headline, a line of context and the main button<\/td>The first 300-500 px<\/td><\/tr>
Body<\/td>Short blocks of text and image, one at a time<\/td>One 600 px column or two 300 px columns<\/td><\/tr>
Call to action<\/td>A clear button with a verb<\/td>Minimum 44 \u00d7 44 px<\/td><\/tr>
Footer<\/td>Company details, unsubscribe link and legal notice<\/td>12-14 px text<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

A rule that always works: one email, one goal. If you have three things to say, prioritize one and save the others for the next send.<\/p>\n\n

And a good structure is useless if you then send the same thing to your whole list: segment your subscribers<\/a> so each one gets what interests them.<\/p>\n\n

\n

Lay out your newsletters without coding<\/strong><\/p>\n\n\n\n

With Mailrelay’s visual editor, you can create newsletters that look great on mobile without writing a single line of HTML.<\/p>\n\n\n\n

\n
Create a free account<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n

10 keys to laying out your newsletter<\/h2>\n\n

These are the 10 keys I check in every newsletter before sending it.<\/p>\n\n

Some are about design and others are technical, but they all prevent real problems.<\/p>\n\n

1. Choose a simple, mobile-friendly design<\/h3>\n\n

A simple design looks good in more places.<\/strong> Use standard fonts (Arial, Helvetica, Georgia or Verdana), flat color backgrounds and a single column on mobile.<\/p>\n\n

Most of your subscribers will open the email on their phone.<\/p>\n\n

That’s why the design has to be responsive<\/a>: it adapts automatically to the screen width.<\/p>\n\n

If two columns don’t fit, they become one. And if a button ends up too small, it grows.<\/p>\n\n

2. Use simple HTML and add a text version<\/h3>\n\n

The simpler the code, the fewer the surprises.<\/strong> No JavaScript, forms or effects that depend on scripts: email clients block them for security reasons.<\/p>\n\n

Always send an HTML version and a plain text version. If someone can’t view the HTML, they’ll read the text.<\/p>\n\n

In Mailrelay, the text version is generated automatically from the HTML.<\/p>\n\n

That way both say the same thing, and filters don’t become suspicious of a message with two different contents.<\/p>\n\n

3. Lay out with tables<\/h3>\n\n

Tables are still the most reliable way to lay out an email.<\/strong> On a website you’d use layers (divs) and modern CSS.<\/p>\n\n

Not in email, because classic Outlook for Windows uses the Word engine and doesn’t understand much of that CSS.<\/p>\n\n

With tables you control the width, columns and spacing in every email client. A tip: don’t nest tables more than three levels deep.<\/p>\n\n

Beyond that, the code becomes hard to maintain and gets heavier.<\/p>\n\n

4. Don’t go over 600-640 px wide<\/h3>\n\n

It’s the email width that works best on desktop and mobile.<\/strong> Desktop email clients show the email in a reading pane that’s narrower than the screen.<\/p>\n\n

At 600-640 px the email fits entirely, with no horizontal scroll bar.<\/p>\n\n

On mobile, a responsive design shrinks that width to the screen’s.<\/p>\n\n

What you should avoid is the opposite: designing at 800 or 1,000 px and hoping it adapts.<\/p>\n\n

The text would be tiny on a phone.<\/p>\n\n

5. Apply inline styles<\/h3>\n\n

Some email clients ignore the styles in the email’s head.<\/strong> That’s why important styles (color, font size, margins) go inside each tag with the “style” attribute.<\/p>\n\n

That way you make sure the text looks the same in Gmail, Outlook and Apple Mail.<\/p>\n\n

Visual editors, like Mailrelay’s, do it for you when you save the design.<\/p>\n

\n
\"Code<\/figure>\n<\/div>\n

6. Prepare your images properly<\/h3>\n\n

Images are what breaks most often in an email.<\/strong> Always check these four points:<\/p>\n\n

What to check<\/th>Why<\/th><\/tr><\/thead>
“display:block” style on every image<\/td>Gmail adds white space between images placed next to each other<\/td><\/tr>
Width and height set in the code<\/td>Keeps them from distorting while they load<\/td><\/tr>
Alternative text (alt)<\/td>If images are blocked, the reader knows what’s there<\/td><\/tr>
JPG, PNG or GIF format<\/td>They’re the ones every email client understands. Not WebP yet<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

And don’t put important text inside an image. If it doesn’t load, the message disappears.<\/p>\n\n

Animated GIFs<\/a> do work, with one caveat: classic Outlook only shows the first frame.<\/p>\n

\n
\"Example<\/figure>\n<\/div>\n

7. Don’t attach files<\/h3>\n\n

Attachments make delivery harder.<\/strong> Spam filters scrutinize doc, exe and zip files closely, and they also greatly increase the size of the message.<\/p>\n\n

Upload the file to your website, Google Drive or Dropbox and add a button that links to it.<\/p>\n\n

That way the email is lighter and, on top of that, you know how many people download it thanks to the click statistics.<\/p>\n\n

8. Optimize image file size<\/h3>\n\n

Compressing an image can cut its size in half without anyone noticing.<\/strong> You can use free tools like TinyPNG or Squoosh, or export from your editing program at 70-80% quality.<\/p>\n\n

Use JPG for photos and PNG for logos or images with a transparent background.<\/p>\n\n

And upload them at double the size they’ll be displayed at: a 600 px wide image is uploaded at 1,200 px.<\/p>\n\n

It’ll look sharp on retina screens and, well compressed, it will still be light.<\/p>\n\n

9. Always include the legal footer<\/h3>\n\n

The footer isn’t optional.<\/strong> In Spain, the LSSI requires you to identify the sender and offer a simple, free way to unsubscribe in every commercial communication.<\/p>\n\n

The GDPR also requires you to explain how you process data.<\/p>\n\n

Include your company’s name and address, the unsubscribe link and a link to your privacy policy in the footer.<\/p>\n\n

Since 2024 Gmail and Yahoo, and since 2025 Outlook, also require one-click unsubscribe from bulk senders.<\/p>\n\n

You’ll find the details in the glossary entry on the List-Unsubscribe header<\/a>.<\/p>\n\n

10. Test before sending<\/h3>\n\n

Never send a newsletter without testing it.<\/strong> Send yourself a test email and open it on your phone and on your computer, in Gmail and in Outlook if you can.<\/p>\n\n

Check that the images load, that the links go where they should and that the text can be read without zooming.<\/p>\n\n

If you send to large lists, tools like Litmus or Email on Acid show you how it looks in dozens of email clients at once.<\/p>\n\n

\n

Test your newsletter before sending it<\/strong><\/p>\n\n\n\n

Send yourself a test email from Mailrelay and check how it looks before sending it to your list.<\/p>\n\n\n\n

\n
Try Mailrelay for free<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n

Dark mode: how to lay out so your design doesn’t break<\/h2>\n\n

More and more people read their email in dark mode<\/a>.<\/p>\n\n

And each email client applies it in its own way: some only change the background, others invert all the colors.<\/p>\n\n

A black logo on a transparent background can disappear.<\/p>\n\n

To make your newsletter hold up to the switch:<\/p>\n\n