When sending an HTML email can you link to an external style sheet or does the CSS need to be included in the email?
Also, if you can link to an external style sheet, which way is more efficient/is smarter to use: linking to the style sheet or including it in the HTML?
Forget efficient. Forget smart. Forget maintainable. This is HTML mail we're talking about.
HTML mail and Webmail clients are extremely limited, partly for security reasons but mainly because they're just rubbish.
External style sheets almost certainly won't work. HTML-embedded style sheets probably won't work. Inline style="..." attribute on every damn element... has a much better chance of working, but still, don't be surprised when many users can't see styles at all, or some styles don't work, or some basic HTML doesn't work, and the content ends up looking like a 1997 browser threw up all over it.
HTML mail is an exercise in unpleasantness. I hate to receive it. I hate even more to author it. The sanest route for everyone is to forget HTML mail and just send a plain text message including a link to a full web page, where you can have as much CSS, JavaScript and Flash loveliness as you like.
Can you? Yes.
Should you? No. Most likely the email client will block external links and therefore your mail will not appear as you think it should.
If you must send html mail, embed everything into the email message itself. External links which automatically call back to the home server to load additional resources are one thing spam filters don't like.
You're best off embedding the CSS in your HTML.
I believe inline styles (added in a style attribute on each element) are more widely supported than including a <style> section, too.
I just Googled and came across this tutorial - looks pretty good at first glance... http://articles.sitepoint.com/article/code-html-email-newsletters
Related
I need to do the following formatting in my email as instructed to me. As I've read and searched around, emails are supposed to use html1 to 4 and inline styling and tables. I've tried using inline styling using margins but it's just a pain. It's not working in outlook and I'm just pulling my hair in frustration. Can anyone help?
Not all CSS is supported in HTML. See this site http://www.campaignmonitor.com/css/ which has a list of what is supported or not.
One thing I have done in the past is: make a regular HTML + CSS page. Then using internet explorer on the "Page" menu there is an option to "send page as email" this should copy the HTML and CSS into outlook for you, then you can use that as your starting point.
I'm going to assume that you're asking for a better way to make emails, and that you know how to do what you need to do and its just getting frustrating dealing with inline code.
Its best if you don't inline your styles under development. Just code it like a normal website. And then use this tool to bring the styles inline:
Premailer
In addition, reference here for things you can and cannot use:
Email CSS Compatibility
PS, here are some good resources for getting started:
HTML Email Boilerplate <-- code for very custom designs
Mailchimp Templates <-- very complete set of common email layouts
Generally speaking, it's better to avoid complex styling in emails. Even if it's sad to say, email clients are still bad in interpreting stylish HTML codes.
Just stay on old-fashioned tables and basic formatting (bold, italic, etc).
If you need graphic awesomeness, I suggest you to use a single, big picture. But only as last resort.
I have created a single HTML file that includes its own CSS styling, as well as custom HEAD tags so that it displays in a mobile browser fairly nicely. I then have it working with PHP as a file attachment.
Trouble is this -- Gmail is munging the View of it, but not the Download of it. Gmail is stripping out the CSS and rebuilding the HEAD without my custom viewport stuff.
Is there a programmatic way to code the HTML5 to cause Gmail to fail in doing this cleansing?
My only advice (and it sucks because it means a lot more work) is to put the styles inline with the html as much as you can. That seems to get past at least some of their filtering.
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.
I'm trying to figure out where to put some code in an email. You know how you can get newsletters with styling and images, etc? I wanted to send some out but I cant figure out where to put the code. Do you add the images as attachments? Do you put the code in the body?
or should you upload the .html file as well?
Build the page as a normal HTML page. Use TABLES (yes, TABLES) for your layout. You can use inline CSS, but you cannot use a stylesheet. All images must be fully-qualified (http://yoursite.com/images/). Don't make it wider than about 650 pixels. No JavaScript.
View your newsletter HTML in a browser
Do a select-all, and copy
Paste it into a new message and send it to yourself
See what you end up with
Try other mail clients
Various mail clients will mess with your markup and your styles. What works on Gmail will look like poop on Outlook etc. It will be an exercise in frustration. Test, test, test.
Assume all images will NOT BE SHOWN when the user originally views the email.
Here's a good guide to what works and what doesn't:
http://www.campaignmonitor.com/css/
My advice: keep it simple - a logo and some text and a link to the real newsletter. Making email newsletters is a fine art, and frankly, people prefer to read them in a browser where they behave like a web page.
Sending out HTML emails eigh?
There can be a lot of problems you will quickly encounter, mostly revolving around each email client having their own different way of handling things. The aim here is to keep your email as small, simple, and unbroken as possible.
The message:
Each language has it's own requirements, you need to check with the language you are using to see what is easier, to do it inline as part of the mailing script, or to have it inserted through a HTML file, etc. So for more details here, post the language you're using.
Layout:
This is where message simplicity comes in. The best layouts are usually the most simple ones, especially considering not all email clients are 100% HTML standards compliant. You won't know how big your client's viewing window for the email will be nor can you force it to any size or pop it out. Remember that it's goal is to be a message, not a webpage. Usually simple flexible/elastic tables will do the trick just fine if you have anything more advanced than simple paragraphs.
Images:
Link everything statically (statically means http:\\www. ....mypicture.png as opposed to dynamic linking which looks like this \images\mypicture.png) hosted from your server. The reason for this is so that you will have no broken links, your email will be smaller in size (as opposed to attatching). The downside is that some clients may ask about showing pictures. The cold hard truth is that this cannot be avoided no matter which method you use (See for more details).
Links:
Again, link everything statically. Local/dynamic link's won't work and your recipients will be mighty unhappy.
CSS
Either have your CSS classes at the top, or everything in-line (< ... style="..." />). You don't want to attach a CSS file, it's messy and unconventional.
Scripts
Inline or at the top of your file, for the same reason as above.
Additional Documents
If you want to include PDF's or DOCX's, etc, the best and most common methodology is just like images, to host on your server and simply include a static link in your email to them. It keeps file size down and you don't have to worry about what each and every email browser/reader is going to do.
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.