|
 This week's topic involves using advanced styling in HTML emails. I chose this topic because we recently went through the process of building some nice looking email templates for a client. As any good web designer will tell you (and we have a great one), the best way to design a styled web page is with the use of Cascading Style Sheets (CSS) for all of your design. This includes fonts, layout, colors, backgrounds - all defined in a separate file from your HTML. Check out CSS Zen Garden for some great examples. This would be what is commonly known as separating your style from your content, and it is a cornerstone of good web design. Business software developers understand this methodology inherently. We are taught to "loosely couple" the different layers of our applications as well (data from business rules, business rules from graphics). We can also separate our Javascript completely from our HTML with something like JQuery if we are being diligent. All of this makes your software easier to build, maintain, and modify with as little cost as possible.
Anyone who has developed web apps, though, knows that it is only within the last few years that good software design has become practical on the web. The tools that we have now are much more sophisticated than what we had even five years ago. Having just started getting used to the relative ease of developing for the modern web, it was jarring to see how little of it I was allowed to use in building an HTML email. Now that I am reflecting objectively (and not kicking and yelling at my screen), I can understand that web email clients have an enormous responsibility. Having to render your potentially deadly web page WITHIN their web application makes for a dicey operation, so I can understand some conservative policies on what they do and don't allow. But, it is still not cool to have to code HTML like we are circa Y2K when our customers are expecting the kind of graphical awesomeness they see on their favorite web sites. So, without undue delay, a handful of tips that were hard-won. As promised in the title, compromises will ensue.
Actually, I will just cut to the chase, because this is really the fundamental and largest compromise. Get used to doing all of your styles inline. This means that instead of separating your design in different files or even in a different section in the same file, you are going to copy and paste them into every single element. To illustrate, here is your <div> tag, before and after.
Before:
<div class=prettyStyle id=divContent>This is my content. Nice and Clean</div>
After:
<div style="BORDER-BOTTOM: #036 1px solid; PADDING-BOTTOM: 3px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: block; MARGIN-BOTTOM: -8px; FONT-SIZE: 18px; FONT-WEIGHT: bold; PADDING-TOP: 0px" id=divContent>Can you still find the content if you need to change it? Neither can I.</div>
On almost every...single...tag. Period.
Why, you ask? Imagine that you are embedding another person's HTML into your own HTML (as web mail software does). Up front, you would need to strip out the <HTML> and <BODY> tags because the embedding page would have these already. Many, if not all, mail programs (GMAIL, Yahoo) also ignore <HEAD> tags and anything that would go in them. I would assume this is because the embedding page would also have one of these and there may be some conflicts and bad behavior if you can create your own - particularly if you are an evil and/or destructive coder.
The most important implication of this is you cannot <LINK> a file, which keeps you from using your nice external .CSS file. This is your first big compromise. You remain optimistic, though, because you can use a <STYLE> tag to embed your style directly into the document and still keep that crucial separation, right? Nope, <STYLE> tags are ignored too. This is the one that really hurts. I suspect that these apps are worried about us using the <STYLE> tags to overwrite their styles and make their user interfaces look really awful (and we have seen some really offensive designs). Understanding the reason doesn't make it hurt any less, though. Yes, we can use <IMG> tags and link to external images, but a user generally has to click the "Are you double-sure?" link to see those because Google, Yahoo, and Microsoft don't want to be responsible for what happens when you do that - and you can't really blame them. I would also be willing to believe that I have just scratched the surface of the differences between web pages and web email (there are horror stories out there, if you are brave enough to search for them).
Fortunately, most professional e-mail distribution services seem to hide the nastiness from you using their own software. If you look at the code they generate, they take your nicely designed web pages and mangle the code for you so web mail apps will accept it. If you do decide undertake your own HTML email, though, consider yourself warned.
|
