Avoiding the Pitfalls of HTML Email Design

If you’ve ever attempted to code up HTML email by hand, you know that it can be a painful task. This blog post provides a better understanding of some of the limitations of HTML email, as well as tips on how you can avoid potential problems . I’ll also point out how Direct Mail’s built-in editor can help makes things easier.

How Email Clients Mangle your Message

When an email client receives your email, the first step it takes is to “clean up” the message to remove (1) potentially harmful content, (2) content that could be used to track the recipient, and, (3) in the case of web-based email clients, content that would cause the email to interfere with other objects on the web page. I’ll address each one of these in detail below.

Harmful Content

Javascript and other HTML elements that are not used to render the email are stripped to prevent untrusted and/or unknown code from being executed when the email is opened. This includes, but is not limited to: <script>, <iframe>, <object>, <embed>, <applet>, and <param> elements. Some email clients will even strip out unrecognized elements just to be safe. If you use Direct Mail to import your message from a web page, it will remove these elements for you by default. If your webpage requires Javascript in order to render or function properly, it will not work (or at least will require some editing in order to work) as the message body of an email.

Normally, email cannot contain embedded video (since it would require the use of the aforementioned untrusted elements). However, Direct Mail provides an easy solution to embed video thumbnails with links right into your message.

Trackable Content

Your HTML email may depend on assets that live outside of your HTML email on a web server. They could be hosted images or stylesheets. Email clients generally break these links and, in the case of images, prompt the user to choose whether they want to display them. This is to prevent your email client from loading web content without your permission, especially since loading web content from an external source is how most email tracking systems gather their data. To make sure your email still looks good even without images loaded, we recommend filling in the ALT attribute for every image. You can do this in Direct Mail by clicking on an image and filling out the “Description” field.

Filling out the Description field will automatically set the ALT attribute on your image.

Interfering Content

Web-based email clients have to account for cases where your CSS selectors conflict with the ones they use to style their site. Some email clients will rip out your styles altogether to avoid problems, but newer web-based email clients work around this problem by prefixing their own selectors with a unique string, thus avoiding a conflict. The best way to avoid problems with styles is to is to inline your CSS. Direct Mail can inline your CSS for you when you send. That way you can keep your markup and CSS separate during the design phase.

An additional concern when designing for web-based email clients is CSS styles related to layout and positioning. Most HTML designers are used to being able to position elements in their designs with properties like: position, display, left, right, top, bottom…but for a web-based client, this could mean your content ends up positioned over the user interface of the email client. To prevent this, most email clients will strip out position-related properties from the email. From the perspective of HTML designing, this provides very severe limitations and is the reason why HTML emails are still largely composed of tables.

The folks over at Campaign Monitor have put together a comprehensive list of which CSS selectors and properties are supported by which clients.

The Final Hurdle: Layout Engines

Every email client employs a layout engine to render your HTML email into a window. Unfortunately, not all layout engines implement HTML standards the same way. Furthermore, different layout engines adopt new standards at different rates, making very difficult to write your code in a one-size-fits-all approach. One result of this is that if you’re editing your email in Direct Mail (which uses the WebKit layout engine), it may look very different when rendered in a Trident-based browser, such as Internet Explorer.

There are 5 layout engines that will  be used to render close to all of your emails:

  • Trident – Internet Explorer – Outlook 2003, Outlook Express
  • Webkit – Safari, Chrome, Apple Mail, iOS Mail, Android Mail, Postbox, Outlook 2011 for Mac, Sparrow, Nokia
  • Gecko – Firefox, Thunderbird, PostBox, SeaMonkey, Eudora
  • Presto – Opera, Nintendo, Opera Mail
  • Microsoft Word – Outlook 2007/2010

If your recipient is reading your email in a web-based client (Gmail, Yahoo! Mail, Hotmail, AOL Mail), then the layout engine will depend on the browser they’re using. In Version 3.2, we’ve added design testing to your tool belt, giving you the ability to preview your message in dozens of clients with just one click. The design test will show you a pixel-accurate screenshot of what your email looks like when viewed on various platforms, as well as how many of your recipients are using that particular client.

The Rise of Mobile

The volume of email being opened on mobile devices has increased dramatically over the past few years. This trend will only continue as more people adopt smartphones and tablet devices.

Your email may look amazing on a desktop, but on a phone it might have too much text crammed together to be easily digested. Make sure that your calls to action are not too small for the reader to engage with.

One great thing about mobile email is that the popular mobile email clients (iPhone, iPad, Android) are much more up-to-date on the latest HTML and CSS standards, and don’t mangle your HTML and CSS nearly as much as their desktop- or web-based counterparts. Note, however, that the above mentioned mangling still applies to web-based email clients viewed on a mobile device (i.e. viewing Gmail on your iPhone). One thing to be aware of is that many mobile devices include a feature that automatically boosts the size of text for readability. If your design does not account for this, you might end up with a broken layout.

All of the templates that come with Direct Mail are mobile-ready and will look great on any device. In addition, we are working on a special set of templates designed exclusively for mobile devices. Look for announcements on that soon!

