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 Nurture 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 <table> 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 <body> 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 <style> tags in the head or body, and externally linked stylesheets from emails.
Gmail doesn’t support external stylesheets or the <style> tag in the body of the email. It also strips any CSS in your <style> block or inline style=. It’s also common for other email clients to misinterpret CSS that is not valid. For peace of mind, you should run your CSS through a validator, such as W3C.
How to Use Inline CSS
A style applied to p elements in a separate style sheet or in the head of your HTML page might look like this:
These styles will apply to all paragraphs in your page, but if the style is stripped out, the paragraphs will be styled according to the default styles the email client uses, or the email client’s own style sheet.
Applying the style in line means styling each individual p element throughout your content:
You will see more consistent results if you apply styles in this way for every element in your HTML email. There are a few ways to save time when applying inline styles for emails:
- Don’t inline your styles until you’ve finished the coding. Develop the entire design using a
<style>tag in your head, and only once you’ve made final adjustments should you apply them in line. This saves having to go back and edit 20 instances of the same style. - Use an email service or tool that will automatically inline your CSS for you.
There are several tools that will take an HTML page and style sheet, and generate your page with the CSS all inlined. You can use the Campaign Monitor CSS Inliner or Premailer, which will also provide useful advice about unsupported CSS.
CSS Support in Email Clients
Some email clients will support CSS selectors and properties, while some will not. You can double-check which email clients will support certain CSS properties in the Campaign Monitor CSS Support Guide. That resource will also show which CSS properties will work on different device types.
Avoid Using Images in Your HTML Template
Unlike web browsers, email clients will routinely block images from downloading until the reader clicks a special button or link at the top of the email. If prompted, nearly 40% of email recipients will choose to never display the images. In addition, some users may not realize that they can view the images, meaning that a number of your recipients may never see your header image or logo.
The default image blocking settings for various email clients are shown in the table below. We’ll explain what the last column (Trusted sender img display) means in the next section. For now, see the second column that shows whether images are displayed by default in each of the clients.
Default Image Blocking in Email Clients
| Email Client | Default Image Display? | Trusted Sender Image Display? |
| Yahoo Mail | Yes | No |
| Yahoo Mail Beta | Yes | Yes |
| Windows Live Mail | No | Yes |
| Gmail | No | Yes |
| Outlook.com | Yes | Yes |
| AOL Web | Yes | Yes |
| Apple Mail | Yes | No |
| Thunderbird | Yes | Yes |
| Outlook 2007 | No | Yes |
| Outlook 2003 | No | Yes |
| Outlook Express | Yes | No |
| Eudora | Yes | No |
| Entourage | Yes | No |
| AOL Desktop | No | Yes |
Unless you know that all of your subscribers use an email client like Apple Mail, then it's safe to assume that a large number of recipients may not see the images in your email.
How to Prevent Blocked Images
There are several steps you can take to prevent or lessen the chance that your images will be blocked by email clients:
1. Become a known sender
Most email clients allow recipients to automatically display images when a message is from a known sender (senders appearing in an "Allow List" , contact lists, or address book). The final column in the table above shows which clients will allow recipients to override their image blocking setting for trusted senders.
You’ll want to encourage your subscribers to add the “from” address you use to their "Allow List". You can include these instructions on your signup form, or include them in the subscription confirmation email or your first welcome email. This not only ensures that recipients will see your images, but it will also increase your email deliverability rate.
2. Don't use an image as the first item in your email
Many email clients will show users a "preview" of your email, and if an undisplayed image is at the top of the email, then the email will appear blank. Instead, begin the email body with some pre-header text to entice users to open the email.
3. Use alt attributes
Always add alt tags for each image. In some cases, they’ll show up when the image is blocked, so that users can see what the image was supposed to be. However, only some email clients will display alt text for images. You can see how common email clients will handle alt attributes in the table below:
| Email Client | Does it Render Alt Text? | Additional Information |
| Yahoo Mail | No | |
| Yahoo Mail Beta | Yes | Applies CSS font styling to alt attributes. |
| Windows Live Mail | No | |
| Gmail | Sometimes | Depends on text length. |
| Outlook.com | No | |
| Apple Mail | No | Replaces alt text with question mark icon. |
| Thunderbird | Yes | Applies CSS font styling to alt text. |
| Outlook 2007 | Yes/No | Replaces alt text with security message. |
| Outlook 2003 | Yes | Applies CSS font styling to alt text. |
| Outlook Express | Yes | Applies CSS font styling to alt text. |
| Eudora | Yes/No | Replaces alt text with URL to image. |
| Outlook Mac | Sometimes | Contingent on text length. |
4. Use captions for important images
If you have an image that contains important content (as opposed to being a decorative element), use a text caption to describe it. That way, even if the image is not displayed—and even if the alt text isn’t shown—readers can still see the message.
5. Always have text and images
If you have a balance of HTML text and some images, then the email is useful even without images. If the email entirely consists of blocked images, then your recipients may be confused or may unsubscribe.
Other Mediums to Avoid in Emails
While building email templates can be similar to building websites, there are many elements on websites that do not translate well over email.
Javascript in Emails
Adding JavaScript (JS) scripts in emails is largely not supported by email clients. Because many email clients use JavaScript to run their system, it may cause interference if other scripts are running in an email. In addition, many spam filters consider the presence of JavaScript to indicate a spam or phishing email.
To avoid any issues with scripts, it is best to stick to HTML and CSS.
Flash in Emails
Adobe Flash is common on websites, however, it is not commonly supported by email clients. In addition, any fallback image you select for a flash element will not appear on the email.
Video in Emails
Many email clients do not support videos in emails. Most email builders do not have the ability to directly upload a video, and the embed code from a YouTube or Vimeo video will often not output on many email clients.
GIFs can work, however, they're still at risk of being blocked just like still images. In addition, Microsoft Outlook will only show the first frame of an animated GIF.
If you'd like to promote a video in an email, it's recommended to capture a screenshot or cover image of the video (even better if it has a "play" button on it), insert that image into your email, and add a hyperlink to the image that leads readers to the video's direct link.
Forms in Emails
Many email clients can accommodate a form built-in to an email. However, the support for forms in email clients is quite inconsistent. Some email clients will mark the form with a security warning, while others will simply disable the form.
To ensure that all recipients can see your form, you should instead link your email to a landing page on your website where users can fill out the form.
Testing Your HTML Emails
Before sending out any email you design, you should always test and preview it first. There are a few third-party tools that let you preview how your email appears across multiple email clients:
- Litmus email testing
- Email on Acid email testing
- The in-platform design and spam testing tool
Each service will analyze your HTML email and generate screenshots that show how your email renders in a number of different email clients. You can typically scroll through the whole email, see it with images blocked or images loaded, and check if there’s a problem you need to fix.
Comments
0 comments
Article is closed for comments.