Trying to see if there are any negatives to adding HTML comments to my html emails?
Any feedback is great.
Thanks
I don't think so. I've made several professional e-mail templates for Outlook that contained a little notice in the comments. I've never had any problems with that.
I even had fun to see that I could find an e-mail sent by a customer, because Google had indexed it, including the comment. :D
It does increase the size of the e-mail a little, so use with care.
None, unless the number of comments are too many that they affect DOM parsing by the browser/email client and congest network traffic.
Unless you're revealing secrets of your network, I don't see anything wrong with it. Allot of systems have comments to highlight template system areas.
Two drawbacks :
It makes the e-mail bigger. You should consider it if time or bandwidth is an issue, say if you are going to send thousands of e-mails.
It means your e-mail is in HTML, which is to be avoided if possible at all.
It should be fine, but I would be careful with any sort of emails with html content. Html in email is particularly tricky because the clients (aol, outlook, gmail, thunderbird, etc) can display the results quite differently. A quick google search brought me to emailonacid.com, an email testing/deliverability tool which might be useful if you want to be thorough.
One thing I ran into recently was that comments in email HTML should be avoided when nesting around MSO code (used for visibility/layout issues with MS products). I had an image refuse to load in Outlook.com because the MSO text was located in-between two of my comments. The syntax seemed to confuse Outlook in particular. Drove me bats. Then I took the comments out, wham -- the image displayed, problem solved.
Related
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
Potentially a topic for debate (or not) and I've searched and searched but not found anything. I code quite a lot of HTML emails (for my sins) and am surprised that this debate has only just come up but is there any way of determining where the "fold" would be in an HTML email?
I've thought about this quite a bit and of course it depends on lots of things such as:
How the user has setup their viewing panes (if using Outlook)
Screen resolution
What email client they are using
So I may have really answered my own question but I hope this is open for debate. Is there any "best practice" guidelines? I.e. maximum width (I try and keep emails below 600 and below) and of course the things I listed above. I've looked at the usual sites, MailChimp, Campaign Monitor etc to no avail!
I would be interested to hear your thoughts/comments/suggestions.
Thanks
Kiz
For HTML documents, you'd need to look into JavaScript code to check window dimensions. Alas, most e-mail clients disallow JS in incoming mail, so this will be extremely unreliable.
Aside from this, I don't think there's a way to do this: I've seen so many configurations that I think any size is possible.
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.
Do you attach the images?
Use absolute urls?
How do you best avoid getting flagged as spam?
One of the biggest causes, that I have found, for email to be flagged as spam is DNS. Make sure the domain / MX records from which you are sending the email actually resolve correctly back from the server used for sending.
As for images, you could attach them, but the most common way is to host them and use absolute urls. Primarily this is a bandwidth issue - you have to figure you're going to get an open rate of 10 - 15%: if you have to attach all the assets to every email, 85% of the bandwidth you'll use will be wasted.
You attach the emails then reference them in your HTML like so:
<img src="cid:imagefilename.jpg" />
Outlook, at least, recognizes this as a reference to an attached image and dumps it in appropriately.
You'll want to use absolute URLs to link out to images on a server. Users won't want to download your attachments. Also most email clients will not displays images by default, so it's a good idea to keep the really important content as text.
Email clients generally all use very different rendering methods. For example, Outlook 2007 uses Word's HTML rendering engine, whereas previous versions used Internet Explorer.
Do be aware that CSS support is also very limited to in emails. Most clients, especially web mail, will strip out everything outside of the <body> tag, as well as <style> tags. This means that external or embedded CSS will not work, and that inline styles are the safest bet (the style="" attribute). There is also poor support for many CSS rules in Outlook 2007. This means that a lot people have returned to using tables for laying out email.
As it was pointed out, Campaign Monitor is an excellent resource, and I especially recommend their CSS Compatibility Chart
Campaign Monitor is a great resources for html email:
http://www.campaignmonitor.com/resources/#building
Also http://www.email-standards.org/, but seems down right now.