A guide on email newsletter design wouldn’t be complete without a section on spam
filters. You have to design your emails a certain way, if you want your messages to make
it past them. But you can’t go overboard, either. Spam filters can smell fear. If you try
too hard, they know it, and they attack. So just be cool, act normal, and don’t make any
obvious mistakes.
How anti-spam systems work
Before getting into the nitty-gritty design tips, you need to know how all the various
anti-spam mechanisms work out there. Once you get an overall understanding of how
they work, designing around them will be much easier.
Bayesian Filtering
This is one of the most important ones to learn about, since it’s installed in so many
email applications these days (like Outlook, Mozilla Thunderbird, and Apple Mail).
Bayesian filters work by watching users classify email as “junk”
(such as when they click a “this is spam” button). It reads the junk
mail, compares it to other emails you called “junk,” and looks for
common traits in the subject line, the content, the hyperlinks, the
sender, etc. Over time, Bayesian filters learn to scan for those “traits”
in every email message you receive. Every time they find something
that looks “spammy,” they assign a “score” to it. For instance, using
“Click here!” might get you 0.7 points. Using bright red fonts might
get you 2 points. Including the word, “mortgage” might get you 1 point, but using the
word, “Viagra” will get you 5 points. Once an email exceeds some threshold (set by the
user), the email is classified as spam, and thrown into the junk folder. It’s amazing how
many different things Bayesian filters look for. To read some, go to the MailChimp Blog
and search for “Funny Spam Assassin Criteria”
MailChimp also comes with a spam filter checker (look for the “Inbox Inspector” under
our Account tab). It’ll tell you exactly what your email’s spam score is, and what you
need to change if you want to improve your chances with spam filters.
Visit http://www.MailChimp.com 28
Black Lists
A while back, some server admins got really, really, angry at all the junk mail they
received. So they started to track the IP addresses of the servers that sent them spam,
and put them on “blacklists.” Anytime they received email from a server on their
blacklist, it was deleted immediately. It worked pretty well. So they started to share their
lists with other server admins. And other admins started to add on to those blacklists.
Pretty soon, the blacklists got very, very big. Large ISPs started to sync up with them. If
you send email that’s very “spammy” you could end up on one of these blacklists
(whether the recipients are opt-in or not). Once you make it on to a blacklist, good luck
getting off. Geeks are notoriously difficult to negotiate with (we know, because we’re
geeks). This is why you need to make sure you only send to recipients who gave you
verifiable permission to email them, and you need to have proof that each one of them
opted in to your list (such as through a double opt-in system). Want to know the easiest
way to get blacklisted? Let your company’s sales team blast out an email newsletter to a
list of “prospects” that they collected from conferences, and that they scraped off of
websites. You’ll get blacklisted, guaranteed.
Email Firewalls
Managing email servers (and incoming spam, viruses, and phishing attacks) can be a lot
of work. So large corporations usually install “email firewalls” (Google the terms,
“Barracuda Firewall” or “Postini” for some examples) to handle their incoming email.
Think of them as “spam filters on top of spam filters.” They’re big, heavy-duty
gatekeepers, and they’re not friendly at all.
They often use a combination of Bayesian-style/adaptive filters, community reporting,
blackhole lists, and a little bit of proprietary “magic pixie dust” to keep spam out of the
company. Most of the time, when your email’s not getting through to a larger company,
it’s their firewall. You can think of these firewalls as kind of Xenophobic and paranoid.
They’re all twitchy, and tend to ask questions like, “Okay, is this sender new to me? Why
is he sending copies of the same, exact email, to a bunch of people in our company?
Spammers do that kinda stuff. Hmm, how long has their server been around? Can I
really trust this sender?” Spam firewalls are usually only a problem when you first start
sending campaigns to a big client or something. You’ll experience some deliverability
issues in the beginning, because you’re “new.” They’ll eventually “learn” to let you
Visit http://www.MailChimp.com 29
through. To expedite things, you may have to ask the IT people in charge of the firewall
to “white list” your IP Addresses (or the IP address of your email service provider).
If you’re interested in learning more about email firewalls, search for “email firewalls” at
the MailChimp blog:
Challenge/Response Filters.
These are more common among “at-home” recipients (because they’re too intrusive to
use at work). When you send email to someone with a challenge/response filter, here’s
what happens. If you are not already in that person’s “buddy list” or “address book,” then
you’re considered a stranger to him. And if you’re a stranger, you could be a spammer. So their
challenge/response filter sends you an automatic reply with a question that you have to answer,
or some link you have to click (this is to prove you’re a human,and not a spambot). The screenshot you see to the right is an example of a typical challenge/response reply, from Spamarrest, a very popular vendor.
The thing to remember here is that you have to be “white listed” if you want your emails
to get through. So when people fill out your opt-in forms on your website, ask them to
“please add our email address to your address book…” Use your opt-in process as a way
to “set expectations” and get “whitelisted” up front. Whenever you send a newsletter,
make sure the “reply-to” address that you use is valid, and that a human checks it after
each campaign. You can expect to receive a couple auto-replies like this after every
campaign you send. Whenever we send our MailChimp Monkeywrench newsletter, we get
about half a dozen of these autoreplies. I have to manually click each one of them if I
want the email to get delivered.

