Menu
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...
347
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>
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.
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.
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.
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.
89
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!!
35
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
