What Guidelines for HTML Email Design Are There

Rules when creating HTML E-Mails?

Creating an HTML email that displays the way you want to in email clients, can be very difficult, if not impossible. Unfortunately, email clients do not use the latest and greatest web browsers when displaying emails, and they can also restrict what should be allowed (and with good reasons).

No matter how much you might love CSS-based layouts, table-based layout is still the way to go for HTML emails. You can still use CSS for other things, of course, but in some cases it will need to be inline. The best looking HTML emails I've seen, are largely made up of tables and big images - simply because unlike on normal web pages it is nigh on impossible to create the equivalent using good web development practices. HTML email is a world of its own.

You should also test the emails in as many email clients as you can - and while it can be cumbersome to install all the different clients, you can also use services such as Litmus, MailChimp and CampaignMonitor (see also this question). Personally I have had good experiences with Litmus.

Good luck, creating HTML emails can be quite messy!

Confusion about css coding standards for Html Email newsletter

To make sure that the HTML newsletter looks as close as the designs I would definitely use inline styling.

Unfortunately you have to be very specific with your styling, otherwise some software (Gmail for instance) will override your style declarations. It is a real pain sometimes, but it's worth doing it that way IMO.

Same thing goes for HTML email signatures.

So definitely go for the inline styling :)

Oh, and one more thing. I know that it's 2012 and loads of designers/front-enders advice to use html tags (even html5 elements) in HTML emails and signatures, but I'd try to stick to the old-school way and use tables to make sure there is no unnecessary artefacts with the code.

HTML Emails | Available Tutorials on coding like it's 1999

Not sure what your story regarding tables has to do with sending HTML emails since you're not confined to using tables in HTML emails, but anyways. I'm not saying that these are official guidelines, but off the top of my head, I personally always consider them:

• Keep it simple - When you're sending more style than actual content, you're doing it wrong.
• Try not to use images - Stick to basic in-line styling like borders, background color, text color and such. The objective is to make the email look good, not to create a stand-alone website.
• Always provide a plain text alternative for the email clients that don't support HTML emails.

As for the side question, I don't really see anything bad in using HTML to make your emails prettier and it shouldn't cause any headaches when done right (i.e. see the first two points on my list).

Hope these help.

How to design a cross client / browser compatible email?

I would recommend a preprocessor based framework like Foundation for Emails.

How to send html email what to avoid and what not to include?

You'll find some detailed info at the email standards project
as to which email clients support which HTML/CSS tags and attributes.

Some other useful links here:

A Designer's Guide to HTML Email

How to Code HTML Email Newsletters

How to created a responsive html email template

You are encountering two different email bugs here, one in Gmail, and the other in Yahoo. Here’s what’s going on and how to fix it.

1. Gmail

Gmail is very picky about certain styles. And whenever Gmail sees something it doesn't like, Gmail will remove the entire <style> tag that contains the problematic style. You can read more about how Gmail removes styles that include special characters here. In order to find what was wrong with your code, I split your one and only <style> tag into multiple ones. Then I sent myself the email and inspected the code in Gmail, and looked at what Gmail kept. I was then able to conclude that what Gmail doesn't like with your code are the box-shadow declarations with the / syntax.

.detail_table{
    width: 100%;
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
    border-radius: 4px;
    border-spacing: 0;
}
.detail_table .header{
    font-size: 16px;
    font-weight: 700;
    text-align: start;
    padding: 8px;
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}

The solution here is simply to isolate the problematic styles in their own <style> tag. So remove the two box-shadow declarations from your giant <style> tag, and add a second <style> tag with only the following:

.detail_table{
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.detail_table .header{
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}

2. Yahoo

I'm assuming you're testing on Yahoo Android. On Android, Yahoo removes content from the <head> tag. (You can read more about this here.) But it only does so for the first <head> tag inside an email. I know what you're thinking, HTML usually has only one <head> element anyway. But turns out we can add a second <head> tag, and Yahoo will keep the content inside this second <head>. So the general practice for this, to get responsive emails to work in Yahoo on Android, is to add an empty <head> tag first, and then a real <head> with all your content second. Surprisingly, this is very well supported across email clients and rendering engines. Here’s an example:

!DOCTYPE html>
<html>
<head></head>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Order</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css">
    /**
    * Avoid browser level font resizing.
    * 1. Windows Mobile
    * 2. iOS / OSX
    */
    body,
    table,
    td,
    a {
        …
    }
    </style>
</head>
<body>
…
</body>
</html>

Also note that Yahoo has a bug with CSS comments and it’s usually a good practice to remove all CSS comments before sending an email.

Newsletter Design to send in emails, using tables or table less

This is a good place to start:
http://www.campaignmonitor.com/design-guidelines/

Or in general:

http://www.campaignmonitor.com/resources/category-archive/cat/designing-and-building-emails/

PS: I've no relation with the site but I do think the articles are really useful though some are dated a few years ago.

---

Related Topics