An email should never be a final destination. It should merely be a pit-stop on the email marketing highway where readers can hop on and off of the freeway at their convenience, but still have a way to arrive at the ultimate ending point (your website) at any time.

The best way to get subscribers from Point A to Point B is to use calls to action that guide and encourage click-throughs. Over 30 percent of email marketers recently surveyed by AWeber agree: words like “click here,” “read more,” and “buy now” make it clear that you want subscribers to do something else after reading your message and increase conversion rates significantly.

The problem is that most email marketing messages include multiple calls to action that lead to the same page. How can you know which one is most effective when click tracking only reports the number of clicks per domain?

Track Clicks to the Same Page in a New Way

To find out which of the duplicate links perform best in your messages, you simply have to use “tags” to make the links slightly different without affecting their functionality.

Once the different links are clicked, you can easily view the totals for the different links in your message statistics, which can help when you’re creating future messages and wondering where you should place really important links.

A Practical Example: Tea Collection

Take for example this email from Tea Collection, a clothing site for kids.

There are multiple navigation links in the header, body and footer of this message that lead back to the same product pages on Tea Collection’s website.

If we were tracking which particular links performed best in this email, we would tag each of the links with a certain identifying code or phrase when adding them to the message.

If your email subscriptions are anything like mine (as a fellow interactive marketer, I assume they might be), it seems like every other article that hits my inbox lately contains another new stat or case study regarding mobile. Whether we’re talking about the mobile web, mobile apps, mobile email, or mobile sites, the “M-word” is everywhere.

As more research regarding both the sales and usage of mobile devices — specifically smartphones — becomes available, many marketers are asking, “How should I be optimizing my email for mobile devices?” There are several strategies available that range from “ignore it” all the way to the creation of elaborate solutions to deliver device-specific content to mobile users. But how do you know which is right for you and, more importantly, your subscribers?

Know your audience
This is no doubt advice you’ve heard it before: Relevancy is the new king in interactive marketing (although content still counts too). Relevancy doesn’t end with the type of content you deliver; it can also extend to how that content is delivered. This cannot be stressed enough when it comes to mobile email. If you don’t have data stating that you have a sizable number of subscribers viewing your emails on their mobile devices, the effort to modify your design or create a mobile version might not pay off.

How do you know if you have a mobile audience?
This is easier than you might imagine. Litmus, an online provider of email rendering and preview services, also offers an email analytics option. After you insert its campaign-specific tracking code in your email and send it, the tool collects information on which email clients (Gmail, Yahoo, Outlook, etc.) and mobile devices (iPhone, Blackberry, Android, etc.) your subscribers are using to open the email. (One important note: Email client data is only collected for opens — meaning that only those subscribers who enable images on your email are counted. This might sway your numbers slightly in favor of those email clients that enable images automatically.)

You might also be able to use web analytics data to find out how many users are viewing your website with a mobile device. You’re still left making some assumptions, but having a hunch is better than not having a clue.

