Building an email is not like building for the web. Modern web browsers have excellent, consistent CSS support, but many email clients still render HTML in unpredictable ways — especially desktop Outlook for Windows, which uses Microsoft Word’s rendering engine instead of a browser engine.
Rest assured, creating reliable HTML email is very achievable once you know where the real trouble spots are. The key is to focus on three things:
- Simple design: The more complex your email design, the more likely it is to break in a client with limited CSS support.
- Table-based structure for Outlook: Desktop Outlook for Windows still renders email with Word’s HTML engine, so nested tables and inline CSS remain the most reliable way to keep your layout intact there.
- Testing across clients: Test your designs regularly. Rendering behavior changes as clients update, and a template that looks right in one client can look off in another.
Tip: Decide exactly which email clients you plan on supporting when building an HTML email
While general research is helpful, the email clients your subscribers use can vary significantly. If you know none of your recipients are using a particular client, save yourself some frustration and ignore it altogether.
Tip: Use a test management service like litmus.com or emailonacid.com
Knowing which email clients you’re targeting not only makes the building process easier, it can save you a lot of time in the testing phase too. Just remember that pixel perfection in all email clients is a pipe dream.
Design Considerations
Desktop Outlook for Windows has poor support for float, margin, and padding because it renders email with Word’s HTML engine rather than a browser engine. Gmail, Apple Mail, and most webmail and mobile clients handle modern CSS well, but if any of your subscribers use desktop Outlook, you’ll still need tables to build a layout that holds up everywhere. Keep in mind that although nested tables are widely supported, consistent treatment of width, margin, and padding within table cells is not.
Follow these tips to get the best results when creating your table structure:
Tip: Set cell width, not table width
Combining widths and padding for your table and CSS will result in varying appearances across different email clients. The most reliable way to maintain consistent width across email clients is to set a width for each cell instead of the table.
<table cellspacing="0" cellpadding="10" border="0"><tr><td width="80"></td><td width="280"></td></tr></table>
- Never assume that if you don’t specify a cell width, the email client will figure it out. It won’t. Also, avoid using percentage-based widths — desktop Outlook doesn’t respect them, especially for nested tables. Stick to pixels. If you want to add padding to each cell, use either the cell padding attribute of the table or CSS padding for each cell, but never combine the two.
Table nesting is far more reliable than setting left and right margins or padding for table cells. If you can achieve the same effect by table nesting, you will always get the best result across the buggier email clients.
Many email clients ignore background colors specified in your CSS or the <body> tag. Wrap your entire email with a 100% width table and give that a background color to work around this.
<table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td bgcolor="#000000">Your email code goes here.</td></tr></table>
You can use the same approach for background images too. Just remember that some email clients don’t support them, so always provide a fallback color.
Tip: Avoid unnecessary white space in table cells
Where possible, avoid whitespace between your tags. Some email clients can add additional padding above or below the cell contents, breaking your design for no apparent reason.
Some web clients strip CSS from the <head> of emails, so move all CSS inline.
Some email clients reject CSS shorthand for the font property. For example, avoid setting your font styles like this:
p { font:bold 1em/1.2em georgia,times,serif;}
Instead, declare the properties individually like this:
p { font-weight: bold; font-size: 1em; line-height: 1.2em; font-family: georgia,times,serif;}
Support for @font-face across major email clients is still inconsistent. It’s much better to use web-safe fonts in email. When declaring the color property in your CSS, some email clients don’t support shorthand hexadecimal colors like color:#f60; instead of color:#ff6600. Stick to the longhand approach for the best results.
Just like table cell spacing, paragraph spacing can be tricky to get a consistent result across the board. The best approach is to set the margin inline via CSS for every paragraph in your email, like so:
<p style="margin: 0 1 1.6em 0;">
If part of your design is height-sensitive and calls for pixel perfection, avoid paragraphs altogether and set the text formatting inline in the table cell instead. You might need to use table nesting or cell padding/CSS to get the desired result. Here’s an example:
<td width="200" style="font-weight:bold; font-size:1em; line-height:1.2em; font- family:georgia,'times',serif;">your height sensitive text</td>
Tip: Customize the color of your links
Some email clients will overwrite your link colors with their defaults, and you can avoid this by taking two steps. First, set a default color for each link inline like so:
<a href="http://somesite.com/" style="color:#ff00ff">this is a link</a>
Next, add a redundant span inside the <a> tag.
<a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>
To some, this may be overkill, but if link color is important to your design, then a superfluous span is the best way to achieve consistency.
Images in HTML emails
Many recipients still see your email with images blocked by default, especially on first open. If you start your design with that assumption, it forces you to keep things simple and ensure no important content is suppressed by image blocking. With this in mind, here are the essentials to remember when using images in HTML email:
Tip: Avoid spacer images
Spacer images and nested tables were once a common way to control spacing, but with image blocking on by default in most clients, this technique is unreliable today. Most clients replace blocked images with an empty placeholder in the same dimensions; others strip the image altogether. Stick to fixed cell widths to keep your formatting in place with or without images.
Tip: Always include the dimensions of your image
Email clients may enforce their own size standards when images are blocked and break your layout if you forget to set the dimensions for each image. Also, ensure that any images are correctly sized before adding them to your email. Some email clients will ignore the dimensions specified in the code and rely on the true dimensions of your image.
If you want to use a background image in your design, always provide a background color the email client can fall back on. This solves both the image-blocking problem and inconsistent background-image support at the same time.
Always provide descriptive alt text on your images. Beyond accessibility, alt text is what many recipients see in place of a blocked image, so it should carry real information, not just a filename or "image."
Tip: Design for dark mode
Many major clients (including Apple Mail, Outlook.com, and the Gmail and Outlook mobile apps) offer a dark mode that can automatically invert colors or apply their own dark theme to your email. Test your designs in dark mode specifically: transparent PNGs with dark text can become unreadable, and auto-inverted colors can clash with your branding. Setting explicit background colors (rather than relying on transparency) and using PNGs with a solid, on-brand background give you the most control.
Designing for mobile
Most marketing emails are now opened on a mobile device first, so mobile is the default experience to design for, not an afterthought. A few pointers to get a solid result on phones:
- Keep your primary content column at 600px wide or narrower. This renders well on both desktop and mobile, and gives good results in preview panes.
- Use a responsive or "hybrid" layout — media queries combined with a fluid table structure — so your design can adapt to different screen widths rather than relying on a single fixed layout for every device.
- Keep tap targets (buttons and links) large enough to tap accurately on a touchscreen, with enough spacing between them.
- Most mobile clients using WebKit or Blink (iOS Mail, the Gmail app, and others) can automatically adjust font sizes to increase readability. If testing shows this feature is doing more harm than good to your design, you can disable it with the following CSS rule:
-webkit-text-size-adjust: none;
Tip: Test emails regularly
Email client rendering behavior continues to change over time, sometimes with little notice. For this reason alone, it’s important to retest your email designs on a regular basis rather than assuming a template that worked last year still renders the same way today.