Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I'm designing an HTML template for an email newsletter. I've learned that many email clients ignore linked stylesheets, and many others (including Gmail) ignore CSS block declarations altogether. Are inline style attributes my only choice? What are the best practices for styling HTML emails?
I've fought the HTML email battle before. Here are some of my tips about styling for maximum compatibility between email clients.
Inline styles are you best friend. Absolutely don't link style sheets and do not use a <style> tag (GMail, for example, strips that tag and all it's contents).
Against your better judgement, use and abuse tables. <div>s just won't cut it (especially in Outlook).
Don't use background images, they're spotty and will annoy you.
Remember that some email clients will automatically transform typed out hyperlinks into links (if you don't anchor <a> them yourself). This can sometimes achieve negative effects (say if you're putting a style on each of the hyperlinks to appear a different color).
Be careful hyperlinking an actual link with something different. For example, don't type out http://www.google.com and then link it to https://gmail.com/. Some clients will flag the message as Spam or Junk.
Save your images in as few colors as possible to save on size.
If possible, embed your images in your email. The email won't have to reach out to an external web server to download them and they won't appear as attachments to the email.
And lastly, test, test, test! Each email client does things way differently than a browser would do.
Campaign Monitor have an excellent support matrix detailing what's supported and what isn't among various mail clients.
You can use a service like Litmus to view how an email appears across several clients and whether they get caught by filters, etc.
Mail chimp have got quite a nice article on what not to do. ( I know it sounds the wrong way round for what you want)
http://kb.mailchimp.com/article/common-html-email-coding-mistakes
In general all the things that you have learnt that are bad practise for web design seem to be the only option for html email.
The basics are:
Have absolute paths for images (eg.
https://stackoverflow.com/random-image.png)
Use tables for layout (never thought
I'd recommend that!)
Use inline styles (and old school css
too, at the very most 2.1, box-shadow
won't work for instance ;) )
Just test in as many email clients as you can get your hands on, or use Litmus as someone else suggested above! (credit to Jim)
EDIT :
Mail chimp have done a great job by making this tool available to the community.
It applies your CSS classes to your html elements inline for you!
In addition to the answers posted here, make sure you read this article:
http://24ways.org/2009/rock-solid-html-emails
The resource I always end up going back to about HTML emails is CampaignMonitor's CSS guide.
As their business is geared solely around email delivery, they know their stuff as well as anyone is going to
'Fraid so. I'd make an HTML page with a stylesheet, then use jQuery to apply the stylesheet to the style attr of each element. Something like this:
var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
$('body *').css(styleAttributes[i],function () {
$(this).css(styleAttributes[i]);
});
}
Then copy the DOM and use that in the email.
I find that image mapping works pretty well. If you have any headers or footers that are images make sure that you apply a bgcolor="fill in the blank" because outlook in most cases wont load the image and you will be left with a transparent header. If you at least designate a color that works with the over all feel of the email it will be less of a shock for the user. Never try and use any styling sheets. Or CSS at all! Just avoid it.
Depending if you're copying content from a word or shared google Doc be sure to (command+F) Find all the (') and (") and replace them within your editing software (especially dreemweaver) because they will show up as code and it's just not good.
ALT is your best friend. use the ALT tag to add in text to all your images. Because odds are they are not going to load right. And that ALT text is what gets people to click the (see images) button. Also define your images Width, Height and make the boarder 0 so you dont get weird lines around your image.
Consider editing all images within Photoshop with a 15px boarder on each side (make background transparent and save as a PNG 24) of image. Sometimes the email clients do not read any padding styles that you apply to the images so it avoids any weird formatting!
Also i found the line under links particularly annoying so if you apply < style="text-decoration:none; color:#whatever color you want here!" > it will remove the line and give you the desired look.
There is alot that can really mess with the over all look and feel.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
When implementing an HTML template that will be sent in an email, what should I know? For example, I know most email clients do not download images by default. How do you get around that? What are other css/html implementations that are not supported?
The first thing as a rule of thumb is: When you code HTML emails, code like you're back in the 90s. That is: Table layouts!
Wrap everything in a Table widh
border="0" cellspacing="0" cellpadding="0"
CSS is supported in some mail clients, others fitler it completely. Some clients only allow inline-styles, not style tags. So it's best to still use <font> tags for text styling and the deprecated bgcolor attribute, and so on. Padding/margin around elements should not be generated using CSS padding and margin, but rather by using empty table cells that include a transparent 1x1px gif. Make sure to apply the height to the img tag as well as the td and if you really want to make sure, also the tr tag.
Things are getting better and better, with Gmail recently making changes that allow media queries for responsiveness, but that has not rolled out globally yet.
So with media queries not (yet) working everywhere and most people using mobile devices nowadays, it's not a bad idea to use a "mobile-first" approach and use media queries on larger displays to extend the layout. For Outlook, you can use conditional comments (as it doesn't support media queries either) to achieve the same:
<!--[if mso]>
<style>/* style block will only be used in MSO */</style>
<![endif]-->
where you are also able to target specific Outlook versions, for example the current Windows 10 Mail app is mso 16. You can use lte/gte/gt/lt just like in conditional comments used for old IEs in earlier times.
Speaking of Outlook: It's also a pain in the ... eye in some other areas. To force line-height and prevent some unwanted spaces, there are MSO-specific styles like mso-line-height-alt:0; and mso-margin-top-alt:1px;, I recommend reading up on these as well.
For column layouts, do not use float, but align="left" on each table that represents a column, except for the last table in a "row" (because that will cause problems with tables floating off the grid in Thunderbird).
In my experience, at least if you're starting a template from scratch, it's a matter of building, testing in clients (webmail, desktop and mobile devices), fixing, doing research about some client-specific things that don't look the way you'd like them, trying out some own attempts to fix it, and testing all over again.
Email clients and rendering engines
Email clients use different rendering engines to render HTML emails:
Apple Mail, Outlook for Mac, Android Mail and iOS Mail use WebKit
Outlook 2000/02/03 use Internet Explorer
Outlook 2007/10/13 use Microsoft Word (yes, Word!)
Web clients use their browser’s respective engine e.g. Safari uses WebKit, Chrome uses Blink
Update November 2016: Just recently Google announced support for embedded CSS and media queries in Gmail. This is HUGE for the email development industry. Now, as of September 2016, Gmail will support a slew of CSS properties which makes template development a lot easier for Gmail.
Litmus has a handy website dedicated to the current email client market share, based on their own internal stats (~1 billion emails).
font: http://www.leemunroe.com/building-html-email/
I suggest to you use and test these ones:
https://github.com/TedGoas/Cerberus
http://foundation.zurb.com/emails.html
http://litmus.com/
https://www.campaignmonitor.com/
I hope this helps you.
You can't link any external stylesheet, You cant use floats, some clients ignore background images. Your should check out foundation for email if you wish to use good looking html emails in your projects that most clients support. There are several default templates available that you can use or you can build your own custom designs.
There is a lot you need to know, but a few big ones that comes to mind are:
Use table based layout
Use HTML4 syntax
Use CSS2 syntax
Use inline css (style=) and do not include a style tag in the head
Use alt text for all images and use a background color as a fallback when the image hasn't been downloaded yet.
Those are just a few pointers, but I agree #Joseph Marikle, refer to the link he posted.
I am wondering if shorthand CSS coding is allowed for HTML Emails.
I know the CSS allowed is very limited but I know padding for example is allowed but would this be allowed:
padding:0 4px 0 6px;
The CSS that is allowed in an email is what the receiving email client understands. There are many different email clients. Not all of them even render HTML email (though virtually all do these days), but even where they do render HTML, their rendering engines will all be different from one another, in the same way as web browsers. But unlike web browsers, people don't always change their email client if they're not happy with the way it renders.
So you should expect your email to be read using virtually any kind of email program, including ones which don't render HTML at all, and those which render it, but using an IE4-vintage rendering engine.
That said, I would expect virtually all email clients to correctly interpret the CSS padding style.
You may get some with quirks-mode box models, which will cause your box sizes and positions to be wrong, but they should still interpret the padding correctly within their own set of rules.
One thing I would say is that you should ensure all your CSS code is embedded in the HTML. Put a big <style> tag at the top of your document, rather than a <link> tag with an external reference. The reason for this is that 1) some users may view your email when they're offline, in which case they won't be able to load an external stylesheet, and 2) some email clients may be set to block loading external files from within an email for security reasons, even if the user is online. If your styles are all included in the main body of the email, this won't be a problem. (you may still have the same issue with graphics, but that's a whole different topic of discussion)
I have never had a problem doing 'shorthand' like that, so long as all of the values are provided.
Technically, padding:0px 4px; should work such that top & bottom are 0, and left & right are 4, but not all email clients will honor that (I'm talking to you, Outlook 2007/2010!) so you need to include all four for margin, padding, border etc.
In case this is still of interest I have been looking into this lately. Some mass mail company clearly state that some applications like font (at least) are not rendered well on some email clients.
http://www.campaignmonitor.com/resources/will-it-work/guidelines/
Actually after reviewing a few email sources of templates (Mailchimp, Campaign Monitor, etc) they all consistently avoid them so my conclusion so far is been to do so as well.
In any case more important than shorthand or not is the fact that most CSS styles need to get "inline" of elements as many (Gmail included) ignores them if defined on the head.
As a simple solution I tend to use basic styles on the body element and on a containing table surrounding the content (as body styles also get removed by some clients).
In a simplest form you can set styling for each element like this:
<p style="padding:0 4px 0 6px;">your contents</p>
Yes.
And, as with any "webpage", what the user actually sees is completely up to the "browser" (or HTML-capable email client).
You could have simply tried it to find out.
Also, I recommend not being obnoxious by splashing graphics and colours all over emails. :(
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
What are the proper practices in designing an email with a reasonable expectation that it will show up correctly for Outlook 2003, 2007 and in a webmail client? I'm subscribed to various email newletters and have viewed the source on them and have seen some of them have 2000 lines of HTML&CSS along with IF statements I've never seen before (I assume related to determining versions of outlook).
Is there a tool either free or commercial that can be used to create the markup? Is there a standard pattern on how to apply these huge stylesheets I've seen?
Designing for email is a nightmare, due to Microsoft's adoption of the Word HTML engine for newer versions of Outlook. There's no tool that I know of, but this guide will give you a helping hand when trying to decipher what client supports which CSS:
Guide to CSS support in email clients
Oy. Such awful answers.
See? This is what happens when everyone decides that using tables instead of css is some kind of taboo. Everyone's limiting themselves with such CSS arrogance and elitism. When all one has is a hammer, everything looks like a nail. Unbelievable.
One poster wrote: "That was my starting point and even that isn't reliable, even a simple single column table with a fixed width gets messed up where the table cells expand for no reason past the width."
Fixed width is what got you in trouble. A 600-pixel fixed-width table is obviously going to be wider than a 400-pixel email viewing window/area. It doesn't expand wider, it IS wider. [sheesh]
There is no way to predict how wide will be the recipient's email viewing window/area. So, create a single table, but set it's width to 100%, not a certain number of pixels. And set its height to "auto." Make its padding nice and wide... 7 to 10 pixels, minimum.
Then just do everything within that table as you normally would, but stick with vanilla HTML4, avoiding XHTML, DHTML, XML, java, javascript, etc., etc. Just HTML4. No CSS, either. Just HTML4. Period.
Use images that are on a web server somewhere that can be linked to using normal http:// URLs, and then just link to them using normal img tags, placing the entire URL of the image (including the http:// part) between the quotes, as in...
src="http://www.website_url.com/filename.jpg" (or .gif or whatever)
...and avoid using the "alt" feature or anything fancy.
If you want to strictly control font size, then don't hesitate to use the "span" tag since it will work in nearly every email client... just dont get too fancy with it.
Also don't make your images too big... especially, don't make whatever is the "header" or top image too wide. Setting the table width to auto won't help much if the graphic remains 600 pixels wide and the receipient's email viewer is 400 pixels wide. Use a graphic that will nest nicely in the upper-leftmost corner of the email message; and use fairly small photos and other graphics.
Do all that and you should find that the email will look the same in pretty much every email client. Double-check by using...
http://litmusapp.com/email-previews
...as another poster, here, suggested.
Hope that helps.
There are definitely some best practices in creating reasonably cross-client compatible emails.
2 of the most important concepts to remember are:
Only use inline CSS. This will save you many headaches as Gmail and many other email clients choke on having CSS in a <style> tag.
As many people have said already, tables are the way to go for sizing elements (instead of CSS).
I actually just wrote post on this topic with some best practices, if you're interested:
http://www.versapay.com/developer-blog/the-art-and-science-of-email-rendering-across-email-clients/
I would recommend a preprocessor based framework like Foundation for Emails.
It's extremely difficult to make emails that work across all the clients because they use different rendering engines from web browsers, where the design was likely developled. Try using LitmusApp's email testing service, which will give you screenshots in how your email will appear in different email clients.
Keep the width fairly narrow (~600px at a guess).
Use tables rather than CSS divs.
Make sure it works in IE6!
HTML cannot be successfully implemented in email for three reasons.
1) HTML is designed to work for the HTTP protocol (web) only and not SMTP protocol (email). This is clear in that the head of an HTML document supplies data relevant to the processing of the document in accordance with a transfer over HTTP. Since HTML supplies no conformity to the conditions supplied by the SMTP protocol it is on its face in compatible. As of this time there is no standard of any kind for describing the format of content in email.
2) HTML is not a presentation language. HTML is intended to supply structured meta-data to content and is never intended for presentation. HTML is only used in email for presentation, and as such is often abused and used in complete violation of the standards.
3) A single document in email can have multiple authors each with independent header information. Such a document is called an email thread. HTML has no such convention. When HTML is supplied in email it may look fine to the initial user who receives it, but when replied or forwarded it will look like crap and fail to do its job, which is likely not doing anyways. To my knowledge Mail Markup Language is the only markup language containing features to address and serve multiple author contributions to a single markup language document without conflict as is necessary to support an email thread accurately.
Those three reasons are why HTML is completely incompatible with email and is not capable of being successful.
I'm writing a webmail product and some emails have body css that changes the background ... so when I Html.Decode() that emailbody, it's altering the CSS of the entire page.
Is there a good way to contain that problem?
You can make your CSS more specific than the email's rules. For example:
body.body is more specific than .body or body
Any styles in body.body that clash with those in the lesser examples above, will override. But to stop the styles merging together, you'll need to define every single style.
Alternatively you can go with rewriting the CSS in the emails, which is the way most webmail/desktop email clients go these days, one way or the other. If you prefix all the rules with #emailMessage, for example, and place the email inside a <div id="emailMessage"></div> tag, all the styles in the email will only apply inside that namespace.
Using an iframe to display emails only introduces more problems based around accessibility, etc etc. Good luck.
The answer to your question is probably "iframe", but in your specific situation, writing a webmail client is going to introduce you to a wonderful new hell called "stripping css from possibly extremely invalid html generated by a large variety of clients that all have their own ideas about what kind of html should be allowed in an email".
Good luck!
A common way is to use iframe, although i'm not sure this is applicable for your problem.
Basically it loads a different html page inside another page. Which makes it independent, but it does mean you have 2 pages to display one email.
http://www.w3schools.com/TAGS/tag_iframe.asp
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
What guidelines can you give for rich HTML formatting in emails while maintaining good visual stability across many clients and web based email interfaces?
An unrelated answer on a question on Stack Overflow suggested:
http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html
Which contains the following guidelines:
Place stylesheet in <body> instead of <head>
Some email clients will strip CSS out of the head, but leave it if the style block is (invalidly) in the body.
Use inline styles where ever possible
Gmail will strip any stylesheet, whether in the <head> or in the <body>, but honor inline styles assigned using the style="" attribute
Return to tables
Email standards have actually taken a giant step backwards in recent years thanks to Outlook 2007 using the Microsoft Word rendering engine. Unlearn most of what you learned about positioning without stylesheets.
Don't rely on images
Most clients and most web based email clients will not display images unless the user specifically requests them to be displayed.
I also have a few "unconfirmed" truths that I don't remember where I read them.
Don't use more than two levels of nesting in tables
Is this true. What is likely to happen if I do? Is there any particular client/clients that choke on this?
Be careful of nesting background images in cells/tables
As I understand you may encounter situations where the background image is applied in the descending table/cell completely anew, and not just "shining through". Again, true or not? Which clients?
I would like to flesh out this list with more guidelines and experiences from the trenches.
Can you offer any further suggestions?
Update: I'm specifially asking for guidelines for the design part in HTML and consistency there of. Questions about general guidelines for avoiding spam filters, and common courtesy are already on SO.
It's actually really hard to make a decent HTML email, if you approach it from a 'modern HTML and CSS' perspective.
For best results, imagine it's 1999.
Go back to tables for layout (or preferably - don't attempt any complex layout)
Be afraid of background images (they break in Outlook 2007 and Gmail).
The style-tag-in-the-body thing is because Hotmail used to accept it that way - I'm pretty sure they strip it out now though. Use inline styles with the style attribute if you must use CSS.
Forget entirely about float
Remember your images will probably be blocked - use background and text colour to your advantage - make sure there is some readable text with images disabled
Be very careful with links, be especially wary of anything that looks like a URL in the link text - you will anger 'phishing' filters (eg www.someotherdomain.tld is bad)
Remember that the "fold" on webmail clients tends to be extremely high up the page (on a 1024x768 screen, most interfaces won't show more than a hundred pixels or so) - get your identity stuff in right at the top so the recipient knows who you are.
Recent version of outlook have a "portrait" preview pane which is significantly narrower than you may be expecting - be very wary of fixed-width layouts, if you must use them, make them as narrow as you can.
Don't even think about flash, Javascript, SVG, canvas, or anything like that.
Test, a lot. Make sure you test in a recent Outlook (things have changed a lot! It now uses Word as its HTML rendering engine, and it's crippled: Word 2007 HTML/CSS support). Gmail is pretty finicky also. Surprisingly Yahoo's webmail is extremely good, with nice CSS support.
Good luck ;)
Update to answer further questions:
Don't use more than two levels of nesting in tables
I believe this is an older guideline pertaining to Lotus Notes. Nested tables should be okay, but really, if you have a layout that's complicated enough to need them, you're probably going to have trouble anyway. Keep your layout simple.
Be careful of nesting background images in cells/tables
This may be related to the above, and the same applies, if you're getting that complicated then you will have problems. Recent versions of Outlook don't support background images at all, so you'd be best advised to forget about them entirely.
Always use multipart mime and provide a plain text alternative.
The folks behind Campaign Monitor also started a Email Standards Project web site with a lot of good information.
Take a look at this boilerplate, it is like html5boilerplate, but for emails:
http://htmlemailboilerplate.com/
I think this is lower level than the question you are asking, but if you really want an html email to be correctly viewed by as many clients as possible, make sure it's using valid MIME. In particular, for an email to be considered as valid MIME, the headers MUST (in the RFC sense of the word) contain both of these headers:
MIME-Version:
Content-Type:
Very strict clients will display your HTML as raw text if one or the other of these is missing. You'd be surprised how many large online vendors who should know better have screwed this up (notably, I've gotten HTML emails w/ missing MIME-Version: headers from Amazon and the ACM in the past)
Background images are not reliable.
Practically a no-brainer, but no javascript.
Use an editor that lets you send the current file/buffer as an email, or at the very least, find a program that would let you send the contents of a file as an HTML email. do not test your emails by copying the HTML, and pasting it into outlook (or any other mail program for that matter).
Three words of advice: test, test, test.
Check out LitmusApp.com's email testing service. You send them a message and they render it in a bunch of clients and show you screenshots of the results. It's not perfect, but it's pretty good.
(Lotus Notes prior to 8.0 really, really stinks for HTML mail, by the way)
Also, beyond just inline CSS styles, I recommend switching to tags wherever possible.
Embed your images, don't link to them.
This is bad :
<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>
This is good :
<img src=cid:myImage/>
Yeah, it looks weird but check out this guide regarding embedding images in emails.
If you're including a style block don't begin any new line with ".classname" or "." anything. Put a brace or something before the period. If you don't do this some web mail systems will not properly display your style sheets.
Many people have incorrectly assumed they cannot use CSS blocks in emails because of this behavior... IIRC "." is the body delimiter for SMTP. Systems will tend to escape in their mail stores to prevent the contents of one message from being misrecognized as a new message. The way this is handled tends to break any style starting on a new line with a period.