Creating a mobile email solution
Now that you have the data, what can (or should) you do with them? Each marketer’s mobile audience is going to vary in size (how many users are viewing on mobile devices) and complexity (how many different types of mobile devices are in use). In our testing with clients, we’ve found that the number of customers reading email on mobile devices varies dramatically, sometimes even between audience segments. You should determine where your thresholds are for balancing user experience with ROI. Will you optimize for mobile when 2 percent of your opens are generated by mobile devices or wait until mobile views hit 20 percent?

Also keep in mind that some devices are more adept at handling HTML email. Apple, Android, and Palm devices generally display HTML emails intact, making any needed optimization minimal. Despite increased sales of alternative operating systems, some reports have suggested that usage of these HTML-friendly devices for the consumption of mobile email and web is higher simply due to their ease of use.

Creating a “view on a mobile device” link
The simplest way to create a mobile-friendly version is to include a “view on a mobile device” link at the top of your email in the preheader area. This is usually accomplished by taking a simple text file (in fact, the text part of your multi-part MIME message might work just fine), adding basic HTML line and paragraph breaks, and hosting it as an HTML file that links from the preheader text. Most, if not all, smartphones on the market today should be able to handle the display of this simplified version of your message. If you’re feeling ambitious, you could opt to include an image or two, but the key here is simplicity. Limit any extras and keep the format to one column.

Using a mobile stylesheet
@media is a CSS3 rule some web developers are using to enable mobile sites. This rule can be used to tell the mobile browser to display the site using a special set of rules that allow for a mobile-specific experience. Similar functionality is possible in email by telling the rule to display a mobile-oriented set of styles if the device screen is below a certain size. The method isn’t bulletproof and requires special planning, but it’s an exciting development for forward-thinking or mobile-heavy audiences.

Maintain a tracking trail
If you choose to create mobile versions of your message, don’t forget to maintain a tracking trail to continue to gather valuable data about the habits of your mobile audience. Your web analytics suite, hosting provider, or email service provider should have the capability to track basic metrics — and it’s even better if you can tie the data back to specific subscribers.

The final word
Still not sure where to start? Don’t worry too much — you’re not light years behind the masses. If nothing else, start to learn how — of even if — your customers are using mobile email. All those reports of rising sales and increased usage of smartphones will likely continue to flood your inbox, but taking the time to understand the nuances of your particular audience might reveal that you don’t need to worry about optimizing for mobile devices — at least not yet.

As we move into the last month of the year, let’s take a quick look at how you can improve your email newsletters and appeals in 2011.

Consider the following email pitfalls. Which of these is your nonprofit guilty of committing?

1. You don’t track the results of your emails. How will you know what your audience respond to and what they dislike? How do you know if any of your emails are getting delivered? There are many low cost online tools that can help you track email results.
2. You don’t review the results of your emails. If you do track your email results, make sure you take a look at these after each and every email send. Are your audiences still opening your emails? How many people are unsubscribing as a result of each send?
3. You don’t target and segment your emails. Everyone in your audience receives the same email. This means that you can’t personalise emails, nor target your messages based on audience segment, which means that what you’re sending out is likely engaging no-one.
4. Your email is written like a letter. Direct mail and email are different genres. You need to sharpen your typing fingers and focus on subheadings and bullet points in order to make your emails easy to skim. You should also be aiming to keep the email content under 300 words, and to ensure that your main content is above the page break.
5. You fall in love with your own images. Images can be fantastic emotional drivers if they are relevant to your message. If they are not relevant, they all too often detract from the message that you are trying to convey. Don’t be afraid to experiment with limited images in your emails.
6. You don’t use alt tags in conjunction with your images. Many email programmes disable images by default, which means that your audiences will not see the images that you have spent a lot of time selecting and incorporating into your message. Enable alt tags behind each image, so that your audiences still receive your core message.
7. You don’t vary or consider your subject lines. Sending an e-newsletter out with the same subject line each time is guaranteed to make your readers yawn. Write your subject line before your message, as if your audiences don’t even open your email, they wont’ get to see the body text that you spent hours creating and refining.
8. Your call to action is at the bottom of the email. At least one call to action should be above the page fold to prompt action, and this should be echoed in the middle and bottom of your email as well. Consider making each image a call to action, and incorporating a call to action in your subject line.
9. You don’t clean up your email bounces. Repeatedly sending email to deactivated or nonexistent email accounts will get you marked as Spam, and your emails will eventually stop being delivered. Ensure that you have a programme in place to contact constituents with bounced email accounts. Could you send them an SMS to prompt them to update their details?
10. You send your audiences an email every day of the week. The frequency and relevancy of your message is key to achieving engagement and conversions by email. Aim to email your audiences no more than once a week, and no less than once a month. This way, you won’t appear to be Spam, and nor will your constituents forget about you.

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.
Free HTML Email Templates:
If all this talk of designing and coding HTML is too nerdy for you, consider
using MailChimp’s built-in HTML email templates. They’re super flexible,
and can be customized to match any brand. Plus, they’ve already been
tested in all the major email programs. See some nice examples of what
our customers have done:

