CSS in HTML email

CSS (Cascading Style Sheets) is a Godsend for websites, but don’t put too much faith in
it with HTML email. For instance, you shouldn’t expect DIVs to work. And definitely stay
away from CSS positioning. Won’t work. If you’re a CSS-standards freak, you are going to
hate yourself after coding HTML email.
You’ll have to rely on old-fashioned for your layouts in HTML email, and only
use CSS for simple font formatting and colors. Always design your CSS to “fail gracefully.” That means if someone took away your CSS, your design and content would
still display decently. Before you send your HTML email, delete the CSS and see what it
looks like. Did you have tiny text that is now gigantic, and blowing out your tables?
CSS is especially a touchy situation if you’re using a WYSIWYG to design your HTML
email, because WYSIWYGs insert all kinds of crazy CSS and DIVs by default. It’s one of
the drawbacks of WYSIWYGs for HTML email. It may help you get things coded, but you
still have to understand HTML enough to go back and remove some of the code, so
things won’t break in email applications. You might as well code by hand.
Using Microsoft Word to generate HTML is even worse than using WYSIWYGs. Word adds
so much code behind the scenes, it’s unbelievable. Don’t do it. Learn to code HTML, or
use our built-in HTML email designer.
If your email design uses lots of CSS, be sure to check it in Google’s Gmail. At the time
of this writing, they don’t fully support CSS, so you’ll see your fonts defaulting to Arial,
and black in color. Here’s what our MonkeyWrench Newsletter looked like in Outlook
2003 (which supports CSS just fine) vs. Gmail...

Gmail stripped out virtually all of my CSS! Where did my font sizes, font colors, and lineheight
go? And since the fonts are so much larger in Gmail, it could have blown out my
table cells (if I didn’t know what I was doing). But notice the top line (next to the peeking
chimp). It wrapped my text into 2 rows. Blech!

Special Considerations for Webmail Services

