Tags for this article: css, email, html, style sheet, web design, website
I think most of us are aware about the most common problem of designing HTML email using CSS. Almost all web designers who have tried recreating a sophisticated and descent HTML email design using the cascading style sheets have always had a bitter taste of disappointment, either in the form of a pronouncement by the email administrator that they don’t support CSS, or inexplicable mangling by email clients.
I am neither contradicting my earlier statement nor am I wrong when I say that your HTML email can still be deployed using CSS. Though all the attributes will not be invited to the party but still some will surely work flawlessly. Email as we all know is the best and the most commonly used method of communicating. The better displayed and explained your message the more people are likely to read and get benefitted from it. Styled emails with the use of different colors and highlighting make the message readable and understandable with much ease.
Whenever an email that is designed using an external style sheet is blasted to various clients version 6.0 of AOL will invariably bounce back or reject the email. If at all, the code of the mail is analyzed the results will definitely be more than surprising. The main reason for the entire problem of bouncing back or rejecting or not supporting is that the HTML code is not what we had sent, but is definitely the most unexpected i.e. a mixed breed code and proprietary tags. The reason for this unexpected behavior is that each email has its own way of rendering the code, methods of handling CSS and unique bugs and quirks.
Each problem always has a solution following it. When two body tags are displayed on the HTML email, then the simple solution to the problem is enveloping entire content of the email in a div tag and further applying the intended body attribute to the div. At times it happens that certain clients are not able to render any kind of style what so ever when they receive the mail. They are just able to see the plain text. But if the source code is analyzed it will not show any kind of discrepancy. The main reason for this is that the dots preceding the names of the styles were getting stripped resulting in feature instead of .feature, which is absolutely meaningless. The only solution to this problem is to begin a feature with a letter instead of a dot. This may sound a little weird, but it really works and is compliant as well.
Different people use different style sheets thereby there is a common problem of sender’s cascaded style sheet over ruling the receiver’s style sheet thereby altering the element definitions and pseudo classes. The solution is customizing every definition so as to accommodate links in both the documents. Although there are many such problems relating to various attributes, but these are the most common ones.