Responsive Email

Definitive Results helps marketing teams transform their operationsthrough the power of marketing automation.

DR Who? Definitive Results is a boutique marketing consulting firm based out of Leesburg, Virginia that specializes in helping Marketers accelerate their efforts using the technologies available to them and alleviate their Marketing Automation pains aka “Eloquirks” or “Marketoerks” as we call them. We specialize in Marketing Automation, Marketing Operations, Marketing Analytics, and IT Services. Our mission is simple: we help Marketers transform their operations through the power of Marketing Automation. We love working with the next generation of modern marketers — those driving results based on data and analytic insights, not their guts or the wind.

§ Our Experience: we’ve been in similar shoes to you. All of our consultants werepreviously users of a Marketing Automation tool(s) prior to joining DR giving us20+ years of hands-on experience. So we really get your pains and challenges.

§ Our Commitment: we commit to always respond to you within 1 business daythroughout our relationship. No waiting and wondering.

§ Our Rates and Flexibility: we offer highly competitive rates which we aretransparent about from day 1 as shown on our How We Help You pages. If youdon’t see what you need, we will create a custom plan and/or project for you.

We can plug into your team and become a key team member for you to count on whether its for strategic marketing projects or a simple task to just get done quickly in your Marketing Automation tool.

Contact us: 7 Loudoun Street Southeast, Suite #6, Leesburg, VA 20175Phone: 1-855-MKTGDOC (658-4362)E-Mail: info@definitive-results.com Web: http://definitive-results.com/

WHAT IS RESPONSIVE EMAIL DESIGN?

Responsive email design has been growing steadily in popularity, and it’s no surprise as to why: 47% of email opens are on a mobile device, and some brands see upwards of 70% of their emails opened on mobile. These brands turn to responsive design techniques to create better experiences for their subscribers, and in many cases, increase their click and engagement rates.

The foundation of responsive email design is built upon CSS3 media queries, which can be confusing and complicated to learn. And like everything else in email, they don’t work quite the same way in our inboxes as they do on the websites we view in browsers.

WHY RESPONSIVE DESIGN?

47% of email opens are on mobile devices, yet many emails are only designed for desktop viewing. Text is often difficult to read, details in images are hard to see, and links are impossible to click on mobile.

Studies have found that people look at their phones an average of 150 times a day. These brief interactions mean that you must focus on getting your point across quickly.

80% of people delete an email if it doesn’t look good on their mobile device.

WHAT IS POSSIBLE WITH RESPONSIVE DESIGN?

The possibilities are endless, but some common uses of responsive design techniques include:

Changing hierarchy Changing navigation Enlarging fonts Changing colors Changing layout Scaling images Adding padding Changing or hiding content

HOW TO IMPLEMENT RESPONSIVE EMAIL DESIGN

Eloqua has taken some of the guesswork out by providing several prebuilt templates for responsive design; however, here are some of the basics. Responsive email uses a media query, also known as @media —a special set of CSS styles that act like conditional statements or dynamic rules. Carefully planned, they can help make emails more readable on different screen sizes.

Media queries detect the screen size of a device and then “turn on” different sets of rules based on that screen size. These can be very simple to implement or quite complex, depending on what you’d like to accomplish. They do require more planning and testing than standard emails, and don’t work in all email clients.

THE QUERY In the Eloqua templates, media types define which CSS styles to use based on screen size. This media type states “If the email is viewed on a screen size of 600px or less, use the following CSS.” @media screen and (max-width: 600px)

THE STYLES Combined with the media query, the style rules act like conditional ‘if-then’ statements, triggered when the specified screen size is detected. There can be many styles, or just a few.

Change Navigation This style moves navigation items to their own row that spans the entire width (100%) of the table table[class="nav"]{ width: 100% !important; padding: 10px 0 20px 20px !important; }

Enlarge FontsHere, font sizes inside table cells named ‘body-header’ are increased to 18px td[class="body-header"]{ font-size: 18px !important; }

