How to build an HTML email that works in Gmail and Outlook

An email that looks perfect in your browser can fall apart in an inbox: columns collapse in Outlook, styles vanish in Gmail, buttons turn into plain links. None of this is random. Each client applies its own rules, and a handful of techniques covers almost all of them.

Why Gmail and Outlook break emails

• Outlook for Windows (the classic desktop app) renders HTML with Microsoft Word's engine. It ignores flexbox, grid, floats, most positioning, max-width on many elements and CSS background images. Microsoft is moving to a new Outlook based on a browser engine, but the classic version will stay in companies for years.
• Gmail rewrites the HTML it receives. It supports a <style> block in many cases but removes it in others (for example in some forwarded or non-Google-account contexts), and it drops styles it considers unsafe. Inline styles are the safest bet.
• Mobile apps display the email in a column around 320 to 400 pixels wide and may rescale it.

The answer is to write for the weakest client: tables for layout, inline styles for appearance, and conservative CSS.

1. Structure: tables and a fixed width

Use an outer table at 100% width for the background color, and an inner table 600 pixels wide, centered, for the content. Add role="presentation", cellpadding="0", cellspacing="0" and border="0" to every layout table so screen readers do not announce them as data tables and Outlook does not add gaps.

For the inner table, set both the HTML attribute and the style: width="600" for Outlook, and style="width:100%; max-width:600px" for clients that support it. Outlook reads the attribute; the others shrink the table on small screens.

Columns are table cells side by side. Give each cell a fixed width, and avoid nesting more than three or four levels deep: every level is another chance for Outlook to miscalculate a width.

2. Inline CSS

Every visual style goes in the style attribute of the element it applies to: <td style="padding:24px; background-color:#ffffff;">. A style written inline travels with its element; nothing a client strips from the <head> can affect it.

Keep a short <style> block only for what cannot be inline: media queries and a few client-specific fixes. Design the email so it stays readable if that block is ignored.

If you already have HTML written with a stylesheet, a CSS inliner copies each rule into the matching elements. Our free CSS inliner does this in the browser and keeps media queries.

3. Images

• Set the width attribute in pixels (Outlook uses it), plus style="display:block; width:100%; max-width:600px; height:auto;" for responsive clients. display:block removes the gap that appears under images in some clients.
• Always add meaningful alt text: many clients block images until the reader allows them, and the alt text is all they see.
• Host images on a public HTTPS URL. Avoid SVG and WebP for important images: support is inconsistent. PNG and JPEG are safe; GIF works, but Outlook for Windows shows only the first frame.
• Do not put essential text inside an image: it is invisible when images are blocked and unreadable for screen readers.

4. Buttons

A link with padding looks like a button in Gmail but often shrinks to plain text in Outlook, which ignores padding on inline elements. The reliable pattern is a "bulletproof" button: a table cell with a background color and padding, containing the link.

In practice: a one-cell table, <td style="background-color:#ff5a00; border-radius:8px;">, and inside it <a href="…" style="display:inline-block; padding:12px 28px; color:#ffffff; text-decoration:none;">. Outlook ignores the rounded corners and shows a square button, which is an acceptable fallback. For pixel-perfect rounded buttons in Outlook, some teams add VML in conditional comments, at the cost of more complex code.

5. Fonts and text

Web fonts load in Apple Mail and some mobile clients, but not in Gmail or Outlook for Windows. Always declare a fallback stack, such as font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;. Classic Outlook can fall back to Times New Roman when it does not recognize a font, so put a safe system font in every stack.

Set font-size and line-height explicitly on each text cell, in pixels. Keep body text at 14 to 16 pixels: smaller text gets enlarged automatically by iOS, which can break the layout.

6. Mobile

Start from a single-column layout: it needs no media query and reads well everywhere. For multi-column sections, add a media query that makes each column display:block; width:100% below about 480 pixels, so columns stack. Clients that ignore the media query will show the columns side by side, scaled down, which is why a 600-pixel maximum width matters.

Make buttons at least 44 pixels high and leave space around links so they are easy to tap.

7. Testing routine

1. Preview the layout. Paste the HTML into our free email preview tool and switch between Gmail, Outlook, desktop and mobile widths to spot overflowing text or columns that do not stack.
2. Check the code. The email compatibility checker lists the tags and CSS properties that Gmail, Outlook, Apple Mail or Yahoo do not support.
3. Send a real test to accounts on Gmail, Outlook (desktop app if possible) and a phone. Check images, links, the unsubscribe link and the plain-text version.
4. For critical campaigns, a screenshot service such as Litmus or Email on Acid renders the email in dozens of real clients. A browser preview cannot reproduce Outlook's Word engine exactly.

Writing all of this by hand is slow and error-prone. A block-based HTML email editor generates the tables, inline styles, image attributes and bulletproof buttons for you, so you can spend your time on the content and on testing.

FAQ