Is there anything I need to be aware of when creating a HTML e-mail? Is it as simple as creating a valid HTML page then sending it via PHP? Or do I need to use tables to ensure it display's correctly.
Any advice to get this right first time would be much appreciated.
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!
Tables are definitely the best option for HTML emails, since most other methods tend to display differently on different machines.
Things to watch out for:
Images are often blocked by email programmes - try to use background colours where possible
Don't link to an external stylesheet - put the styles in <head>. This will prevent your server being hit when the emails are opened.
There's also a good blog post from Mailchimp about using CSS in HTML emails.
Tables is bad...but the correct way to go in emails...
Also send only the part you would normally put in the body and only use inline css.
Another important thing is that background images most of the time dont work.
This is a very good guide that can help you out.
my advice: test in a lot of browsers,mailclients and email programs
You should check out Email on Acid, they not only show you what your email will look like in each client they also analyze your HTML. They highlight the HTML in you code that is not supported in the clients. This tool has saved me hours trying to figure out why an email doesn't render correctly.
One other thing that is very helpful is they provide Tips & Tricks for each client. Anyway you might want to check it out, very helpful.
Related
Earlier I posted here a question about how to get two tables responsive. First they replied that I should not use <table> instead of <div>, but later on they said I need to use the old style <table>, because it will be an e-mail template.
After all I am converting the header to the old style in tables, and as a result it looks pretty good in the browser, but after sending it via the e-mail it is completely messed up again (except on my phone). Now I am using the old style, but still it doesn't work. What could be the problem here?
UPDATED:
Two full days I tried to create my own e-mail template in HTML. Included this one I have read many posts about this topic. What I have experienced as a fullstack developer is that e-mail development is completely a different way of programming. If you want to create your own e-mail template in HTML, please read this before.
What #Gwally and I would advise is to use Zurb Foundation which is a responsive front-end framework who will help you to create an e-mail template in a easy way. After when you are ready, you should test your e-mail template with Litmus.
In short; creating your own e-mail template in HTML is pretty hard. It takes a lot of time and after all you don't know the e-mail template is going to work for almost all the e-mail clients. I started over with Zurb Foundation and it works pretty good ;)
Good luck!
There are plenty of places to find modern HTML templates to use as a base for your Email projects. There's been plenty of advice posted here in Stack Overflow to help people with their projects. It's important to remember that email development is not web development. The two are based on HTML, but they use it in different forms. Here's a few things that can get you on the way.
What works
Campaign Monitor has an excellent guide on what works in email with email clients.
https://www.campaignmonitor.com/css/
Working modern templates
The best way to learn is to look at what others have done and emulate it for your own needs. I'm a personal fan of Zurb Foundation. I have used version 1.0 for one-offs and find 2.0 to be valuable for fixing some of the issues that come from email development, such as template consistency.
https://foundation.zurb.com/emails.html
https://litmus.com/community/templates
https://www.campaignmonitor.com/email-templates/
Ask questions & read answers
One of the best resources for email development is where you are right now here in Stack Overflow. There's a few dedicated experts who have helped the community with really good solutions to questions.
Good luck.
Based on CSS classes in email, you should use inline styles to maintain your layout in the email.
You can take a look this article for some suggestions as to how you can get a responsive layout in your emails. https://css-tricks.com/ideas-behind-responsive-emails/ but you need to approach them differently from web pages.
I've been asked to build something that will generate HTML Emails.
The last time I created one of these was about three years ago, and so I was wondering if the warnings about using tables, nested tables, having to use inline stylesheets etc. still had to be heeded, or whether (hopefully) email clients had caught up a bit with browsers, and would allow use of external stylesheets, divs and so forth.
I did have a good Google for info, but most articles I found were a few years old, and so was wondering what the current state of play was.
Can anyone update me on the latest best practice?
Many thanks!
We recently put together an HTML email. We learn't the following:
There is HUGE disparity in HTML and CSS support in modern and older clients alike. And mostly that support is pretty terrible.
Do not use external or header CSS. Inline EVERYTHING.
Use tables for layout. Nested tables I think are ok, we didn't see any problems with this.
Use a service like Email-on-Acid to check how your mail renders in different clients.
Making something that looks nice and polished across the major clients is a gigantic pain and will take you 5 times longer than you imagine.
In short, nothing's changed in the last 3 years.
Good luck!
Don't use HTML email.
...if you have the choice. However, seeing as you've been asked to use HTML email, here are a few things I can think of. Mail clients like Thunderbird have improved their HTML support a lot lately, but it's still unreliable, especially given the not-so-modern clients floating around.
keep your email content as simple as possible
make sure that it looks alright without images; most email clients disable image rendering until told to do otherwise for each message
Does the HTML/CSS for an html email newsletter need to be in table format, or can I use DIVs with equal assurance it will display well cross email-client? I've downloaded a number of templates to see how they're done, upon which to base my own, and they all seem to use tables.
Any insight much appreciated, thanks!
⚠️ Update 2021-06-10: This is a very old answer. I'm not sure how accurate it is 10 years after it was written. Mail clients are hopefully more compliant today ⚠️
When it comes to email HTML, note that all best practices from web development goes out the window. To make the look consistent, you should:
Use table based layouts
Use the old-school attribute styling for tables
Use ONLY inline-styles, and only very simple such. <style>-tags are discarded by many clients.
Skip using <html>, <head> and <body> - They will be discarded by most clients anyway.
If you embed images, try to make sure that the e-mail looks decent even if images are not loaded. Many clients require the user to mark the email as "safe" before displaying images.
You can read more detailed versions of the above points here:
http://articles.sitepoint.com/article/code-html-email-newsletters
http://dennisdeacon.wordpress.com/2008/06/09/top-10-email-best-practices/
http://www.catswhocode.com/blog/best-practices-for-coding-html-emails
Like everyone here has said, use tables and inline all your css... but there is an ecosystem of email apps to help you build emails.
I've been using Mailrox (https://www.mailrox.com/) for most of my email builds recently and it seem to be pretty damm good and outputting perfect HTML emails, if you're building one from a design, even though it's in beta.
You could also try pre-built templates from Mailchimp or Campaign Monitor, but it sounds like you have a design for your email so maybe Mailrox would be best.
If you really want to get into building emails I'd say forget most of what you know about modern webdesign and master table layouts and use the links from PatrikAkerstrand.
Litmus is also great for testing your hand-coded designs. They give you previews of your email in (pretty much) all the email clients.
Hope this helps.
Many email-clients aren't able to render css. I would use tables to format your mail and use images for anything else.
As it's already been mentioned - your HTML emails should be built using tables (and not divs). You can add CSS as well - both using an external stylesheet, but this will not be picked up by all email clients, so it's actually more reliable to add your css in-line. Even when doing so, some attributes might be ignored by certain email clients, so your best bet is still using HTML attributes whenever these are available. "You must do this because the some clients, such as Gmail, will ignore or strip out your tag contents, or ignore them." Source: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
That aside, I've also learned through trial and error that even images must be cropped to the exact size you want them displayed in your email. Outlook if terrible at picking up HTML attributes for width / height for images, and i have seen a few nasty stretched emails, only because these attributes were ignored and the images was displayed full size.
I read somewhere that when creating a HTML email, you should use the table-based layout. You should not care about creating tableless css based layout. Is that true?
I have to create a newsletter layout for my company, but I dont feel confortable writing 3 nested tables.
If you want your HTML-email to look good in most email clients, you should write your HTML as it still was 1999 :)
I'd highly recommend paying a visit to the Email Standards Project website. It lists almost every major email client (both standalone and web-based) on the market and outlines how much HTML support is built into each one.
Also check out Campaign Monitor's email design guidelines for some practical guides for proper HTML email building -- including, sadly yes, "use tables."
This is probably more based on the reality of email client rendering (which is terrible) than anything else. Technically it's almost certainly wrong, but pragmatically it might be the best advice. Truppo touches on this.
I would love a world where no one expected HTML to be used where plain text would do, but that is not the situation. If your job is to come up with HTML that will not embarrass you when your subscribers try to view it in their favorite email clients (applications or web based email), it is hard to stick with semantic markup and CSS.
Take what I am saying with a grain of salt because I have only done this as a learning exercise and not professionally. Based on an article I had bookmarked and further links I found in that article, the following pages seem to have a good discussion of the real issues involved in sending HTML email.
http://www.sitepoint.com/article/code-html-email-newsletters/
http://www.sitepoint.com/article/principles-beautiful-html-email/
http://www.sitepoint.com/article/designers-guide-html-email/
Given the issues involved, using tables for layout makes practical sense.
There's certainly no standard that mandates it, and in fact, best practices dictate that tables should not be used for layout (except in the case of laying out tabular data).
There is an argument to be made for using tables in presentation, as there's no guarantee the plethora of desktop and web-based email clients will render CSS-based presentation properly... However, I wouldn't say that's an argument in-and-of itself.
I won't advise you to do it, but you had probably hear this because a lot of email reader supports only a few html and css.
They often don't bundle a full html/css parser, and in the past table was much used to do layouts..
You may want to look at this, although this is specifically about the Oulook html/css subset support described:
http://msdn.microsoft.com/en-us/library/aa338201.aspx
The reason tables are used is two-fold:
HTML e-mail can be rendered in a vast array of clients with widely differing abilities. It's like trying to design a website for every browser, then multiply it by 10.
Quite a few web e-mail clients play havoc with CSS layout.
I found outlook having problem with div based layouts.
We've been doing some tests with customers on how newsletters look on their computer and found that a majority is using a layout in Outlook or in Mail that shows a width of only about 45 characters. They don't bother to double-click to open the email in a new window or scroll around.
The emails with some content other than a logo and text that appeared somewhat better were the ones with only one big GIF...
+1 on Campaign Monitor's advice. I've also seen a lot of great content from Emma. In my experience, the simpler you can make an email newsletter template, the better. This is doubly-true in a world where an increasing percentage of users are reading your message on a mobile device with a small screen.
In the past it was common to use tables for page layout, and many people who create pages are still more comfortable doing it this way.
As James says, best practice is to use CSS positioning facilities for page layout except when it actually is tabular data; but personally I often find it hard to get the effects I want with CSS.
A designer coded an html template using CSS best practices. I want to use this template as an email newsletter template, but I've heard people say hotmail, yahoo and gmail offer limited support for CSS.
Am I supposed to re-code these templates using table layouts and font tags?
The short answer is Yes.
You're going to get the best compatibility across webmail accounts & email clients by using the most basic and dumbed down HTML possible.
Don't use any CSS files or <style> tags. Do everything inline.
Handle positioning with nested tables that have explicit widths
I make heavy use of HTML comments in these situations to make sure I don't get confused about where I am in the layout.
All text should be surrounded by <font> tags with the font style information.
Images should have explicit widths & heights.
This helps the email retain its proper layout when images are blocked.
I usually test on a minimum of the following:
Outlook 2003
Outlook 2007
Most of your headaches will come from here.
Thunderbird
Entourage (OSX version of Outlook)
Gmail
Hotmail
Yahoo Mail
You're usually in pretty good shape if you get something that shows up properly on all of those.
We use Exact Target and they have an HTML preview feature but it's not perfect. I've run into a lot of situations where an email looked good in the preview but still came through broken in Outlook 2007.
Mark above said everything that you need to do to develop email templates (it's the 90's all over again), but I wanted to add one last thing:
http://www.email-standards.org/ is a great resource to see how different email clients interpret HTML and CSS.
To build on what Mark said:
If at all possible, avoid using CSS at all (though, it's usually alright for things like text). Use tables for all positioning, empty <td> elements for padding/smaller positioning bits.
And even with all this, it's only going to look perfect in a few email programs/sites. HTML email is, I'm fairly confident in saying, utterly impossible to do in such a way that it shows up perfectly in all mail clients/apps.
You'll have to go back to stone-age HTML to get HTML emails to work out as Mark suggested. All styles inline in the html. No STYLE tags or external stylesheets.
MailChimp and CampaignMonitor both offer excellent free HTML email templates. They also both offer email testing services that send your html emails to several different email clients and then send you screenshots of the results.
use div tag with fixed height/weigth and put all your HTML in there. It would look the same in most clients. Iv'e tried it before and it works fine.