Change Colors Any fonts contained in a table cell named ‘body-copy’ will display as the color #dddddd td[class=”body-copy”]{ color: #dddddd; }

Add Padding A simple style adds 15px of padding to table cells with a class of ‘body’ td[class="body"]{ padding: 15px !important; }

Change or Hide Content The display property can be used to hide table cells td[class="mobile-hide"]{ display: none; }

THE HTML Each style in the CSS rule block specifies the type of container or element (for instance, the entire table or just a table cell) the style should effect. These rules must be assigned and referenced in the HTML in order to be applied.

CSS: td[class="body-header"]{ font-size: 18px !important; }

HTML: <td align=“left” class=“body-header”> For example, the element (td) and the class (”body-header”) used in the CSS must match those used in the HTML.

THE ELOQUA TEMPLATES

To access the Responsive Templates:

1. Navigate to Assets > Emails.

2. Click Create an Email from the Email Launchpad.

3. Click Eloqua Mobile on the left-hand column under the Template Gallery heading.The list of Responsive Templates is displayed on the right-hand pane:

The four responsive templates, from left to right are:

Responsive 2-Column Split Header

This template contains a two-column header (the company logo placeholder on theleft and a placeholder for other content on the right, 180x50 px). The body of theEmail is also divided into two columns. The content within the column sections canbe modified by you when creating your Email.

Responsive Multi-Column Top Story

This Template is similar to the 2-Column with Split heading template, however the heading is shown in a single column of 320 x 60 px size.

Responsive 1-Column with Callout

This template is geared towards smaller resolution Email clients. The definition of smaller resolution as it applies to these Templates is 600 px or lower. Within the body of the Email Template are specific guidelines for what codes and tags to use when adding your content. For example, in order to ensure that Emails viewed in Microsoft Outlook are rendered properly, do not use paragraph tags, only "<br>". Follow the rules provided in order to ensure that your Emails render properly in various Email clients. This template also includes a placeholder for a callout. In the example shown above, there is a section that provides information (and perhaps a calendar callout) for an Event. You can customize this section by adding the dates, names and other pertinent information for your Email Campaign.

Responsive 2-Column

Finally, the Responsive 2-Column Template is used for creating an Email containing text and images divided up into a two-column arrangement.

Each section of the Responsive Templates contains valuable information for you when customizing the template for your Email campaigns. Not all sections of the Responsive Templates can be edited or deleted, they follow the same rules and functionality as defined earlier in this document for any Email Template available in Eloqua.

SUPPORT FOR RESPONSIVE EMAIL

Don’t forget to test your responsive design in a variety of email clients and mobile devices to be sure it displays the way you planned—differences in devices, manufacturers, applications and screen sizes can all impact how your email appears. With the help of responsive design, you can simplify your message and make it easier to read and interact with on the small screens of mobile devices. Responsive email design offers benefits such as increased usability, higher read rates, along with better performance and click-through rates.

Responsive emails are supported by: iOS Mail app Android 4.x Email (OEM) app Windows Phone 7.5 BlackBerry OS7 BlackBerry Z10

Responsive emails are not supported by: iPhone Gmail app iPhone Mailbox app iPhone Yahoo! Mail app Android Gmail app Android Yahoo! Mail app BlackBerry OS5 Windows Mobile 6.1 Windows Phone 7 Windows Phone 8

For a comprehensive list, visit the StyleCampaign blog.

DEVICES VS. APPS: WHAT DETERMINES SUPPORT? It’s a common misconception that media query and responsive email support is based on the device or operating system being used. In fact, it’s the application used to view the email that determines support. In other words, it’s possible to view the same email in two apps on the same phone, each with different support for responsive design.

RESOURCES

A Treasure trove of responsive knowledge: Responsive Email Resources

SOURCES Article: “Smartphone users check their phones an average of 150 times a day“ BlueHornet Study: “Consumer View of Email Marketing“ StyleCampaign Blog: Responsive email support

NEED HELP? We have experts that can help make your emails responsive. Contact us for details.