http://www.mailchimp.com/screenshots/template_examples/

and watch a demo movie of our template design tool:
Visit http://www.MailChimp.com 10
3.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/

You’ve probably heard the advice, ‘Keep your email campaign short and sweet’, often followed by, ‘… because no-one’s going to read loads of copy, anyway’.

As much as this seems like commonsense, we’ve all seen clients attempt to cram in as much information as possible, oblivious to reason. I believe this is largely due to another school of thought, which goes along the lines of, “My subscribers have signed up because they obviously want to read all about my brand values and 5 year plan.” With a lack of hard evidence to the contrary on hand, this can be an frustrating argument to dismiss.

See no email…

I was skimming through Jakob Nielsen’s research recently and came across a little gem in the form of an eyetracking heatmap. Based on data collected from recipients of an email newsletter, it denotes the areas where they looked the most in red and the least in blue:

From: ‘Email Newsletters: Surviving Inbox Congestion‘ – Jakob Nielsen’s Alertbox, June 12, 2006

Note the emphasis on reading the first two words of the headlines, followed by diminishing interest in the body copy. As the email extends downward, interest in the content rapidly drops off.

If this doesn’t prove how fickle the average subscriber is, then there’s more. Based on this research, Jakob observed that:

“…the average time allocated to a newsletter after opening it was only 51 seconds. “Reading” is not even the right word, since participants fully read only 19% of newsletters. The predominant user behavior was scanning. Often, users didn’t even scan the entire newsletter: 35% of the time, participants only skimmed a small part of the newsletter or glanced at the content.”

Ouch. Just when you thought you could get away with adding at least a tiny introduction to your newsletter, Jacob throws in the following salvo:

“People were highly inclined to skip the introductory blah-blah text in newsletters. Although this text was only three lines long on average, our eyetracking recordings revealed that 67% of users had zero fixations within newsletter introductions.”

It looks like we’ll be keeping our emails to the point this season, hey?

What can we learn from this?

You’re probably speed-reading this blog post, so we’ll get to the good stuff. Here are a couple of tips for getting the important bits of your email read:

• Keep it short – Interest in the content of an email diminishes as the email extends below the fold (as backed up by this study), so cut the copy and keep the most important points of the message near the top.
• Optimize your headlines – As the first two words of a headline are the most important, keep them informational. For example, a headline like “3 tips for improving email usability and response rates” could be rephrased as, “Email usability: 3 tips for improving your response rates”.
• Get to the point – Most readers will skip any long-winded greetings or introductory text, so decide if it’s worth including. If an introduction is necessary, avoid adding any important information to this section.
• Focus the message – Where possible, avoid covering too many topics and keep the message simple. You’re only going to have the readers attention for a few seconds, so make it count by using a standout call-to-action.
• Make it scan-friendly – Limit body copy to easily-readable paragraphs, preferably under 60 characters in width. Selectively use images to reinforce your message, as images often take less time to understand than words.
• Align to the left – Notice how little attention the right-hand column of the email above is getting? That’s because readers of left-to-right languages (like English) are accustomed to scanning from the top-left first. Keep this in mind when designing two- or more column layouts.

Have you ever noticed the small spacing below images in Hotmail and Gmail? Every browser renders this spacing except for IE 7 and lower. Just after writing this blog post: The Mystery of Hotmail’s Strange Image Spacing, and after lots of hair pulling, we realized that the culprit for this pesky occurrence was actually the DOCTYPE.

