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.
Related
clear doesn't work in Outlook 2007/2010, as well as display (and many other CSS properties). What should I use?
I need to support all of the clients in this matrix, except Lotus Notes.
FYI: I am using an XSL that is building all grid-based markup with tables. However, I have a table unit that is overlapping another (only in Outlook 2007/2010) somehow.
As much as it pains me to say it, you must use tables for email templates. This tutorial on Nettuts will help you out 20 Email Design Best Practices and Resources for Beginners
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.
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.