How to build an email that doesn't break in Outlook

You can build a web page for any browser released in the last decade and it will look roughly the same everywhere. Email does not work like that. The message you send is rendered by dozens of clients, and some of them — Outlook on Windows most famously — use a rendering engine that predates most of modern CSS. Flexbox, grid, external stylesheets and half of what you would normally reach for simply do not apply.

So the craft of email is mostly the craft of constraint: a narrow, table-based layout with inline styles, and no cleverness.

The rules that actually matter

• 600 pixels wide. It is the width that has survived every era of email, and it still fits the preview pane without horizontal scrolling.
• Tables for layout. Not because it is elegant, but because it is the only structure every client agrees on.
• Inline styles. A style block in the head gets stripped by several webmail clients; a style attribute on the element itself survives.
• One column. Side-by-side columns break down unpredictably on narrow screens and in older clients.
• Real text, not text in images. Images are blocked by default in many clients — an image-only email arrives blank.
• A preheader. That short line after the subject in the inbox list is prime real estate; without one, clients pull the first words of your email, which is usually “View in browser”.

Build it in blocks instead of by hand

Hand-writing nested tables is miserable and easy to get wrong. The Ettex email builder stacks the message out of blocks and emits the table markup for you.

1. Open the email builder and pick a type to start — welcome, order confirmation, receipt, newsletter, password reset, shipping notice, abandoned cart, event invite, invoice reminder and more, or a blank canvas. Each type starts with a sensible arrangement of blocks rather than an empty page.
2. Add blocks from the library on the left: logo, heading, text, button, image, product row, divider, spacer, social links, footer. Click to append or drag them into place.
3. Select any block to edit it on the right — text, button label and link, image URL, alignment, spacer height, product name/qty/price, the footer address and the unsubscribe label.
4. Set the preheader and the accent colour once in Email settings; the accent flows through buttons and links.
5. Switch between the desktop and mobile preview to check the message at both widths before you send it.
6. Export HTML to download the file, or Copy HTML to paste it straight into whatever sends your mail.

The output is a 600px table-based document with inline styles and a hidden preheader block — the shape described above, generated rather than typed.

Write the thing people actually read

Rendering is the part everyone worries about; attention is the part that decides whether the email works. Three habits carry most of it:

• One message, one action. If the email asks for two things, it usually gets neither. Everything above the button should be arguing for that button.
• Front-load. Many people read the first two lines in the preview pane and never open the message — put the point there, not in paragraph four.
• Sound like a person. Personalisation tokens like {{name}} are filled in per recipient, but a merge field is not a substitute for a sentence somebody would actually say.

Check before you send

• Read it with images off — the message should still make sense.
• Look at it on a phone. Most email is opened there, and a 16px body that felt large on a laptop is right on a phone.
• Check the footer: a physical address and a working unsubscribe link are legal requirements for marketing mail in most jurisdictions, not decoration.
• Send yourself a test and look at it in the client your audience actually uses — the one you can least afford to break is usually the one you never open yourself.

Email is an old format with a lot of rules, but the rules are stable — learn them once and they keep working. Build in blocks, keep it to one column and one ask, and check it with images off before it goes out.