HTML Emails

[cooper.semantics]

Ok before I begin I would like to say how much html emails suck. I have learned some rules with html emails that I would like to share. Share your email tricks of the trade as well!

1. Table Driven - this is a given.
2. Can only apply padding directly to the td itself.
3. Any element inside the td margins must be applied to.
4. Setting a border for the parent table is quirky across email clients.
5. If I set a fixed width to the parent table itself I set %'s for the children TDs. e.g.
<table summary="...." cellspacing="0" width="730">
<td width="70%">....</td>
<td width="30%">....</td>
</table>

With emails you have to suck it up and basically step backwards in technology.

[ScallioXTX]

How to use CSS in HTML E-mail

[cooper.semantics]

How to use CSS in HTML E-mail

Thanks for the link - CSS is really ruled out in emails except for basic rules.

I can remember the first email I built years back with the float rule hehe..

Email did not come out the way I wanted...

Anyways, is there tricks you have learned for close email cross browsing?

[ScallioXTX]

Only use tables, specify as much as possible (widths, heights, etc).

And, KISS (Keep It Simple Stupid)

But, I don't make a lot of emails, so I'm not extremely good at it; for me it's mostly still trial-and-error.

[Web Design Perth]

My 2c...

- all styles to be inline
- check out this excellent free tool to do that:
code.dunae.ca/premailer.web/
- test your design in approx 20 desktop/webmail/mobile clients ($5) here:
campaignmonitor.com

[cooper.semantics]

@Web Design Perth - code.dunae.ca/premailer.web/ is pretty neat!
Thank you for the helpful links!

[cooper.semantics]

@Read Me - HTML emails are probably the most boring subject to read about as well as the most boring to work on. Here is a good link to follow up all questions regarding HTML email newsletters.

http://www.sitepoint.com/article/cod...l-newsletters/

[nacworld]

I am receiving emails from companies, which send great html emails, they use email template or something like that... Most of them work with Email companies, does anyone know who offer for free HTML email with great templates ?

[ShayneTilley]

campaign monitor and mail chimp both offer free templates. Take a look at Alex's article

http://www.sitepoint.com/article/des...de-html-email/

[nacworld]

this is really nice, thanks Shayne

[fredda]

When using images keep everything on one line, eg:

<td><img src="http://www.something.com/something.jpg" widt="100" height="100" alt="something" /></td>

As opposite to:

<td>
<img src="http://www.something.com/something.jpg" widt="100" height="100" alt="something" />
</td>

which will give you a little white line.

[AlexW]

Found something interesting. GMail hates negative number -- particularly negative margins.
Not only will it completely strip this:

margin-left:-1px;

but it will also completely eliminate:

margin: 2px 2px 2px -1px;

[gfarmer]

Hello,

Does anyone have insight on background images not showing in email programs, especially 2007 version of Outlook? It seems that they only show if included in the body tage or sometimes in the top table tag. Otherwise, background images don't seem to show if included in a <td> or <tr>.

[Web Design Perth]

Have a look over at http://www.campaignmonitor.com - lots of tips re. cross compatibility issues. Also check out http://www.email-standards.org.

[INetProperties]

Is there anyway possible you can try some templates? Does seem to work ok for me.

T.

[AlexW]

Hello,

Does anyone have insight on background images not showing in email programs, especially 2007 version of Outlook? It seems that they only show if included in the body tage or sometimes in the top table tag. Otherwise, background images don't seem to show if included in a <td> or <tr>.

Backgrounds in Outlook 2007 are a no-show. I wrote a piece here on it: http://www.sitepoint.com/article/des...de-html-email/

[cooper.semantics]

Backgrounds in Outlook 2007 are a no-show. I wrote a piece here on it: http://www.sitepoint.com/article/des...de-html-email/

I actually read that article a few days ago. Nicely written Alex.

[AlexW]

I actually read that article a few days ago. Nicely written Alex.

Thanks for that, cooper.semantics. It got a really good response, actually. It seems to be a subject that lots of people are battling with just at the moment.

I've just written a review on the Litmus email testing service -- a Campaign Monitor competitor -- which will be in the Design View that goes out tonight.

Good product with a nice pricing model.