Free of charge: A Field Guide to Email Marketing
Unformated preview of the document: 'A Field Guide to Email Marketing' (Part 5):
CSS, or maybe because they're using so much JavaScript and AJAX technology,
stuff just gets buggy. Keep that in mind, and do lots of testing.
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're going to hate yourself after coding
HTML email.
You'll have to rely on old-fashioned <TABLES> 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 touchy 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 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 (which supports CSS just fine) vs. Gmail:
Gmail stripped out virtually all of our CSS. Where did our font sizes and
line height go?
Flash, (and JavaScript, ActiveX, movies, and other stuff that won't work) in
HTML email
You can deliver HTML emails with Flash in them, but most recipients
won't be able to view them. Not unless they're using an email program
that uses a browser to render their HTML email. Most anti-virus applications
block the code used to embed Flash movies, and they block JavaScript,
ActiveX, and even background music files. All that stuff has been
used in the past to spread viruses, so it's commonly blocked now.
The best solution is to point emails to landing pages. If you've got a great
animation or movie to show to your recipients, just send a simple, intriguing
GIF or JPEG graphic in your HTML email, then link it to a landing
page on your website with the animation in it. Same goes for JavaScript,
ActiveX and movie files. Anti-virus applications block them from running.
So fancy rollover or pop-up navigation and streaming videos aren't going to
work either.
Background colors
Remember when we told you about how browser-based email services (like
Yahoo!Mail and Hotmail) strip out your <HTML>, <HEAD>, and <BODY>
tags? That's what you need to remember when coding your background
colors and images. You normally specify that stuff in your <BODY> tag,
but you can't rely on that with HTML email. You'll need to create a big,
100% wide table wrap around your email. Set your background color in
that table, and use some CELLPADDING as needed. If you're into CSS,
you might be tempted to use a <DIV> instead. But we've seen DIVs break
quite frequently in email applications, so we don't recommend them.
7
Anatomy Of A Good HTML
Email Newsletter
Here's what a well-built HTML email newsletter looks like:
1. Your company name in the From field. Recipients should recognize who
the email is from instantly. It can't be deceptive in any way (duh). If a
recipient has to strain his brain to remember who you are, he'll click "This
is spam" instead of opening.
2. A relevant subject line (don't be spammy), with your company or newsletter
name in it. So they instantly know who the email is from, and what
it's about (hence, subject line).
3. The To field of your email should be personalized to the recipient's
name, not their email address. MailChimp lets you merge recipient names
into this field, if you have it in your database. You would insert *|FNAME|*
*|LNAME|*, for example. Check out our merge tag cheatsheet
Unformated preview of the document: 'A Field Guide to Email Marketing': Part 1, Part 2, Part 3, Part 4, Part 5, Part 6, Part 7, Part 8, Part 9, Part 10, Part 11, Part 12, Part 13, Part 14, Part 15, Part 16, Part 17, Part 18, Part 19