Campaign and design tips

Here's a short guide that covers some good design tips to keep in mind when constructing a HTML email that is readable and accessible.

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:

  • Ask a subscriber to add the email-list address to their address book (right on the subscribe form) and briefly explain why.
  • 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.

Image handling and blocking in email clients

Many people, either by email client defaults or personal preference, are blocking images in the HTML-formatted messages they are accepting.

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.

Important: alt attributes in email

Many email clients don't display images by default, so it's important to include them when constructing your newsletter - you could end up with just a bunch of grey or blank "blobs" when previewing your newsletter, and without any alt descriptors, no idea what those "blobs" may be representing. Designing an email with no text and relying on all graphics, for example, (worse, combined with no ALT tags for your images) results in unreadable and inaccessible email and will alienate your users.

Email width - how wide should my newsletter be?

You've probably noticed that the majority of email newsletters you receive these days are designed with a fixed width as opposed to a fluid layout.

This is because the majority of email clients and web-based email providers don't use the full width of your screen to display an email message. Whether it's advertising on Gmail, a menu in Hotmail or your Inbox in Outlook, a chunk of screen real estate is often already being used. Because of this, it's a good idea to keep your emails to a fixed width of no more than around 600 pixels. This should ensure that in the majority of cases, your subscribers can view your email as you intended.

Video in Email

Generally speaking, the news is not good here. The problem is the <image> tag is not supported. Animated GIFs are supported, but as we know, this is very old technology and has it's own drawbacks - mainly file weight. There are workarounds and other ways of presenting video and form contact in emails - we can assist with this.

Using Flash in email

Flash was built for the browser, and based on almost zero acceptance in emails, that's where it should stay.

Using forms in email

Not the best idea. Again, support for this is patchy. Given the sporadic support for forms in emails, we recommend linking to a form on a website rather than embedding it in the email. This is the safest, most reliable solution to pairing an email message with a form. More people will see it and be able to use it, and as a result participation will increase.

Essentials

  • Don't waste your readers' time — An email inbox is a busy place, you won't get much attention.
  • Meet your legal obligations — For example, CAN-SPAM for US senders.
  • Permission matters — Not only do you need to have permission to email people, but it helps to remind them of how they gave you permission, as specifically as you can.
  • Relevance trumps permission — Just having permission is not enough, the content you are sending must also be relevant.
  • Make unsubscribing easy — There's no point emailing people who are not interested.
  • Image blocking is common — You can't rely on people actually seeing your images.
  • Bring back tables — Structural tables are still often necessary for creating columns.
  • Add inline styles — Lotus Notes and Gmail removes anything else.
  • Don't forget your plain text version — You can make blocks of text more readable.
  • Test, test, test — It's the only way to be confident about your design working.