When building a new email template using HTML and CSS, you want to make sure that the outcome will look good on all email platforms. Some email platforms, like Microsoft Outlook, do not render the HTML in emails the same way that most other email platforms do. Because of this, you should keep some things in mind when designing emails.

Identify Your Audience's Viewing Habits

The first step in building a successful HTML email is to know how your users will view it. If most of your subscribers will be reading your email on their company Outlook email, for example, then you may wish to use plaintext. 

You can find out which email clients your subscribers are using to view your emails by navigating to the Email Campaigns tab in your Email dashboard, then viewing the Email Client Usage report on the right-hand sidebar.

In addition, recipients are much more likely to read their emails on mobile devices. Because of this, you will want to make sure that your emails are responsive and readable on mobile screens as well as desktop devices.

Use Table Tags

When designing custom layouts for emails, you should avoid using CSS layouts because most major email clients don't recognize or don't support the CSS styling for layouts. Instead, you should use tags to organize your design.

However, some issues can arise when using tables. Here are a few tips for dealing with tables in an email:

1. Set widths in each cell rather than on the table.

The combination of widths on the table, widths on the cells, HTML margins and padding, and CSS margins and padding can be chaotic. Simplify your code, and your life, by setting only on each cell:

Email clients are unreliable when it comes to deducing the correct width of a cell, so it’s safest to explicitly set one. Pixel widths are the most reliable, as using percentages can give you incorrect results, especially when using nested tables.

To set your cell padding, either set it once on the whole table with the cellpadding parameter, or use CSS to set padding in individual cells. Mixing the two is likely to cause problems, so you should avoid doing so.

2. Nest tables for consistent spacing

Even when margins and padding are supported by most email clients, results will be inconsistent. If the spacing is critical to you, try nesting tables inside your main table instead. It’s old school, but it’s tried-and-true.

3. Set a background color on a container table

Some email clients will ignore a background on the  tag, or one that’s set in your style sheet. Having a wrapping table around all your content and setting a bgcolor attribute on it will work around this issue.

4. Whitespace matters

Theoretically, whitespace in HTML files should be ignored. But in practice it can cause all sorts of rendering quirks—especially if you have whitespace between table cells. Make a habit of removing any spaces between the closing tag of one cell and the opening tag of the next to avoid unsightly gaps and layout problems.

Use Inline CSS

Sometimes, CSS can come in handy. Applying a style in-line gives it priority over styles further away (such as webmail client styles), and also works around the email clients that strip out CSS from the head or external CSS files.

Currently, the Gmail app with non-Gmail addresses is the only major email client that strips all other types of CSS, embedded