What I find even more interesting is that the latest DOCTYPE for HTML 5 causes the same image spacing issues! Because of this we might see browsers like Firefox, Safari, Chrome and Opera come out with an update in the near future. Until then, welcome to the party web developers.

The following DOCTYPES cause the spacing:

Examples before any fixes:

Below are some options for correcting the issue.

Option 1.) Add style=”display:block” to your image

Example:

<img src=”http://www.test.com/test.jpg” style=”display:block”>

This is the most popular fix but as you can see above, it causes a line break before and after your image. If you are working on an HTML email, this fix must be done inline for each image (like the example above) because Gmail does not support embedded or linked style sheets.

Options 2-8.) If your image height is greater than 16px, set the “align” attribute in the image to any of the following: absmiddle, middle, left, right, absbottom, texttop OR top

Example:

<img src=”http://www.test.com/test.jpg” align=”absbottom”>

Note: align=”baseline” and align=”bottom” do not work. Keep reading if your image height is less than 16px.

Option 9.) Place the image in a block element with a style=”line-height:10px” (or lower)

Example:

<div style=”line-height:10px”>
<img src=”http://www.test.com/test.jpg”>
</div>

Option 10.) Place the image in a block element with a style=”font-size:2px” (or lower)

Example:

<div style=”font-size:2px”>
<img src=”http://www.test.com/test.jpg”>
</div>

Obviously, this is only an option if you don’t have any text in the container.

Option 11 & 12.) Add style=”float:left” OR style=”float:right”

Example:

<img src=”http://www.test.com/test.jpg” style=”float:left”>

Both Gmail and Hotmail support the float property. Again, if you are working on an HTML email, this fix must be done inline for each image because Gmail does not support embedded or linked style sheets.

If your image is less than 16 pixels high:

Only seven of the above fixes will work:

1. Add style=”display:block” to the image
2. Add align=”left” to the image
3. Add align=”right” to the image
4. Add style=”float:left” to the image
5. Add style=”float:right” to the image
6. Place the image in a block element with a style=”line-height:10px” or equal to the image height
7. Place the image in a block element with a style=”font-size:2px” (or lower)

Hopefully at least one of these work-a-rounds will meet your design requirements. If you are aware of additional fixes, don’t hesitate to share it below!

Outlook 2007 borders and 1px padding on table cells!

On February 29, 2012 in Email Newsletter Design Guidance, by mansi

Today I came across a bug that left me fuming. I could not figure out why every single cell in my table heavy layout had a 1px padding around it and in some cases I was even missing my table borders. For those of you working in the sane world of web design, tables are a thing of the past, but in the world of email, tables are back with a vengeance.

As I became more and more disillusioned I started trying anything and stumbled across the fix. I knew I had to share this, so if you are experiencing any of the above, here is the fix and it’s a simple one.

Here’s an example of what a two cell table with an image and text would look like before the fix. Notice the 1px white border/padding around the table.

And here is how it’s supposed to look after the fix. No white border / padding.

And the fix?

table td {
    border-collapse: collapse;
}

I don’t think I’ve ever even used this css before, but once I started grasping at straws I began to fiddle around with the CSS border attributes and tried it. I’ve never seen any browser or mail client except Outlook 2007 do this to table cells.

Here’s the full HTML from the example, and thank you Microsoft, for delivering the worst email rendering experience yet, we all thought Hotmail was bad, but you really stepped up to the plate!

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Outlook 2007 Test</title>
  <style media="all" type="text/css">
  table td {
    border-collapse: collapse;
  }
  </style>
  </head>
<body>
  <table width="200" border="0" cellspacing="0" cellpadding="0" style="border:solid 1px #48463b;">
  <tr>
  <td width="80"><img src="http://yourserver/graphic.gif" width="80" height="40" alt="graphic"></td>
  <td width="120" style="background-color:#c1beb1; color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:11px;">Another column<br>
  plain text.</td>
  </tr>
  </table>
</body>
</html>

Email design Guidelines

On February 29, 2012 in Email Newsletter Design Guidance, by jayendra

Use tables for layout

Because clients like Gmail and Outlook 2007 have poor support for float, margin and padding, you’ll need to use tables as the framework of your email. While nested tables are widely supported, consistent treatment of width, margin and padding within table cells is not. For the best results, keep the following in mind when coding your table structure.

