Styling html in email
I'm sending emails with an HTML version for capable clients (isn't that virtually all nowadays?). My worry is how to style it. Do I use inline css? Can I include the stylesheet in the html? Does the html begin with <html> or <body>? Is there a standard I can read on this?
How far can I go in styling? I have border-radius,开发者_如何转开发 background gradients, etc that have natural fallback mechanisms for browsers that don't support it (IE). For IE, I use PIE.htc, I assume that's going too far...
Regarding what kind of styling you can and can't use, have a look at this excellent article which details what each of the 10 most popular email clients support:
http://www.campaignmonitor.com/css/
As far as using stylesheets, you can do that if you like, but you'll have to link to a stylesheet hosted elsewhere, as far as I know. This might present a problem if someone wants to read their email offline.
Lastly, I try to always wrap my HTML emails in the <html> tag, as it seems to make the email appear more "valid" to many email filters.
To quote something I read in a magazine recently 'code like it's 1996'.
Trying to code elegantly and efficiently doesn't seem to return consistent results when you test your newsletter with multiple mail clients. When you test make sure you get your testers to do a foward of the message as sometimes fabulous coding will break in the forward.
While I hate using tables for display, they will render more consistently across mail clients than floating or multi column DIVS will (particularly if the newsletter, etc is forwarded on from the original recipient to someone else).
see also: http://www.netmag.co.uk/zine/discover-culture/create-the-perfect-newsletter
Heeeeeelllooooo 1996!!
I'm sending emails with an HTML version for capable clients (isn't that virtually all nowadays?).
From hard experience, "capable" doesn't equal "enabled". I don't think there's anything wrong at all with having great-looking HTML email, but make sure that you have a text-based contingency if your audience demands it.
I've worked with several companies who were technically progressive until it came to rich email, which somehow has managed to stay in prehistoric times (I like the "code like it's 1996" comment in this thread). You are potentially contending with ancient Lotus installations, Outlook Web Access 2003 running in "down level" mode, or proxy servers that will munge HTML content prior to receipt.
More difficult to deal with is the fact that modern email clients like Gmail and Outlook 2007/2010 are "smart" and don't download images unless explicitly allowed.
To answer your original question, don't rely on anything even close to cutting edge (such as CSS 3) or complex (deeply nested layouts, negative margins, etc). If you decide to roll the dice on images, you can put more in your image and less in your HTML, allowing you to get more creative with your designs.
The best emails I receive are the ones which have clear and simple text that is so interesting I allow Outlook to download the pictures, and I forgive any minor formatting errors. Content, as always, is king.
I could probably talk about the do's and don'ts of email coding for a while but if you consider just a couple basic principles you'll know more than most..
gmail (and MS Outlook) are the two most difficult email clients to code for but it is possible to develop a responsive email with a high level of design that will display well across clients. On Gmail, it will just display your desktop layout without the responsiveness.
You should use very little to no CSS at all when you start coding an email. Think of a 'desktop-first' approach and code it as simple as possible as you'd like it to appear when viewed at 600 pixels wide. I don't care if people say it works in email or not, if there's a more depreciated way of accomplishing the same thing, the more depreciated method is always going to be more compatible with email clients.
Forget about css and html as you typically use it. You should attempt to limit your tags to xhtml1.0 valid tags only. You can actually do a lot of layout with the limited palette of tags, you just have to think of more round-about ways of doing so.
For a very simple example:
Rather than using padding or margin or transparent image spacers to achieve vertical spacing within a CTA button you can use a table nested one table deep, xhtml valid attribute tags and zero CSS to achieve a vertically centered label within a padded color button with colored text.
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#00cc66" width="200">
<tr>
<td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td>
</tr>
<tr>
<td align="center"><font color="#ffffff"><b>Click Here</b></font></td>
</tr>
<tr>
<td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td>
</tr>
</table>
Step 1
Code your email without CSS and make it look good.
At this point your alphabet should consist of nothing other than
html,body,table,tbody,tr,td,span,a,b,nobr,src,alt,target,cellpadding,cellspacing,border,align,bgcolor,color,height, and the alphanumeric content within those tags.
You may be tempted to use valign,style,background,class,...... DON'T.. not yet
If you want to achieve the highest cross compatibility possible, accept that some clients are going to see it this way, so it behooves you to make that as clean and presentable as possible.
Step 2
Once you've got that basic structure looking good and presentable you can consider making it look better. You can start adding some CSS and HTML4 tags to improve the styling for those clients that will see it. But don't go hog wild, try to maintain the minimalistic approach.
Once you've got your CSS in place, whatever CSS you want to use (caniuse.com is a great resource if you want to get an idea of what to try to use). Once it's all in place, delete all of it abruptly and without prejudice, just delete those new tags, nothing else. Now look at the email. If deleting those tags didn't break your layout, then your good to go. You can safely undelete them and sleep well knowing you have a cross compatible email. If anything broke your layout, your best not having it there because a lot of clients are going to do exactly that and delete it and your going to have a really bad day if you leave it there.
Step 3
Once that's done you can add a couple [tag:media queries]. I've got media queries for 600 and 400 and I double them up to achieve higher compatibility. Using CSS in the head you can then set about overwriting any of your layout in the HTML with important tags. So those clients that read it will ignore the inline styling you used and adhere to the new style your adding. This is great for adjusting the width of elements, hiding or displaying elements, etc..
.mobile {display:none;}
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
*[class="desktop"]{display:none !important;}
*[class="mobile"]{display:block !important;width:auto !important;max-height:none !important;overflow:visible !important;float:none !important;}
With those 4 lines you can do almost all of your responsive structuring.
**note: the use of the desktop class requires additional effort
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr style="mso-display:none;">
<td align="center" class="mobile" style="width:0;max-height:0;overflow:hidden;float:left;mso-display:none;">
<a href="" target="_blank">
<img class="banner" alt="o" src="logo-wide.gif" border="0" width="0">
</a>
</td>
</tr>
</table>
This is probably the most important CSS in my code. The example table will not display on any desktop devices (including Gmail) but will display on mobile devices. The only client this fails to work properly with is Windows Mobile 7.
I use these two classes to remove elements from the mobile layout to achieve the responsive design. The desktop class is avoided and used only in rare circumstances because it means your email will loose compatibility in Windows Mobile 7.
Step 4
Test test test test test. Its ridiculously insane how easily an email can break. Do not trust Litmus or any testing suite because they are only accurate to a degree. You should have a test device for every device your concerned with. If you have not spent considerably more time testing the email than however long it took you to code, then you have not tested thoroughly enough..
Don't trust what people say about coding email unless you've tried it, tested it, and proved it yourself. Because far more people think they know what they're talking about than those that actually do, especially when it comes to reading blogs and articles about email coding.
If you'd like an example or boilerplate to use, here is the template I created over the course of about 2 years of coding 2+ emails almost every week. I can pretty much guarantee it will be the most cross client/device compatible marketing email example you will find. Feel free to copy it, modify it, whatever you like.
Its worth noting.. When I worked for a startup I had to code several emails per week & we chose to do so in the most difficult way possible: insane client compatibility & using as few images as possible. No text in images, rather I had to splice around the text, and make things like background images behind text work well across clients.. Backgrounds behind text in an email are incredibly difficult to make work well for some email clients.. Possible, but frustrating as crap. When I moved on from that job and started working for big name brands, for a short period of time I had to code a few more emails (I don't code emails anymore).. but for those big brands.. they didn't want me to waste hours of time coding emails. They preferred to just make it one big image, text and all.. Easy peezy. On that note, back when I worked at the startup.. we did run a test once, comparing click rate on highly polished coded emails vs text based emails vs all image emails.. The differences were negligible at best.
As far as the email client is concerned the HTML in an email begins with <body>. All styling must be done inline, unfortunately email clients don't behave the same way browsers do. There is some good information available here:
Do I use inline css?
Yes,
- in A and FONT elements for color, font-size // face/font-family are equal for email parser
- in IMG elements for display:block; //gmail uses display:inline; so you need to override it
- in first TABLE for background-image; background-repeat; //to display bg-images in Outlook 2007/10.
Can I include the stylesheet in the html?
Yes, HEAD and BODY tag are both needed, because most web mailer parse only the content of the BODY
Does the html begin with <html> or <body>?
Html starts with the DOCTYPE Declaration.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
It's my favorite, because you can make use of the FONT element. (useful to style stable link colors within the A element)
http://www.w3schools.com/html/html_doctype.asp
http://www.w3schools.com/tags/tag_doctype.asp
加载中,请稍侯......
精彩评论