A company which makes Product Management software asked us to help them re-design their email template. Their old template felt to them like it wasn’t organized well with several separate, disparate sections. It also didn’t follow mobile aware and mobile responsive email marketing best practices. We wanted to modify the template to do the following.

1. Show off their clean brand identity.
2. Make sure the imagery would appeal to their target audience.
3. Re-design the template to be more compatible with desktop and mobile viewing.
4. And, simplify the design to bring the reader down through the email.

Making the New Template Compatible with Multiple Email Browsers

Designing an email is much more complicated than designing a web page if you’re trying to make it effective on as many email browsers as possible. With a web page you only need to worry about five major internet browsers. For emails you have to worry about the display on over 13 email browsers.

This is the first thing we wanted our client to remember

In the desire to have a mobile aware and mobile responsive email, you should not forget about optimizing for desktop browsers. Especially if you’re mailing to B2B prospects like they were. Emails viewed on smartphones experience significantly less conversions than emails viewed on the desktop. We theorize that folks skim emails on mobile and actually read the emails on desktop. Therefore, they may be induced to click or buy when they read the value proposition more thoroughly.

Here’s the second thing to remember

Some desktop browsers block images by default. Including Outlook, web viewers such as Yahoo!, and mobile viewers such as Android. So if your email has multiple images in it and the recipient hasn’t manually downloaded them, they will not be seen. There will be white boxes with alt tags replacing images, just like the email example below. We don’t feel an email can be effective if the offer is obscured mostly in white boxes. Further, after optimizing client email for all browsers, including Outlook, removing and/or repositioning images, they’ve consistently seen a 1-3% increase in click through.

Should I Optimize for Outlook?

Some may wonder if Outlook is that prevalent any more. It has certainly seen a falloff in the percentage of email viewers since the introduction of smartphones. However, Outlook still has around 8% of all email views and a significant percentage of B2B viewers reading their emails on their desktops at work.

According to Litmus, the list below shows the top ten email clients. Apple iPhone, Gmail, and Apple iPad hold the top three spots. However, Outlook, Outlook.com, Yahoo!, and Android devices (all which block images by default) is 21.3% of all email readership . You certainly should want to optimize your emails for that high a percentage of email viewers!

1. Apple iPhone: 33.0%
2. Gmail: 15.8%
3. Apple iPad: 11.6%
4. Android: 10.3%
5. Apple Mail: 7.6%
6. Outlook: 6.7%
7. Yahoo! Mail: 3.0%
8. Outlook.com: 2.1%
9. Windows Live Mail: 1.3%
10. Thunderbird: 0.7%

Making the New Mobile Aware and Mobile Responsive Email Template

Our client was concerned about making their emails look good on mobile. The reason: the high percentage of emails viewed on smartphones today, per the chart above. There are two methods for making emails mobile optimized: Mobile Aware and Responsive Design.

Mobile Aware is when you make simple improvements in the design to make sure it renders well on mobile. This means starting off with a narrower email, larger text, and larger buttons so that when they shrink down to a smartphone, the screen still looks good.

Mobile Responsive Email Design is when you deliver a customized mobile experience with special design and code using media queries. Beware, not all mobile email browsers support media queries, as the chart below shows.

Source: Loren McDonald, “Email is Your Largest Mobile Channel”, IBM Marketing Cloud 

Mobile Aware and Mobile Responsive Email Design for Pardot

For our Product Management client, we wanted to make the email template as easy for multiple worldwide marketing managers to use in their Pardot system (part of the Salesforce Marketing Cloud) as possible. This meant weighing the tradeoffs of the simplicity of Mobile Aware design versus the complexity of Responsive design. We didn’t anticipate the need for re-stacking of columns or eliminating elements that a typical eCommerce email might require.

This template is an event invitation, so the design didn’t need to support complex content areas. So we chose to make the new design Mobile Aware with a single column layout, making editing and testing as easy as possible. In Mobile Aware the email tends to start off narrower (about 600 pixels, vs. a 900- to 1200-pixel wide standard email design). And, it has large enough fonts and buttons so that when it scales down to a smartphone it is still very readable.

Mobile Aware Design on Devices

On desktop or laptop computers, Mobile Aware emails still fill the majority of the viewing pane and are easy to read. On tablet and mobile devices, the 600-pixel wide Mobile-scales down slightly. This is because the design anticipates the need for larger buttons and fonts. The elements are still readable and the design provides a comfortable user experience.

We also wanted to make sure that the headline was readable whether images were blocked or not, and so we moved the headline to the top. You’ll see that we made the image take up less vertical space than their original email template This allowed room for more information on the event. By using a thoughtful approach to image selection and cropping, the new size saved space while supporting the message to the audience.

The Call-to-Action (CTA)

