HTML Emails

Anyone got the rules for what to do and what NOT to do with HTML emails? I've never done it before, never even looked into it, I'm only now aware that you have to use tables like your life depends on it with html emails. I've also just learned that you can't use CSS really?

Today is my first day of doing HTML email templates, so if anyone can tell me the ins and outs of what to do, what not to do, etc. That would be great.

1 Like

http://foundation.zurb.com/emails.html

Go with that and you're golden.

Generally regarding your own content stick to whatever HTML4 can do and you're safe. Everything else use and test however you can.

Unfortunately, caniuse doesn't show E-Mail Clients.

You can use CSS, but it can be a pain.

You must include all styles in the page. You cannot simply link to style-sheets hosted elsewhere. Inline styles also work.

Other than that, its basically just a HTML page in an email format.

@mihawk90 & @judahnator

I've been specifically told, in writing, I'm not allowed to use classes or id's, and the part that I find INSANELY annoying is that I can't test the work myself, I have to send it off to be tested.

I mean we're trying to cater for Outlook 2000 and stuff even older than that again. And using simple things like the html attribute 'bgcolor', it isn't working according to the test results, and I've been told I'm not allowed to use CSS too, so I'm a little confused there... Any ideas?... Only other way I can think of doing this email is by using the designs I've been provided and just use a bunch of images, not actual readable content. That's the only light I can currently see at the end of the tunnel.

I've literally been doing everything but that, I've made it into mostly images, and then just used col span, align, width, height, base font, font, etc... All just html tags/attributes though, it's not even using the style attribute.. I genuinely didn't even know of basefont until yesterday.

I am aware, it's just the client's view of the page is so weird, I'm just not used to how it does appear, or how it would apparently appear. I'm a junior developer, I'm used to HTML5 & CSS3 being fairly standard practices now, taking this leap backwards to using HTML tables for the entire layout of a page is [email protected]$ing disgusting.

what? even Outlook supports CSS... CSS1 at least, that was part of HTML4 already...

But yeah client's wishes can be a real pain.

Maybe you could develop using regular css, then find something that converts that to html4 attributes or something...

You really have to just get the same view as him, same outlook, same window size and see how it looks for you...

I would do that but the software/testing service that he's using you have to pay for, so I'm a bit stuck there.... I've tested in a lot of the free email clients, but the one's you have to pay for, let me put it like this, I won't be paying for it...

For writing the html, the best advice I can give is set your container to like 700px and try to make as many of your content blocks 100% width inside that. The more things you try to stack next to each other/float/columns the messier things will get.

For CSS, you can't use external links or fonts. SOME clients support using tags HOWEVER you have to be careful what you use. For example: Gmail recently updated their rendering engine. You can use tags, but using certain CSS will cause the engine to remove the entire tag. So like with gmail, if you use an attribute selector anywhere in your css, it will remove the entire block.

Inline css pretty much works everywhere. Its a pain in the dick, looks terrible, and can be massively time consuming though. But at least it works (mostly)

For testing, Litmus is a popular service to quickly test your code on all email platforms. It is a paid for service though and its not cheap. An alternative is to get a mailchimp account (newsletter/subscription list service) and you can use that to test your emails. The free accounts just have basic lists/email sending, but if you get a paid account, those actually have the Litmus tester built in and its like 1/5 the cost of litmus..

TL;DR:
Email programs were written by monkeys in the 18th century, break you code, force you to use retarded code to fix the breaks.

PS: I'm not salty.

For the one's I just finished, I used 650px to be exact, only because that's what the designers wanted with the original design.

Thankfully, I did know that much, but thank you for stating so, I mean for all you knew, I didn't know that at all. :joy:

Now that, that I didn't know! :neutral_face:

That's what I mostly did, and you're mother f$!king right, it looks like the source code for aids & cancer in one or something... It's not even funny, it's literally an eyesore, in the respect that it causes my eyes to feel sore.

Funny story, the company I work for, we use a 3rd party company to process our emails. Well they use Litmus, BUT, here's the fun part.... I can't log into their account myself, I did ask for permission, save me sending them a .zip file every time I want to have it tested, then them having to send back a url of the testing results, it's actually very annoying and inefficient. Especially when you take into account that this third party company, their staff are NOT quick when it comes to replying to an e-mail.

Thank you for letting me know that, I won't look into it right now, simply because I'm not paying for anything, like screw that, but if I ever wanted to start my own business or even just something where I publish newsletters, that sorta information is pretty useful, so thanks for that one! :wink:

I've learned that much just from personal experience... :joy:

These webinars from Litmus are free, can be helpful: https://litmus.com/blog/category/webinars

the most recent one is where they talk about the new Gmail rendering engine

1 Like