So now you know how a lot of anti-spam systems work. You really have to “think like a
spam filter” when you design your emails. Just like you “think like a search engine” when
you design web pages. Spam filters read your emails, and look for similarities with
known spam. You don’t want to do things that’ll get you accidentally thrown into the
junk folder.
And the best way to learn what not to do is:
1. Open up your junk email folder.
2. Look through all that spam you got. Really read it. Look at how they design
things, and look at how they write their copy. Notice all the similarities?
3. Now, don’t do what they do.
Okay, okay, to be more specific, here’s some stuff to avoid:
**Using bright red fonts, or going crazy with colors, styles, and formatting. Check
out the article, “Let’s dissect some spam!” at our MonkeyBrains blog to see what I
mean.
**Yelling with lots of exclamation points!!!!!!!
**YELLING WITH ALL CAPS!!!!
**Using spammy words, like “mortgage, viagra, etc.”
**Saying, “free” or “click here!” or “click here now!” or “act now!” or “limited time!”
(be especially careful of your unsubscibe link, where you might say something
like, “click here to unsubscribe.”
**If you use a WYSIWYG to code your HTML email, make sure the HTML code is
“clean.” WYSIWYGs often throw in lots of useless code that’s invisible to the user,
but spam filters look at it, and think you’re a sloppy spammer who doesn’t know
HTML.
**Don’t use “dummy text” in your message, even if you’re sending a test
campaign. Spam filters get suspicious of all that “lorem ipsum” stuff. When
sending test campaigns, use content that’s as real as possible. Don’t type in one paragraph, then copy-paste it ten times. Spam filters can see all the duplicate
content, and they think it’s spam.
**Don’t use the word “test” in your subject line.
**Don’t get too creative with your spelling, because the spammers do that all the
time (how many m0rtg4g3 ref1nanc3 spam messages are in your inbox right
now?).
**Don’t make an HTML email that’s just a bunch of pretty graphics. You need some
text in your message, too. Otherwise, the spam filters will have nothing to read,
and will think your message is junk.
**Don’t send the HTML email by itself. Always include that plain-text alternative
message.

Simple Layouts and Tables Work Best

Simple Layouts and Tables Work Best
You wouldn’t believe all the different ways email applications garble up HTML email.
You’ll need to keep your email designs nice and simple. Avoid complicated layouts, too
many embedded tables, and tables with too many rows and columns. A simple two
column table with a row across the top is about as complex as you can get. There are
lots of email applications that don’t cooperate when you code tables with colspans
(table cells that “span” across multiple columns) in them. One application that’s
particularly finicky when it comes to tables (and just about everything else) is Lotus
Notes. We can’t stress it enough. You’ve got to keep your layouts very, very simple, if
you want it to work across all the major email apps.
If you’re working on an email layout and find the tables are getting complex, and you’re
having to code too many “COLSPANS,” you might think about chopping it up into
separate tables. For instance, we almost always use separate tables for the header,
body, then footer of our emails. Better to go with more “simple” tables, than one big
“complex” table.
If you’re a CSS ninja, you’re probably rolling your eyes in disdain with all this “TABLES”
talk. But trust us --- you’re not going to be able to use all that cool, timesaving CSS stuff in your HTML emails. DIVs and CSS-positioning don’t work. We’ll cover that later in this
guide.

Design Guidelines

Here are some pointers for designing your email. Early warning: If you’re a seasoned
web designer, you’re not going to be happy with all the compromises and hacks you’ll
have to make when designing for email applications.
Set your width to about 500-600 pixels.
If you’ve ever worked on a website, you’re probably used to designing pages to fit in
800x600 pixel resolution screens, or maybe even 1024x768. But that won’t work when
you design HTML email. Most recipients will be looking at your email through their
“preview pane” which is usually a small portion of their available screen (see screenshot
below).
Above is a screenshot of an HTML email in Microsoft Outlook’s preview pane. Outlook is
maximized to full screen (1024x768 pixels), but as you can see, the preview pane is
only about 440 pixels wide. In AOL 9, the “preview pane” is only about 194 pixels wide,
then when you click “Full View,” it typically opens up a window that’s about 540 pixels
or so. This is why you shouldn’t design emails to be much larger than 600 pixels in
width.

Designing and Coding

Now that you have a basic understanding of how HTML email campaigns work, and how
you should deliver them, we can start talking about designing and coding them (the fun
part!).
Tools of the Trade
If you want to get good at coding HTML email, here are the tools you’ll need...
1. A design application, like Adobe Photoshop, Fireworks, Dreamweaver, or
Illustrator. Use these tools to layout your template, and slice out your graphics
(like your company logo, and product photos). We’re really partial to Fireworks,
but to each his own.
2. A good, “pure” HTML/Text editor, like BBEdit and TextWrangler for the Mac, or
HomeSite, and NoteTab Pro for the PC. You could use “WYSIWYG” style tools to
generate HTML, like Microsoft FrontPage, or maybe Adobe GoLive or Macromedia
Dreamweaver. But they have their disadvantages. WYSIWYGs very often throw in
gobs of junk into your code (FYI, Microsoft says the extra code is to help with
“round tripping” which means you can export from Word to Powerpoint to HTML,
then back again, without losing anything). All this extra code usually ends up
just breaking things, or setting off spam filters. There are some WYSIWYGs out
there that generate “clean code” but we’ve found those are a bit “too perfect,”
because they’re designed for web pages, not HTML email (so they don’t know all
the things you have to “rig” in your code.). If you want to do HTML email
correctly, you should learn to code HTML “from scratch” with a good text editor.

Your own web server, to host all your images and archives. You should create a
folder on your website for email newsletters. This is where you’ll store images,
then point to them with absolute paths in your HTML code. You might also want
a folder on your website to store archived newsletters. When we first started out,
we created a folder on our website called, /monkeywrench/ and then kept
campaigns under subfolders named by /date/ to store each campaign. Everybody
has their own organization style, though. Just be sure to come up with a system
and process for archiving, so that each newsletter isn’t a huge chore to publish.
Nowadays, we don’t even bother, because we use MailChimp’s built-in archive
functionality. It’ll save a copy of every campaign you send from our system. You
can build a page on your website called “Newsletter Archives” and paste a little
code snippet from MailChimp. We’ll keep your page updated with all your most
recent campaigns. Saves so much time.
4. An FTP program, like Fetch for the Mac, or CuteFTP for PCs. When you design
your email and slice out all your graphics, you’ll use FTP to move those files from
your computer to the server.
5. A test machine (or two), loaded with as many different email applications and
accounts as possible. You’ll want to check your HTML email designs under lots of
different scenarios. Unlike web design, where you only have to check your work
in a small handful of browsers, there are tons of email applications out there,
and they all handle HTML email differently. If you use MailChimp, you can use
our Inbox Inspector tool and let us do all the testing for you:
http://www.mailchimp.com/add-ons/inboxinspector/

Delivering HTML Email

Many newbies make the mistake of setting up forwarding lists, or “CC’ing” copies of a
message to all their customers. This causes all sorts of problems, like when a customer
hits, “reply to all.” Plus, there’s no way to do any kind of individual tracking or
personalization when they CC: a big group like that. Finally, it just looks so
unprofessional and impersonal when recipients can see your entire list of other
recipients like that. Blech.
That’s why when an email marketing system (like MailChimp) sends your campaign, we
take your message and send it one at a time to each recipient on your list (really, really
fast). Unlike your work computer linked to your local ISP (which probably has a standard
monthly bandwidth limit), email marketing vendors like us use dedicated mail servers
that are capable of sending hundreds of thousands of emails (even millions, for larger
vendors) per hour.
Other factors you should consider when delivering HTML email campaigns:
• If you send from your own server, your ISP may throttle your outgoing emails or
shut your account down, if you send too much too fast (like more than 500 per
hour). They may also shut you down if you exceed your monthly bandwidth limit.
If you’ve ever sent an email campaign to a big list of recipients, and you attached
a giant PDF, this has probably happened to you before.
Email firewalls and ISPs who receive your emails don’t like receiving tons of
emails from one single IP address at once (unless they normally receive tons of
emails from that IP). So if you only send occasional email campaigns from your
IP, you may want to throttle your delivery, or spread them across multiple IPs, to
avoid accidental blocking. Email marketing services usually split your campaign
up into pieces and send it out over lots of different IP addresses.
• If you send emails from your desktop email program, chances are you’re
connecting through your local ISP. If you don’t have a dedicated IP address setup
with your ISP, you’re probably sending emails from a dynamic IP address. ISPs
and spam filters don’t like receiving lots of emails from a dynamic IP address,
because it looks like a hijacked home computer. You should always send from a
dedicated IP address, or use an email marketing vendor (like MailChimp).