[jrochkind1]

I am new to having HTML email sent.

What do folks do with the large (large in this case anyway) stylesheet, that actually works with actual email clients?

Link it with a <link> tag? Plop it all into a <style> tag? (where?) Something else?

What are current best practices for sending html email that needs a non-trivial stylesheet like this? Googling around, i'm still left not sure; many pages I find make recommendations that would make using these templates tricky (although some of them are a couple years old or more).

[ludwigvan]

Here are some resources I have found useful regarding email newsletters. Some of these seem to have some nice advice about how to test, how to aid user interaction too:

- http://www.htmlemailgallery.com/

- http://litmus.com/blog/

- http://blog.mailchimp.com/

- http://www.campaignmonitor.com/blog/tips-resources

- http://www.campaignmonitor.com/css/

- http://www.emailology.org/

- http://www.emailonacid.com/blog

- http://directmailmac.com/

Basically, avoid floats, use tables, use inline styles.

Also, on OS X, if you can save the source of email newsletters sent to you as an html file (Cmd-Opt-U -- select the html portion), edit it to your liking, open it in Safari, then Cmd-I Cmd-Shift-T (Format - Make Rich Text if plain text is default) to send it as an unmodified HTML email from Mail app.

[jrochkind1]

> Basically, avoid floats, use tables, use inline styles.

Yeah, that's what I was finding too -- and that advice is pretty much incompatible with the "responsive email templates" offered in the OP, no? That's what I'm wondering about.

[Samuel_Michon]

Use the CSS Inliner Tool:

http://beaker.mailchimp.com/inline-css

Also, read MailChimp's study on responsive emails:

http://mailchimp.com/resources/guides/html/email-on-mobile-d...

[nnnnnn]

To add to Sam's comment, if you're using Rails, try:

https://github.com/fphilipe/premailer-rails3

There are a few gotcha's with the gem but overall it works pretty smoothly!

[DigitalSea]

When developing a HTML email it's best to have style tags at the top and not link to them using <link rel> because the way HTML email works and various clients, you have to bring the CSS inline for it to work properly across different email clients anyway.

It's a trial and error process. Build HTML emails using tables for as much as possible, you can't use background images just background colours, don't rely on floats or other common CSS properties (even using height or width in your CSS isn't as supported as well as you'd think) and the number one thing to remember is: the day a client complains it doesn't look good in Lotus Notes, you will want to throw your computer out the window and become a farmer because it's never going to work in Lotus Notes.

Always make sure your images are set to display block to fix issues with various email services like Windows Mail and Yahoo! Mail. If you need to set them side-by-side, add in another td inside of your table row.

Always make sure you write alternative text for images. Most email clients are set to not to display images in emails unless told otherwise. Another convenient feature not many know about is that you can style the alt text that shows. <img src="ourlogo.png" alt="Acme Company" style="color:#000;font-size:20px;" /> — doing this ensures even if someone without images still sees something that doesn't look like hideous empty squares.

With later versions of Outlook, Microsoft also stripped back support for various CSS attributes and HTML tags compared to previous version so you'll find you will encounter a lot of frustration with that as well.

[netghost]

Linking it may work in some clients, the style tag works in more, but if you want your css to show up in most clients (like outlook), inline it.

So if you had `p { color: red; }` in your style sheet, then all your `p` tags should read: `<p style="color: red;">`. It sounds horrid, and it is, but you can automate the process with a preprocessor.

When it comes to email, you unfortunately need to throw out the last 10 years of advances.

[bpatrianakos]

I work with HTML emails all day long and it's awful. The short answer is this: remember, it's an email, not a full blown website. You should not have as much CSS as you're describing in your emails to begin with. The more CSS the more chances there are for it to break. Images and tables are the way to go and you'd be surprised at how creative you can get under those constraints and how beautiful the result can be.

Most web based email clients will rip out your <head> so link tags aren't a good idea. You'll need to inline 90%+ of your CSS. I usually create the table layout then add the inline style later. You can use the Mailchimp CSS inliner tool for quicker results.

I usually inline it all and leave some bits in a style tag. That's really the best you can do because of the crazy inconsistencies between email clients. Email clients render HTML and CSS like it's the 90's. Check out Campaign Monitor's blog. They have a big chart that shows you what HTML/CSS is compatible in each client. It's a life saver. I have it posted in my cube and I use it every day.

[jrochkind1]

So, as someone who works with HTML emails all day long, do you have an evaluation of the "responsive email templates" in the OP?

They seem to conflict with much of your advice to me. That's what I'm wondering about.

[bpatrianakos]

HTML emails in general are full of contradictions. I plan to use the templates myself and I'm really excited about them. To answer your question though, it's just important to realize that much of these techniques won't work in the majority of email clients. iOS and some Android built-in email clients are the ones that this will be great for. But at the same time you still have to inline the vast majority of your CSS to get a consistent result in webmail clients.

In the end you have to know your audience. At my job, we have a lot of corporate types who are checking their emails in Outlook and also webmail so the emails I create have only two style rules in the head of the document with the rest inlined. Email is just really fragile and I personally believe you have to resign yourself to the fact that your email will break for some of your readers. When I create a website I expect it to work beautifully for over 95% of people. With email, I expect it to work 3/4 of the time. Maybe more if I'm lucky. That of course depends on the complexity of the email's design of course.