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
Related
How HTML newsletters should be designed? using tables or divs and css styles.
I read somewhere that newsletter should be designed using tables because many of the old client can't process the css style. how much truth is in this?
What else need to be care of when designing newsletter to send using email.
i.e. java script should not be used in newsletter as it is disabled in most of the email clients. what else?
I have read this article. although it was written two years back but I am not sure If writen things are still valid...
http://articles.sitepoint.com/article/code-html-email-newsletters
This is a good place to start:
http://www.campaignmonitor.com/design-guidelines/
Or in general:
http://www.campaignmonitor.com/resources/category-archive/cat/designing-and-building-emails/
PS: I've no relation with the site but I do think the articles are really useful though some are dated a few years ago.
Tables are usually the best option for consistent layout in HTML emails - some email clients have problems with divs.
CSS usually has to be inline (ie on each item to be styled) or embedded in the page - embedded CSS can't be in the <head> section (since this may be stripped out by web-based clients).
Here's a couple of links from MailChimp about designing HTML emails which I've found useful:
http://www.mailchimp.com/blog/background-images-and-css-in-html-email/
http://www.mailchimp.com/kb/article/how-to-code-html-emails/
Depending on the version of Outlook the user has, background images will not work (2007) due to security concerns, but they will work in 2003.
When I created an email campaign for a company I worked for, we broke the newsletter into sections of images that linked to various areas of our site using a table to structure it with some css. Worked for most email clients.
As it is News letter, it does not need be SEO. Better to have table instead of DIV. and Table render faster than Div.
I did some research into this for a client about a year ago based on analytics from sending 200,000 newsletters.
I did lots of mail client testing and discovered (very sadly) that the most reliable coding method was sticking to the W3C HTML 3 standard.
Problem is a frightening number of people are still using Outlook 2000 and some really old versions of outlook express.
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.
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.
This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
Does it make sense to use the <table> tag on a “modern” website?
Everywhere I go I see don't use table layout, it's evil, even Google says that, so why one of the most visited websites, Google and Twitter, use it for their homepage?
I don't think it is any kind of mistake, or any other stupid problem.
The only reason I can think of is, that they want the page to look similar even if client doesn't support CSS, like with Lynx.
So why everyone say it is so bad, if the biggest websites on the internet use it.
In my opinion, there are some cases, like those mentioned above, where it is vitaly important to have the same look everywhere, than it is OK to use tables.
edit: The same question goes about html elements like <center>, or formatting text with attribute align and other "html attributes and elements used to substitute CSS functionality"
Page load time is king for these guys, and bandwidth usage is extreme.
I'd have to say they use tables for raw data speed, since they are serving up so much bandwidth every day.
Also, notice that they use inline styles in the page header to reduce the number of HTTP requests to help speed up page load time.
Table layout gets more grief than it deserves. It's easy for developers to use, it's consistent across nearly every web browser, and it allows you to easily add rows/columns with little to no effort.
The only downside is that it goes against the mantra that your document should only contain content, and your design should be contained separately (in a CSS file).
Google doesn't have to care about ranking high in search engines... ;)
Yep, agreed. Sometimes, just sometimes tables are just fine. Not everyone is writing websites that are targeted at every possible browser, that needs to support text to speech etc. In general, try to learn and grow your skills and use CSS positioning etc, but nothing bad will happen if someone uses a table to position things on a webpage.
Maybe this question should be community wiki, though?
It's evil, it's a pain, but rendering is pretty much guaranteed to be consistent across different browsers.
Table layout is working on most browsers. Google and others want to reach all user, not some or only modern users. Having different layouts or layout technologies is hard to maintain and costly in delivering content.
Table layout is not tricky. Its straight forward. You dont have to look for css hacks, browser incompatibilities or others.
Table layouts are bad. Because thy mix layout and content.
Twitter works pretty well from phones in web mode. Some web browsers are truly gruesome, so I assume Twitter does what it has to.
Given how poorly so many web sites work on phones, I'm more concerned about mobile compatibility than with the concerns of CSS evangelicals.
Three main reasons:
Tables are mainly bad for search engine reasons (there's also the issue of them messing up the DOM a bit, but that's not too bad). People don't search for Google on search engines, and people don't search for Twitter posts on generally either.
Tables render consistently on nearly every browser, including smartphones (which is a big concern for Twitter especially).
Tables consume less bandwidth. Both sites have immense data loads and need every bit of speed they can get.
Browser Support - These guys need to have their websites render perfectly on ALL web browsers (New, Old and Obscure). No matter who's using their websites and what OS/Browser their using, these websites need to work.
Each web browser supports it's own implementation of CSS and this causes a similar issue to that of the JavaScript DOM support in various browsers.
Page Load Time - Also their pages are optimized for Page load times. If it takes a user too long to load the page they'll just go somewhere else. There are still plenty of users without broadband, even a lot of mobile devices don't have very fast connections depending on where you are.
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.