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.
Related
I wonder if it is possible to create multi-paged e-newsletter. I know that the email clients are in general very restrictive (for a good reason of course) so one has to use plain table-based html for design and even images download has to be manually approved not to mention scripts. But maybe...with the help of html5 or other advanced technologies it could be possible to include the additional pages to the attachement and use them somehow. What do you think?
Your best chances are creating "read more..." buttons that link to a webpage.
If you would want to have multipage newsletters, there are various options:
Frames
Iframes
Use of JavaScript
Unfortunately, all of these options are sent straight to the spambox.
Even if there would be a HTML5 tag or element-only option, eg. a slider, most e-mail clients won't support these new features for the next billions of years. Webdev's complain about IE, but e-mail clients are much, much worse.
Generally email only supports (x)html and limited css. Unlike the ever-evolving web, popular email clients like Outlook for example, are out of date (and using the MS Word render engine). Much of html5/css3 that is common web practice today, is not widely supported across major email clients.
The only options you have as a link to more, is to host the additional information online (a landing page is typical), or to use anchor links and have the additional information further down in the email. Anchor links aren't 100% supported however. You may get iframes to work in one or two email clients but it will not work in most.
Javascript or any other server or client side language is NOT supported in email.
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.
First, why (historically) was conversion tracking implemented by html pixel tracking versus using other small and able-to-be-made-nearly-invisible html elements which could provide the same information? Curious why html images were used as opposed to other methods.
Second, many email clients, e.g. Outlook and Gmail don't display images in html emails by default as a means to "protect your identity". Why do images provide greater exposure of information than the other markup elements in the page? They all show up in some server's web log as a GET from some IP address with some possible query string parms, so I'm not sure why images represent additional risk.
versus using other small and able-to-be-made-nearly-invisible html elements which could provide the same information?
Name one! I can't think of one except images, at least not in good old HTML 4, which still is the standard for rich E-Mail until this day. External style sheets would be a possibility nowadays, but don't get loaded in E-Mails. Background images could be disabled. iframes came later.
They all show up in some server's web log as a GET from some IP address with some possible query string parms, so I'm not sure why images represent additional risk.
When an image resource is embedded into an E-Mail, the time when that image is loaded is the time when the user reads the E-Mail. Plus, the IP the image is pulled from is the IP the recipient is logged on to the Internet with at that moment. A badly patched Windows installation might be enough to facilitate an attack with this.
From the request, it is also maybe possible to determine the recipient's operating system, whether they're behind a Firewall / router, which Internet provider they're with, where roughly they are located.... All already very, very sensitive information.
When you load an image from a site, you make a request to that sites http server. The request contains header information which is pretty extensive.
Images were there from the first HTML spec, which explains their common usage. <iframe>, <object>, <script> and all the other embeddable elements came in later editions and were not always supported or enabled in the browser.
Displaying images in HTML Emails can be seen as a "security risk" as confirmation for spammers that somebody actually reads their spam mails.
I have seen some mails which has HTML content embedded in them. The content of the mail changes as the corresponding webpage in their site change(for example price of stocks which keeps updating in the mail itself). How to link such webpage content into emails?
In other words how to link a web page into an email so that whenever I change the html page, the mail content also changes.
Thanks...
A thought: maybe they are using an image that is downloaded from the server?
As you can't have JavaScript in an email or even most CSS, I'm guessing this might be one of the only ways. I'm pretty sure that one email client or service removes every piece of "special" HTML: iframes, JavaScript, CSS, Flash, etc.
You could place an image in your HTML - which was updated by you on your server.
This may be impossible due to security limitations, but you may be able to use an iframe element.
Not a solution, but a quick answer from my site on this topic as a user: Beside the point that Javascript/Image/IFrame/Flash solutions doesn't reliable work in all email clients, but are a general security risk, I dislike the basic idea of changing the looks of an email after you have send it without the receivers approval. Additionally you make it very easy for the user to be tracked (working hours, locations, view) and that is definitely NOT in the interest of the users. If you have something important or interesting to tell just provide a link to your site plus a short description...