Rules For HTML Email

M

mjrzasa

New Member
Hello everyone, I am doing some HTML Emails and I was wondering what are the rules and what to avoid when using HTML Emails, so that it will work in all Email systems.
I know you need to use tables all over, and inline css only, and constantly have cellpadding="0px" cellspacing="0px" bgcolor="#FFFFFF" and width="600px"
but what else?
Is there somewhere I can get a good list or summary?
Is it true you cannot use padding for it to work in Outlook 2007?
Can I use margin?

Thanks

- Matt
 
Phreaddee

Phreaddee

Super Moderator
Staff member
yep. forget EVERYTHING you know about how to build a website and build it like its last century. inline everything. tables. no floats no divs. PNG issues such as with early IE versions also happen in outlook express.

some systems such as mailchimp and particularly campaign monitor are great at doing that bit for you, its pretty fail safe if you use a service like that.

on your own it can sometimes be a bit of a nightmare.

macmail always outputs great so dont ever use that as your guide.

gmail, outlook and entourage are from experience the worst to get working.

and you also need to though make sure it reads OK in text only emails.
so alt tags correct usage of h1-h6 + p and the like are even more important in email then on web as the % of users who view text only is substantially higher than those that use screen readers. (not saying its not important for web as well)

include a view in your browser option too...
 
J

jwpizzy

New Member
I currently build responsive e-mail templates for the company I work for right now and I would suggest you take a look at http://www.emailology.org/. They have excellent documentation on e-mail standards. Also, download their Email Boilerplate. This has alot of useful fixes for the different e-mail clients and you can use it as a base for any email you create.

Some other places I use for advice are:
http://www.emailonacid.com/forum/

http://www.campaignmonitor.com/design-guidelines/

Instead of writing inline styles yourself you can have a tool such as http://premailer.dialect.ca/ do it for you. All you have to do is embed your styles and premailer with inline them for you.

Hope that helps.
 
J

jwpizzy

New Member
As far as your issue, it's hard to say without looking at your code. How I setup my emails usually is I have a <table> wrapper with a width of 100%. Then a nested <table> container with a width of 540-640 and align="centered" which centers it in the middle of the page. I then nest tables within the <table> container. I use nothing but padding with <td>'s to space my elements apart. No need for a spacer image. Margins fail in certain e-mail clients. So that's why I use strictly padding.
 
M

mjrzasa

New Member
Hey prizzy, I'm interested in the way you go about doing your work, if what you do is code emails. What is the process, how do you begin etc
 
J

jwpizzy

New Member
The current designs we create right now are either single or 2 column layouts. So I created a boilerplate for each of those layouts. So whenever we get a new layout, I just copy and paste the single or double column layout template code and get to coding. Makes the process alot faster.

I've customized the process to suit are needs so it might be different from layouts you create.

With that being said lets say the client ask for a 2 columns layout and it needs to be responsive.

Here are my steps (not going to get too technical)

1. Copy and paste 2 column boilerplate code into a new email.html file

2. Insert my code into the "header" portion of the boilerplate followed by "column 1", "column 2", and the "footer".

3. Once I got all the code and images in...I then begin to work on the css for desktop and mobile versions which is embedded into the page.
NOTE: STYLES ARE NOT INLINE YET AT THIS POINT.

4. After I get the layout looking good with css...I then use Putsmail, which converts my embedded styles to inline styles.

5. After styles are inline, I then use Litmus to test on all the email clients we support.

6. Once I get everything looking right across all email clients, we send it off and THAT'S IT!!!
 
M

mjrzasa

New Member
Oh, so at #3 you just code it like you would for computer on a webpage with style in header?

Also on a separate side note, if you could check out my website on normal pc, it seems to act a bit strange in the header when i resize the page. And on mobile, for some reason the nav menu gets messed up and it moves contact down a line.
thanks for your help again and hope to hear from you soon.
 
M

mjrzasa

New Member
Oh wow and i just noticed in google chrome my "past work" page has problems with aligning the images but everything is fine in IE and FF. Any idea what might be causing this?

Mjrwebdesign.net
 
M

mjrzasa

New Member
Hah, I fixed the problem. It was to do with too much "margin-left" for the nav menu and for the images. For my footer problem in the links - I had used the tag "</br>" rather than "<br>" and it seems mobile and google chrome do not understand "</br>"
 
J

jwpizzy

New Member
I looked at your code for your website for a brief second and realized all of your css is inline. I would suggest you use external stylesheets for all your css.
 
You must log in or register to reply here.
Top