We also made sure there were Call-To-Action (CTA) buttons in several locations in the email as someone would scroll down. We’ve observed that mobile email readers tend to click on links at the top and bottom of emails more than the middle ones. You need to be sure that actions are possible all through the email.

How to Present the Company Overview

We created a section in a box at the base of the body area to support and set apart a brief overview about the company. This allowed a reader to easily learn more without interrupting the main email message.

The Winning Results

In conclusion, by implementing mobile aware and mobile responsive email best practices we were able to create a new template worldwide marketing managers could easily use. As a result, they saved time in the creation of new email programs. By making sure all copy is scaled to be readable and images are sized appropriately for the mobile environment, we were able to improve the prospect reader’s experience. Thus, making it easier for them to register for the event.

Read more about leveraging email campaigns with direct mail here.

 

The post How We Created a New Mobile Aware and Mobile Responsive Email Template for a Product Management Software Company appeared first on Beasley Direct and Online Marketing.

Mobile Email Marketing Best Practices

We’ve known for a while now that mobile is a critical factor in all things marketing. This is particularly true for email marketing today. Between October 2010 and October 2012, mobile email opens increased by a whopping 300%[1] According to Litmus Labs, 42% of the email client market share is on a mobile platform such as iPhone, iPad or Android.[2] ExactTarget reveals that 56% of consumers with a smartphone have purchased something as a result of an email message. This is a worldwide phenomenon, with USA email open rates trailing those of Europe, but growing quickly.

You may be doing a bang-up job on designing and writing emails to support your direct marketing effort—but if you aren’t designing email for the mobile device, you may be missing some real opportunities.

Passing the Gauntlet of Mobile Email Viewing

There are five stages of mobile email viewing. You must craft your email to move the customer successfully through each stage:

1. From line: who sent the email? If the reader isn’t interested in the from line, s/he will skip or delete. Some people won’t open email if they don’t recognize the sender, so it’s important that your from line is easy to understand. According to the Email Sender and Provider Coalition (ESPC), 73% of subscribers click “Report Spam” based on the content of the from field.
2. Subject line. The ESPC notes that 69% of subscribers decide whether to send your message to the spam folder based on the content of the subject line. For mobile viewers, you need to keep your subject line short and sweet–35 characters or less.
3. Preview pane (also called the preheader). Your call to action should be in the preview pane, because this is the next decision point for the reader. A compelling call to action here may tip the balance in your favor. You have about 85 characters to work with here.
4. Viewport. If you have crafted each of the preceding steps carefully, the subscriber will open the email. But you’re not home free yet—if the best part of your message falls below the “fold,” forcing the user to scroll down to see it, you may yet lose your customer. Make sure the most important content is right up front and remember how small that screen is. Consider using bullets, borders or background colors to encourage the subscriber to scroll down.
5. Scrolling view. Now the subscriber is scrolling down to read the complete message. Stick with clear and concise verbiage and make answering the call to action easy and obvious—a big button with clear wording such as “Get Your Free Upgrade” works well.

Tap and Swipe, Not Click

Always remember that mobile users are working with touch screens. They tap on links and swipe to see more. They don’t click or use a mouse or a keyboard. Your interactive elements should be large enough so that people can easily tap them on a tiny screen, even if they have “fat fingers”:

• Keep buttons at least 44 pixels square for easy tapping
• Keep links and buttons to the center or left for ease of use
• Separate links so the user doesn’t inadvertently tap more than one simultaneously
• Avoid hovers and other interactive user interface elements
• Never say “Click Here” because mobile users are tapping

Graphics and Formatting

The iPhone, which represents 24% of email opens,[3] scales messages down. Stick to a single-column layout, as double-column becomes hard to read on a small screen. Use large text sizes for the same reason. Use contrast to increase legibility—but don’t leap to an extreme, such as white type on a black background, which is difficult to read. Keep buttons extra large to be tappable even after shrinking, and use texture to make buttons more appealing.

Use large photos, both for their visual appeal, and also because they translate well to both mobile and desktop environments.

Responsive Design

Responsive design is a set of techniques used to make a layout readable and usable on any screen and any platform on which it is displayed. Use of fluid grids, fluid images and media queries allow “smart” messages to sense what kind of device is being used to display them, and adjust accordingly. A message that is displayed on a desktop as 600 pixels wide with multiple columns will recompose itself dynamically to become 320 pixels wide and single-column. In today’s multi-platform, multi-device environment, responsive design is the only way to go.

For more information on how to improve returns on email campaigns for both desktop and mobile, please download Beasley Direct Marketing’s white paper, “How To Do Your Own Email Audit: A Hands-On Guide or for a quick evaluation of your email template, contact us at www.BeasleyDirect.com

The post Email Marketing Goes Mobile appeared first on Beasley Direct and Online Marketing.