Conclusion

We hope this post has helped shed some light on what to be aware of when designing your HTML templates. Features in Direct Mail like video thumbnails, CSS inlining, and mobile-ready templates can help you overcome some of these difficulties, and we can’t wait to show you what we’re working on next to make this process even easier. Stay tuned!

Direct Mail Plug-In for Daylite 4

Update: Direct Mail 3.4 now seamlessly integrates with Daylite 4.1! Please see this blog post for more information.

Congratulations to our friends at Marketcircle on the release of Daylite 4, a fantastic customer relationship management application for your Mac (and iOS, too)! Many people have been asking us if our Daylite to Direct Mail plug-in is compatible with Daylite 4. As mentioned on their website, Daylite 4 does not yet officially support plug-ins or connectors, so the answer is no—for now. We are actively working with Marketcircle to bring you an compatible plug-in as soon as they are ready.  Stay tuned!

Direct Mail 3.1.1 Now Available

We’re happy to announce some fresh new bits for you to enjoy. We released the 3.1.1 update for Direct Mail this morning. The release notes have a full run-down of the changes, but here are a couple highlights:

Performance and Bug Fixes

You will find that navigating around your project (changing tabs, selecting groups, history report sections, etc.) is much faster, as is opening project documents. The improvements are particularly noticeable in large projects. In addition, several bugs (including bugs causing crashes) have been fixed.

Swipe to Go Back

Just like swiping to go back or forward between webpages in Safari, you can now use the swipe gesture on your trackpad or mouse to move between sections of the history report:

Demonstration of swipe gesture

This gesture makes it easy to drill down from the Summary section into detailed reports, and then swipe back to the Summary.

How to Upgrade

Upgrading is easy. Just choose Direct Mail > Check for Software Update from the menu bar.

If you downloaded Direct Mail from the Mac App Store, you will have to launch the App Store to update your application.

Using Preview Text to Grab Your Subscriber’s Attention

If you’ve ever found yourself reaching over to turn off the alarm clock while simultaneously picking up your phone to check email, then it will come as no surprise to learn that mobile devices are fast becoming the preferred platform for reading email. Email certification company Return Path revealed last Friday that mobile email consumption is set to surpass desktop consumption by the end of the year. The combination of overflowing inboxes and tiny mobile screens means your email needs to catch the eye of your reader before he or she has even opened it. Luckily, Direct Mail has just the tool you need to grab your reader’s attention: Preview Text.

What is Preview Text?

Preview Text is the two or three line preview of the contents of an email that is displayed in your inbox (usually underneath the subject line). Here’s an example:

Similar previews are shown in Outlook or Apple Mail. These previews work great for showing the content of text-only or conversational emails, but are less useful for newsletters. As you can see in the above example, the preview text is just showing a link to the Web Version and an Unsubscribe link—instead of catching the user’s attention with the meat of our newsletter. Wouldn’t it be great if you could customize that preview text to grab your reader’s attention?

Customizing Preview Text to Grab Your Reader’s Attention

With Direct Mail 3, you’re able to easily customize the content of those two or three preview lines.  Here’s how:

First, make sure you’re in the Messages tab. Then click the “+” next to the subject line. Choose “Preview Text”

Click "+" and choose Preview Text (or choose Message > Add Additional Headers > Preview Text from the menu bar)

A new “Preview Text” header will be added to your message. Pick a headline or sentence from your newsletter that you think will grab your subscriber’s attention and enter it into the text field:

That’s it! Now, when your send your message, your subscribers will see the preview text you wrote, instead of the default (and usually ineffective) text picked out by their email client:

Conclusion

Writing your own preview text is a great way to stand out from the crowd—especially when you’re competing for your reader’s eyeballs on a tiny mobile device. Direct Mail 3 makes it easy for you to choose just how you want to present yourself to your subscribers. Try using Preview Text on your next newsletter and watch open rates improve!

Announcing Stamps for iPhone!

Icon for Stamps for Direct MailDirect Mail is great for designing, sending, and tracking email campaigns on your Mac, but wouldn’t it be great if you could get campaign updates on your iPhone, too? Now, you can! We’re very happy to announce today’s release of our new iOS app called Stamps.

Use Stamps on your iPhone to track the results of any email campaign you send from Direct Mail on your Mac:

Stamps History List
View email open and bounce results at a glance

Direct Mail and Stamps sync automatically, so your campaign data is always up-to-date. The familiar iOS interface makes it easy to dig into the details with just one tap:

History details and charts in Stamps
Get reports on email opens, bounces, clicks, unsubscribes, complaints, and more—right at your fingertips!

What does it cost?

Stamps is free! You’ll need to have signed up for a Direct Mail pricing plan (or be an existing Direct Mail 2 user) to sign in.

How do I get it?

It’s easy, just visit https://directmailmac.com/stamps on your iPhone, or click here to be taken directly to the App Store. Our support site has additional information on Stamps.

Page 16 of 18