As you might have heard by now, today marks the release of Apple’s latest and greatest Mac operating system: OS X 10.8 Mountain Lion. We thought we’d add to the excitement today by launching a feature-packed update to Direct Mail that we think you’re going to love (oh, and it’s ready for Mountain Lion, too)! The release notes hold the details, but we wanted to highlight two features that we’re particularly excited about: Design Testing, and brand new Retina graphics.
Direct Mail comes with a wide variety of templates that you can use to build your newsletters and announcements. We’ve tested these templates to make sure they look great in all of the popular email clients. However, if you have your own designs, or if you want to see how your modifications look in all the popular email clients, we have a great new solution for you: Design Tests.
Design Tests show you what your email looks like when viewed on a variety of popular email clients, including Windows, web, and mobile email apps. Use Design Tests to easily track down design problems, or optimize the length or style of your newsletter for the email clients that are popular with your subscribers.
To use Design Tests, choose Message > Design Test from the menu bar, or click the Design Test button in the toolbar.
If you’re lucky enough to own one of the new MacBook Pros with Retina display, then you will love how Direct Mail looks on your screen. As Apple rolls out the Retina display to more Macs, Direct Mail will be ready!
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.
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.
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
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!
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!
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!
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:
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.
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”
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:
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!