Set the width in each cell, not the table

When you combine table widths, td widths, td padding and CSS padding into an email, the final result is different in almost every email client. The most reliable way to set the width of your table is to set a width for each cell, not for the table itself.

<table cellspacing="0" cellpadding="10" border="0"> <tr> <td width="80"></td> <td width="280"></td> </tr> </table>

Never assume that if you don’t specify a cell width the email client will figure it out. It won’t. Also avoid using percentage based widths. Clients like Outlook 2007 don’t respect them, especially for nested tables. Stick to pixels. If you want to add padding to each cell, use either the cellpadding attribute of the table or CSS padding for each cell, but never combine the two.

Err toward nesting

Table nesting is far more reliable than setting left and right margins or padding for table cells. If you can achieve the same effect by table nesting, that will always give you the best result across the buggier email clients.

Use a container table for body background colors

Many email clients ignore background colors specified in your CSS or the <body> tag. To work around this, wrap your entire email with a 100% width table and give that a background color.

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td bgcolor=”#000000”> Your email code goes here. </td> </tr> </table>

You can use the same approach for background images too. Just remember that some email clients don’t support them, so always provide a fallback color.

Avoid unnecessary whitespace in table cells

Where possible, avoid whitespace between your <td> tags. Some email clients (ahem, Yahoo! and Hotmail) can add additional padding above or below the cell contents in some scenarios, breaking your design for no apparent reason.

CSS and general font formatting

While some email designers do their best to avoid CSS altogether and rely on the dreaded <font> tag, the truth is many CSS properties are well supported by most email clients. See this comprehensive list of CSS support across the major clients for a good idea of the safe properties and those that should be avoided.

Always move your CSS inline

Gmail is the culprit for this one. By stripping the CSS from the <head> and <body> of any email, we’re left with no choice but to move all CSS inline. The good news is this is something you can almost completely automate. Free services like Premailer will move all CSS inline with the click of a button. I recommend leaving this step to the end of your build process so you can utilize all the benefits of CSS.

Avoid shorthand for fonts and hex notation

A number of email clients reject CSS shorthand for the font property. For example, never set your font styles like this.

p { font:bold 1em/1.2em georgia,times,serif; }

Instead, declare the properties individually like this.

p {
   font-weight: bold;
   font-size: 1em;
   line-height: 1.2em;
   font-family: georgia,times,serif;
}

While we’re on the topic of fonts, I recently tested every conceivable variation of @font-face across the major email clients. The results were dismal, so unfortunately it’s web-safe fonts in email for the foreseeable future.

When declaring the color property in your CSS, some email clients don’t support shorthand hexadecimal colors like color:#f60; instead of color:#ff6600;. Stick to the longhand approach for the best results.

Paragraphs

Just like table cell spacing, paragraph spacing can be tricky to get a consistent result across the board. I’ve seen many designers revert to using double <br /> or DIVs with inline CSS margins to work around these shortfalls, but recent testing showed that paragraph support is now reliable enough to use in most cases (there was a time when Yahoo! didn’t support the paragraph tag at all).

The best approach is to set the margin inline via CSS for every paragraph in your email, like so:

p { margin: 0 0 1.6em 0; }

Again, do this via CSS in the head when building your email, then use Premailer to bring it inline for each paragraph later.

If part of your design is height-sensitive and calls for pixel perfection, I recommend avoiding paragraphs altogether and setting the text formatting inline in the table cell. You might need to use table nesting or cellpadding / CSS to get the desired result. Here’s an example:

<td width="200" style="font-weight:bold; font-size:1em; line-height:1.2em; font-family:georgia,'times',serif;">your height sensitive text</td>

Links

Some email clients will overwrite your link colors with their defaults, and you can avoid this by taking two steps. First, set a default color for each link inline like so:

<a href="http://somesite.com/" style="color:#ff00ff">this is a link</a>

Next, add a redundant span inside the a tag.

<a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>

To some this may be overkill, but if link color is important to your design then a superfluous span is the best way to achieve consistency.

Images in HTML emails

