E-mail marketing has proven to be a pretty tricky thing in the past few years, especially with people always trying to add all the glamour and glitz, but one thing remains the same: the K.I.S.S. method reigns supreme. When in doubt, “Keep It Simple…”and that’s key.
Whether you do it in Cascading Style Sheets or pure HTML is still an ambiguous tale. There are some that would say do HTML because CSS hasn’t been validated by all the browsers and e-mail providers which may cause your message to inadvertantly be distorted. However, I received an e-mail from e-mail marketing company Blue Sky Factory which gives a little insight into using CSS for e-mails…
Over the last 5 years, the world of website design has experienced a progressive shift in the way HTML is built. Table-based layouts are slowly becoming a dying art. Now, CSS (Cascading Style Sheets) layouts are far superior. They are lightweight, load fast, and are incredibly easy to build, thus reducing production time considerably. The shift is a good thing. Unfortunately, this shift has been dramatically hindered in the world of email design.
Email browsers still prefer tables. There is no way around that. You can send a CSS email to your list, but you better have a “View this email in your web browser” link at the top because it could get ugly. Chances are Gmail, Hotmail, and yes, even Outlook are going to eat your design for breakfast. Specifically, these email browsers scan your code and remove [style] or [link] elements anywhere on the page. This in turn kills any chance of your strictly CSS-based layout of displaying how you intended. So how do you get away with incorporating CSS while still keeping your layout intact?Get inline.
Maximizing layout integrity across multiple email browsers while still being able to use some of the great advantages of CSS design is not unachievable, you just have to get a little sneaky. Inline style embedding is a method of incorporating CSS mark-up into your table cells [td]. The table cell then takes on the parameters of the style that you set.
This method works in almost every email browser. Plus, your layout is still going to be table-based. So if for some reason the style attributes don’t work, your content will fall nicely into the table cell it’s sitting in, causing a subtle break instead of a dramatic one. Inline styles will save you a lot of headaches when designing with tables and save you time as well.
While inline styles are a great work-around, they are still not perfect. Even when using inline style, some of the more advanced properties of CSS will not work in email. It’s best to stick with the basics. Background color, padding, margin, and font properties are among the select classes that are widely acceptable. Another drawback to the inline technique is that it has to be repeated for every table cell. Plan to get very familiar with your copy/paste key commands.
You’ve probably used inline CSS without even knowing it. It’s not strictly limited to table cells. You can use it in your [div] and [span] tags too. I tend to use it in web design when I know a particular style will only occur once. That way you don’t clutter up your external style sheet.
In email design, inline styles are an easy thing to do and an excellent practice to ensure your email is rendered properly across various email clients. Eventually, CSS will have the freedom in email as it does on the web. Until that great day, this is a nice work-around to keep you happy.
Note: If you were wondering why I put the HTML tags in [ ], that’s because this system doesn’t know how to distinguish HTML from just pure text…it throws everything off…so [ ] = < >. Got it?
In any event, if you want to read this article for yourself or want to talk to the folks at Blue Sky Factory, you can read their blog by going blueskyfactory.com.
Leave a Reply
You must be logged in to post a comment.