The most important thing to remember about images in email is that they won’t be visible by default for many subscribers. If you start your design with that assumption, it forces you to keep things simple and ensure no important content is suppressed by image blocking.

With this in mind, here are the essentials to remember when using images in HTML email:

Avoid spacer images

While the combination of spacer images and nested tables was popular on the web ten years ago, image blocking in many email clients has ruled it out as a reliable technique today. Most clients replace images with an empty placeholder in the same dimensions, others strip the image altogether. Given image blocking is on by default in most email clients, this can lead to a poor first impression for many of your subscribers. Stick to fixed cell widths to keep your formatting in place with or without images.

Always include the dimensions of your image

If you forget to set the dimensions for each image, a number of clients will invent their own sizes when images are blocked and break your layout. Also, ensure that any images are correctly sized before adding them to your email. Some email clients will ignore the dimensions specified in code and rely on the true dimensions of your image.

Avoid PNGs

Lotus Notes 6 and 7 don’t support 8-bit or 24-bit PNG images, so stick with the GIF or JPG formats for all images, even if it means some additional file size.

Provide fallback colors for background images

Outlook 2007 has no support for background images (aside from this hack to get full page background images working). If you want to use a background image in your design, always provide a background color the email client can fall back on. This solves both the image blocking and Outlook 2007 problem simultaneously.

Don’t forget alt text

Lack of standards support means email clients have long destroyed the chances of a semantic and accessible HTML email. Even still, providing alt text is important from an image blocking perspective. Even with images suppressed by default, many email clients will display the provided alt text instead. Just remember that some email clients like Outlook 2007, Hotmail and Apple Mail don’t support alt text at all when images are blocked.

Use the display hack for Hotmail

For some inexplicable reason, Windows Live Hotmail adds a few pixels of additional padding below images. A workaround is to set the display property like so.

img {display:block;}

This removes the padding in Hotmail and still gives you the predicable result in other email clients.

Don’t use floats

Both Outlook 2007 and earlier versions of Notes offer no support for the float property. Instead, use the align attribute of the img tag to float images in your email.

<img src="image.jpg" align="right">

If you’re seeing strange image behavior in Yahoo! Mail, adding align=“top” to your images can often solve this problem.

Video in email

With no support for JavaScript or the object tag, video in email (if you can call it that) has long been limited to animated gifs. However, some recent research I did into the HTML5 video tag in email showed some promising results.

Turns out HTML5 video does work in many email clients right now, including Apple Mail, Entourage 2008, MobileMe and the iPhone. The real benefit of this approach is that if the video isn’t supported, you can provide reliable fallback content such as an animated GIF or a clickable image linking to the video in the browser.

Of course, the question of whether you should add video to email is another issue altogether. If you lean toward the “yes” side check out the technique with code samples.

What about mobile email?

The mobile email landscape was a huge mess until recently. With the advent of the iPhone, Android and big improvements from Palm and RIM, it’s becoming less important to think of mobile as a different email platform altogether.

That said, there are a few key pointers to keep in mind when coding your emails to get a decent result for your more mobile subscribers.

Keep the width less than 600 pixels

Because of email client preview panes, this rule was important long before mobile email clients came of age. In truth, the iPhone and Pre have a viewport of 320 pixels, the Droid 480 pixels and the Blackberry models hover around 360 pixels. Sticking to a maximum of 600 pixels wide ensures your design should still be readable when scaled down for each device. This width also gives good results in desktop and web-based preview panes.

Be aware of automatic text resizing

In what is almost always a good feature, email clients using webkit (such as the iPhone, Pre and Android) can automatically adjust font sizes to increase readability. If testing shows this feature is doing more harm than good to your design, you can always disable it with the following CSS rule

Image Blocking in email clients

On February 29, 2012 in Email marketing, by jayendra

Default email client settings

Every client has its own default settings regarding displaying/hiding images. And while most email clients have a setting to turn images on or off, some offer conditional settings which are contingent upon known senders or other factors. The following table outlines the default settings of popular desktop- and webmail-clients. (Note that We are using the settings of our own versions of each client and that settings may differ from one version to another).

We have included contextually-relevant references to ALT attributes as part of this article. For a more in-depth look at how ALT attributes render in popular email clients, see our ALT attributes research.

Desktop clients	Images displayed by default	Images disp. for trusted senders	Renders ALT Text
Outlook 2007
Outlook 2003
Outlook for Mac 2011
Outlook Express
Windows Live Hotmail
Apple Mail
Thunderbird
AOL Desktop
Lotus Notes
Webmail clients	Images displayed by default	Images disp. for trusted senders	Renders ALT Text
Hotmail
Yahoo! Mail Beta
Gmail
AOL Webmail
Mobile clients	Images displayed by default	Images disp. for trusted senders	Renders ALT Text
iPhone/iPad
Android default
Android Gmail
Windows Mobile 7
Blackberry OS6

So now that we’ve covered the settings in popular email clients, let’s outline how we can help our emails survive image blocking.

Recommendations for Successful Deployment

From a designers perspective, an email is successful when it meets the following goals:

• Retains visual integrity in the most commonly used email clients with images enabled.
• Retains readability in the most commonly used email clients with images disabled.
• Is readable to people with visual disabilities and navigable to people with mobility disabilities.
• Is low in weight for recipients using mobile devices and dial-up connections.
• Is deployed to a permission-based list of subscribers.
• Meets CAN-SPAM Act requirements.
• Legitimately passes common tests employed by spam filters.

Looking at this list it becomes clear just how important it is to consider image blocking when designing/developing an email. Dependency on images can lead to failures on many different levels. Preparing for a scenario in which images are disabled puts us at an advantage to oblige the settings/preferences of a broader range of recipients.

Become a “Known Sender”

Nearly every email client in my test suite enables people to automatically display images when a message is from a “known sender” (senders appearing in white lists, contact lists or address books). Because our subscribers have requested to receive emails from us, they will naturally want to ensure they receive the messages. Spam filters can disrupt legitimate communication when subscribers are unaware of how they function. With a couple, simple notifications we can increase our chances of success:

1. Ask a subscriber to add the email-list address to their address book (right on the subscribe form) and briefly explain why.
2. Enable a double opt-in subscription process, and send a plain-text confirmation which includes a request to add the email-list address to a recipient’s address book. And, again, briefly explain why.

Informing a subscriber about this simple step will increase our chances of images being enabled and will help us legitimately pass through spam filters.

Prepare for Disabled Images

So we’ve created a structurally-sound template, we’re preparing to send our email to a permission-based list of subscribers and we’ve taken steps to see our list email-address into the address books of the said subscribers. There are still a number of people on our lists who will intentionally block images, and therefore we should account for that scenario.

I wrote an article outlining a technique for this very purpose. With the releases of Yahoo Mail Beta and Windows Live Mail we lose the ability to integrate the aforementioned technique. However, Ryan Kennedy from the Yahoo Mail team has pointed out that they are looking into potential resolutions for this obstacle.

Positioning aside, there are some things we can do to retain the integrity of our emails when images are disabled:

1. Begin an email with HTML text or logical ALT text. We can decide what a reader sees in a preview pane or small message-window. If we’re prepared, we can optimize the experience of scanning messages. Moreover, some applications offer the ability to preview the first few lines of text before an email is loaded/viewed.
2. Use ALT attributes. This seems so obvious, but we don’t have enough fingers and toes to count the email newsletters we see without them, so there it is.
3. Use captions for contextually-important images. In lieu of proper support for ALT attributes across the board, we can add captions to images which are vitally important to the content of an email.

Avoid Image-Based Emails

Again, this is something which should seem obvious. But image-based emails are often practiced as a simple, easy method of delivering a pretty design irrespective of the rendering circus among the array of common email-clients. When we ponder image blocking as part of the rendering equation, it’s easy to see how an image-based email could be completely destroyed with a single preference. Furthermore, this doesn’t take into consideration file sizes for mobile/dial-up recipients, accessibility for those visually impaired or the HTML-to-text ratio that popular spam filters apply with their algorithms.

In summary, we should be giving serious consideration to image-blocking and what we can do about it. It’s natural and reasonable why people disable them, but with the right approach we can improve the experience for our subscribers.

« Previous Entries

Categories

• Email marketing
• Email Newsletter Design Guidance
• Home Health Softwares

Joomla SEO by AceSEF