Category: Email Development


Announcing the Email on Acid Dreamweaver Plugin

Announcing the Email on Acid Dreamweaver Plugin

It’ll come as no surprise to readers that we think Email Testing is one of the most important parts in the creation of any email campaign. We do also realize that testing your emails can sometimes be a time intensive task, having to copy and paste your code or switch to your Email Service Provider. That’s why we’re absolutely thrilled to announce our plugin for Adobe Dreamweaver. This plugin will enable you to send your email test to Email on Acid without ever leaving Dreamweaver!

This plugin is available for free on the Adobe Add-on Exchange, however you will need to be an Email on Acid customer on the All Access plan to set it up and use it.

How to install the plugin

Installation, setup and use of this plugin is super simple and should only take you a few minutes!

Step 1: Download the Plugin

Click here to be view the plugin on the Adobe Add-on Exchange. Simply click install to get the plugin or follow the Adobe instructions. Please ensure you have File Syncing enabled on Creative Cloud.

Step 2: Set up

After installing the plugin as set out above open Dreamweaver and you will notice the Email on Acid tab in your menu, click on that and hit Settings. With the settings open, you’ll need to enter your Email on Acid settings.

Enter your settings

  • API Key: You can find your API Key in your Email on Acid Profile. Click here to access your profile (requires you to login) and you should see your API Key in the top-left hand corner. If you don’t, you’ll need to upgrade to the All Access plan.
  • API Password: This is the password you use to log in to your Email on Acid account.
  • Subject Format: This is how the title of the test will appear in your Email on Acid account. Feel free to use Variables we’ve setup or title it however you like

Settings

Step 3: Use the plugin!

Installation and setup are all complete, all that’s left to do is to use the plugin! Using it is super simple, simply click the Email on Acid tab and hit Run Test. You’ll see a pop-up confirming your email test has been sent. You can choose to Preview the Test which will open the test in a new browser window or you can keep working.

Test sent!

If you prefer to code in our Editor click “Create Editor Project” and we’ll automatically generate a new Editor Project from your code.

Having issues or have a feature request?

Our goal at Email on Acid isn’t only to give you accurate email tests within seconds, we also aim to make testing a seamless operation. If you’re having issues installing or using this plugin, please reach out to us either in the comment section of this blog or you can contact our support team.

Further to that, if you have a feature request or an idea that will make your life easier please do reach out, we’d love to discuss ways we can make testing easier for you.

Don’t guess, test!

Are you interested in using this feature, or any other features we bring out? You can try us out with our completely free trial of our testing suite, free for you to use for 7 days!

<a class="btn" href="https://www.emailonacid.com/signup" mce_href="https://www.emailonacid.com/signup
” title=”Email Testing” target=”new”>TEST TODAY!


GDPR – What Email Marketers need to know

GDPR, or the General Data Protection Regulation, is on the way! Mark the date in your calendar; 25th May 2018. You may have heard a lot of talk about what GDPR is and how it affects your marketing operations, here we’ll break it all down to short actionable steps.

What is GDPR?

The GDPR is a set of guidelines set out by the European Union, or EU, to give consumers a bigger say in how companies collect and use their data, with the aim to make it completely uniform across the EU. As mentioned above, these will come into play on the 28th May 2018.

These guidelines not only give more power to consumers, they also allow businesses to all operate under one set of guidelines with clearly defined rules.

GDPR will apply to any company processing consumer data belonging to EU residents. It’s also been confirmed that the UK will enforce GDPR, regardless of Brexit.

What does it mean for me?

The GDPR guidelines will mean you will need to review both how you capture and how you process user data. Here are some key points from the DMA, or Direct Marketing Association:

  • Unbundled: Asking for consent should be separate from other terms and conditions, so individuals are clear what they consenting to. Consent should not be a pre-condition of signing up to a service unless it is necessary for that service.
  • Active opt-in: The GDPR makes it clear in the recitals that pre-ticked boxes are not a valid form of consent. Clear opt-in boxes should be used.
  • Granular: Where there are various different types of data processing that may occur, allow for separate consent as much as possible. The ICO want 

    96

    Normal
    0

    false
    false
    false

    EN-US
    X-NONE
    X-NONE


    /* Style Definitions */
    table.MsoNormalTable
    {mso-style-name:”Table Normal”;
    mso-tstyle-rowband-size:0;
    mso-tstyle-colband-size:0;
    mso-style-noshow:yes;
    mso-style-priority:99;
    mso-style-parent:””;
    mso-padding-alt:0in 5.4pt 0in 5.4pt;
    mso-para-margin:0in;
    mso-para-margin-bottom:.0001pt;
    mso-pagination:widow-orphan;
    font-size:12.0pt;
    font-family:Calibri;
    mso-ascii-font-family:Calibri;
    mso-ascii-theme-font:minor-latin;
    mso-hansi-font-family:Calibri;
    mso-hansi-theme-font:minor-latin;}

    organizations to be as granular as possible which means giving consumers more control over what they’re consenting to.

  • Named: Always tell individuals who your organization is and name any third parties that the data will be shared with. The draft ICO guidance states that terms like ‘we will only share your data with other men’s clothing retailers’ are not specific enough. The individual organizations that the data will be shared with need to be named.
  • Documented: Maintain records of the consents you have. Record the following information: what the individual has consented to; what they were told at the time; and the method of consent.
  • Easy to withdraw: Individuals should be easily able to withdraw their consent. Organizations must put in place simple, fast methods for withdrawing consent and tell individuals about their right to withdraw consent.
  • Freely given: Consent should be freely given by individuals.

Yikes! What if I don’t follow the guidelines?

Under GDPR supervisory authorities will be able to impose some pretty hefty fines, depending on circumstances. They break these fines into two tiers:

  • €20 million or 4% of annual global turnover for breaches of, for example, the principles of processing and data subjects’ rights
  • €10 million or 2% of annual global turnover for breaches of obligations including maintaining written records, implementing technical and organizational measures and in relation to the appointment of Data Protection Officers.

You definitely don’t want to be on the wrong side of one of those fines!

So, what do I do?

The ICO have laid out a fantastic 12 step program to ensure you’re fully compliant before GDPR hits. Some of it, however, only applies to users in the UK, so we’re pulled out some key points for you to review.

  1. Awareness – You should make sure that decision makers and key people in your organization are aware that the law is changing to the GDPR. They need to appreciate the impact this is likely to have.
  2. Information you hold – You should document what personal data you hold, where it came from and who you share it with. You may need to organize an information audit.
  3. Communicating privacy information – You should review your current privacy notices and put a plan in place for making any necessary changes in time for GDPR implementation.
  4. Individuals’ rights You should check your procedures to ensure they cover all the rights individuals have, including how you would delete personal data or provide data electronically and in a commonly used format.
  5. Subject access requests – You should update your procedures and plan how you will handle requests within the new timescales and provide any additional information.
  6. Lawful basis for processing personal data – You should identify the lawful basis for your processing activity in the GDPR, document it and update your privacy notice to explain it.
  7. Consent – You should review how you seek, record and manage consent and whether you need to make any changes. Refresh existing consents now if they don’t meet the GDPR standard.
  8. Data breaches – You should make sure you have the right procedures in place to detect, report and investigate a personal data breach.

Conclusion

As you can see, there is a lot of work to be done! With less than a year until GDPR hits us, you don’t want to be retrofitting all of these privacy notices and data capture forms, you want to be well prepared.

As always, I welcome your comments on this blog. I’m by no means an expert on GPDR and any feedback or actionable tips for email marketers will be well received!

Don’t guess, test!

Try out email testing free today! Email is an ever-changing medium, that’s why we offer a 7 day free trial of our testing suite.


Budgeted Fun: How a Design System Can Facilitate Innovation

Innovation is the holy grail of email marketing. With so many amazing resources (looking at you Justin Khoo), your team can feel substantial pressure from shareholders or fellow team members to create the next unique experience. However, we rarely have unlimited resources and/or time to implement these kinetic technologies.

Email teams (internal and agency-based, both large and small) tend to share a common approach to their email programs: a one-size-fits-all system that creates emails from either templates or one-offs. But what if there’s a better way?

Alternatively, if teams create a design system for their emails, they would be better equipped to build a sustainable email program that allows for efficiency, as well as innovation. Or as we like to call it, “budgeted fun.”

What is a Design System?

I’m often asked how long it takes for me to create an email, but there are entirely too many variables to provide an all-inclusive, standardized time. Ultimately, a marketing campaign’s level of effort is better determined by the functionality and components contained within the email, as opposed to the quantity of emails. By building a system of components to collate from, a lot of the repetitive work can be automated.

What problems does it solve for?

  • Efficiency: Pre-defining the components within the design system will allow your team to complete a lot of the work upfront. This provides time and resources to then focus on innovation, testing, and new campaigns.
  • Consistency: Establishing guardrails around colors, fonts, and spacing (and even messaging) will remove rogue deviations, thus creating a clean, cohesively branded campaign.
  • Aesthetic Fatigue: Often email marketers create one-off campaigns to offer something fresh to their subscribers. A design system allows you to automate the structure, providing more time to focus on the creative without blowing through your budget.
  • Adaptable: Templates lack the ability to really evolve—any evolution in a template is essentially a redesign. Instead, a design system encourages continual adaptation. You can test single components within the system and reiterate to better address data findings and keep up with your subscriber’s demands.
  • Easier QA: To address the reality of testing an email in 55 different clients, while maintaining our sanity, a design system helps to approach new innovations by taking a step back and breaking the email into smaller, more manageable parts. It also allows you to make adjustments to the code as new clients are released without requiring a complete template overhaul.
  • Shared Vocabulary: Strategists, copywriters, designers and developers are forced to think about how their decisions affect the broader design system. In this approach, no one department is responsible for “enforcing” the rules or restrictions of the approach. Rather, the entire team informs how the design system is created.

Style tiles help facilitate conversations about the campaign goals and help maintain a shared vocabulary

What can be defined as a component in a design system?

  • Color Palette: Establish a brand color palette with a small amount of supporting colors. Identify whether the color is used for a call-to-action, background, text element, etc. It will allow you to test the contrast for accessibility and avoid color combinations that are illegible.
  • Call-to-Actions: Identify the styling for all call-to-action items, including buttons and text links. Styling should include spacing, borders, font sizes, and colors, as well as messaging guidelines to help determine if including a text link or button is appropriate.
  • Fonts: Select a font that closely aligns with the fonts used on your other digital properties, then define the font-stack to include fallback fonts. This will show how the original web font degrades across different email clients, helping to set expectations with your shareholders.
  • Typography: Define the font family, font weight, font size, line height, as well as letter-spacing of headlines, subheads, body copy, and other supplemental copy. Include content hierarchy suggestions to help ensure the copy is accessible by a screen reader.
  • Images: Classify preferred image ratios, cropping, and treatment. This could include a hero image that is 600px wide (at full-width) or a secondary, square image with a solid, black 10px border. This will aid in imagery selection and creation.
  • Iconography: Determine guidelines around icon creation including stroke weight, colors, sizing, and use cases. In addition, create a repository of current icons to allow for easy selection.
  • Voice + Tone: As a brand, your voice may not change much, but the tone will have to adapt to the goal of the campaign. Identify how your brand will approach different use cases, such as sales messaging, personalization, and urgency, to help garner trust and interest from your subscribers.

There are many, many more components you can include in your design system, but don’t be overwhelmed! A design system is meant to be a living, breathing entity that you can refine and iterate on over time. Check out this gallery of brand design systems for more inspiration.

I’m sold! How do I get my boss and/or client to sign off on something like this?

One of the best exercises to provide a scope of work and buy-in from your shareholders is a template inventory. A template inventory captures unique elements and outliers to help identify inconsistencies across your email marketing campaigns. If you discover that there are seven unique styles of CTAs or 16 different font sizes and weights, this could translate into a lot of hours that could have been reduced, had a design system been in place.

After completing an audit, you can create style tiles or element collages that demonstrate color, type, and texture to facilitate crucial conversations about overall design direction and how they relate to the project’s goals. Clients and team members are able to better appreciate the idea of a design system by actually seeing the steps laid out in front of them.

Lastly, approach a design system as you would a marathon, not a sprint. You’re laying the foundation for campaigns to come and will only build to improve as time and testing goes on. Once your design system creates efficiencies in your campaign builds, you can start focusing on the facets of email marketing you are truly passionate about.

Don’t guess, test!

As always, whenever you’re making changes to your email development process it’s important to ensure you test ever iteration. That’s why we offer a 7 day free trial of our testing suite.


Tutorial: Implementing Navigation Controls in Image Carousels for Email

This is the final follow up to the Animated Image Carousel for Email tutorial series. In this article, we will go over how to add navigation arrows as and thumbnails to manually transition from one image to another.

See the completed example here.

The Checkbox Method

As can be seen in this tutorial, the checkbox is the workhorse of interactivity in email. Using labels that target checkboxes and radio buttons we can control which image is displayed will depend on which checkbox or radio element is in the “:checked” state.

.radio1:checked ~ .container .img1{ display: block }
.radio2:checked ~ .container .img2{ display: block }

Stopping the Animation

Since the carousel will animate by default, we’d want the carousel to stop animating when any radio element is checked. This can be achieved by setting the animation of animating elements to “none”.

.radio:checked ~ .container * {
  -webkit-animation: none;
}

Left and right navigation controls

As mentioned earlier, we can control the display of images by having labels that target radio elements that hide or display certain images.

We implement left and right navigation controls by absolute positioning a set of left and right navigation on each image consisting of labels that target the radio elements keyed to the next or previous image. This would mean if we had 3 images, we’d need 6 labels, 3 sets of left and right labels.






[ Carousel code ]

We can display arrows in the labels by using images or CSS techniques like this or this.


  .carousel .car-ltn,
    .carousel .car-rtn {
      z-index:100;
      width: 10%;
      height: 100%;
      position: absolute;
      background-color:transparent;
      top:0px;
      cursor:pointer;
    }
    .car-ltn {
      left:0px;
    }
    .car-rtn {
      right:0px;
    }

    .carousel .car-ltn::after,
    .carousel .car-rtn::after {
      content: '';
      width: 0; 
      height: 0; 
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      position: absolute;
      top:50%;
      margin-top:-8px;
      -webkit-filter: drop-shadow(1px 1.5px 1px rgba(0,0,0,.4));

    }
    .car-ltn::after {
      border-right: 8px solid #ffffff; 
      left: 30%;
    }
    .car-rtn::after {
      border-left: 8px solid #ffffff;
      right: 30%;
    }

In order to only display a set of left and right labels, we absolutely position them over each other and keyed to be displayed using the radio :checked technique as well.

  .carousel .car-ltn,
    .carousel .car-rtn {
      display: none;
  }

     .carousel .car-cont .car-nav-1 {
      display:block;
    }
   /* they will overlap when displayed */
    .car-radio2:checked ~ .car-cont .car-controls .car-nav-2,
    .car-radio3:checked ~ .car-cont .car-controls .car-nav-3 {
      display:block;
    }

Here’s the final code (Click on the View Code link).

Don’t Guess, Test!

At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect design for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.

Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!


4 Reasons Why Segmenting Your Lists Dramatically Impacts Your Success

Gone are the days when digital marketers would send the same generic email blast to their subscribers. Now, every savvy digital marketer knows that segmenting their email marketing list is key to running successful email campaigns.

In fact, many customers have come to expect this high level of personalization. A report from AgilOne found that 79 percent of U.S. consumers expected personalized experiences with the brands they shopped with and that 50 percent expected them to remember their past purchases.

Fortunately, it is easier than ever for eCommerce marketers to meet these high expectations. Now, we have automated marketing tools that allow us to easily segment our email list, giving subscribers the personalized experience they crave.

With the abundance of affordable marketing tools these days, there isn’t a reason to not segment your email lists. Not doing so can significantly hurt your online store’s success. If you aren’t convinced yet, here are four major reasons why your ability to segment your email marketing list is directly tied to your success.

1) Improves Customer Satisfaction

Everyone is different, so why would you send them all the same email? By segmenting your email list, you can satisfy your customer’s needs by sending them offers and content that are tailored to them specifically. This will improve the customer experience and increase their chances of converting.

For example, let’s say that you have customers who purchased a skincare item from your eCommerce store. Because this item will eventually run out, you can build a customer segment based on customers who purchased this item and send them a gentle reminder to reorder before they run out of the product. Not only can this increase your conversions, but many customers are grateful for the reminder.

What’s more, this segmentation strategy goes far beyond satisfying a single customer. A happy customer wants to share their experiences with everyone, which means that segmenting your emails can lead to more referrals. According to a Nielson Trust Study, referrals from family and friends are the most trustworthy type of marketing.

Simply put, segmenting your email list satisfies current customers and can potentially expand your customer base.

2) Boosts Open and Click-Through Rates

If you want more people to open your emails and click the links inside them, then sending them relevant content is a must. By segmenting your email marketing list, you can significantly increase both of these key metrics.

There are many ways in which you can increase your opens through email segmentation. One effective strategy is to build segments based on where they are at in the customer journey. For instance, you could segment subscribers by those who are highly engaged with your content and send them targeted offers.

As for the subscribers who aren’t engaged with your content, segmentation can be invaluable as well. Marketers can segment those who aren’t engaged and set up a re-engagement campaign to try to bring them back.

A good example of this can be seen with Quip, an online collaboration tool. After not using Quip for an extended period of time, you may receive a reminder email like the one below:

This gentle reminder may be all it takes to get a subscriber or customer to re-engage. If they aren’t responsive, then it’s important to take them off your email list. These inactive users may reduce your Sender Score, which could end up hurting your email deliverability.

3) Recaptures Lost Leads

Shopping cart abandonment is a problem that plagues all eCommerce merchants. According to Baymard Institute, the average shopping cart abandonment rate is at 69.23 percent.

Consumers abandon their shopping carts for all sorts of reasons, but the good news is that you can bring them back with the power of segmentation and retargeting. You can set up automated triggered emails, which helps recover lost sales and win back your customers.

The great thing about segmenting your email list is that you can recapture lost leads no matter where they are at in the sales cycle. Sending targeted emails that re-engage them at the right time will maximize your conversions and have a huge impact on your store’s success.

4) Builds and Sustains Customer Relationships

Gaining new subscribers and customers is important, but nurturing the relationships you have with existing customers is key to building a loyal customer base. If you need reminding how valuable loyal customers are to your online store, then consider this study by Adobe which found that repeat customers are 9x more likely to convert than a first-time shopper.

People have subscribed to receive your emails because they have faith that you will provide them something of value. By segmenting your subscribers based on their interests, you can send them personalized content that they will enjoy.

You can also take advantage of segmentation by setting up triggered emails that welcome new subscribers or send discounts to subscribers on their birthday. With an automated marketing platform, this is incredibly easy to set up and a great way to boost loyalty in your subscribers.

Segmenting your email list is also essential for online merchants who have their own loyalty programs. Sending these members exclusive content and promotions is an effective way to keep them subscribed and further increase revenue and profitability.

Final Words

If you aren’t convinced that email segmentation can bring you a better ROI, there are plenty of success stories that may sway you on the matter. Consumers demand personalized and highly targeted messages and those who don’t provide will find themselves falling behind. By segmenting your email list, you can increase the impact of your message and boost your bottom line.

Don’t Guess, Test!

At Email on Acid, testing is at the core of our mission. After you’ve finished segmenting your lists, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.

Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!


Image Map Support in HTML Email

An image map is an image that contains areas that map to distinct links. Image maps are largely considered antiquated on the web since there are more suitable techniques available and it comes with a host of downsides. However, support for image maps is surprisingly good among the major email clients.

What is an Image Map?

An image map is an image that is linked to a map of areas within the image specified by coordinates and a link. Clicking within the areas within the image will take the user to the associated link.

The code for the above image map (example on codepen) that contains a clickable rectangle and triangle looks like this:



 Square
 Triangle

There are three types of shapes for image maps: rect (rectangle), circle and poly (polygon).

You’d normally need a tool to generate the coordinates such as Dreamweaver or an online service like this.

Support for Image Maps in Email Clients

From my tests, all the major email clients support image maps. Yes, even Microsoft Outlook! Other clients that I’ve tested that works with image maps include, iOS, Apple Mail, Yahoo! Mail, Gmail, Outlook.com, AOL and the Samsung Android client.

Downsides of Image Maps

With all the utility of image maps, there are some distinct drawbacks that you should consider should you decide to use them.

Lack of alt text support.

When an image is blocked by the client, all you see is a single alt text of the image and not the individual links.

Does not work with responsive images.

Since the coordinates are hard coded, you cannot have images that scale to the width of its container as this will cause the coordinates to drift. Images must have fixed width and height dimensions.

Potential confusion in Gmail and Outlook.com.

In Gmail and Outlook.com, the link pointer (hand) will appear even when the user hovers the cursor over areas that are not defined by the image map. Clicking on these areas will highlight the image in its own window and can potentially confuse users which areas contain actual links.

Breaks when iOS and Gmail Android App autoscales images

If the image is autoscaled by the client, the coordinates of the image map will be off. A simple fix is to wrap the image within a table and this will fix this problem.

Link tracking may not work in some ESPs

Some email service providers won’t track clicks if the link is embedded in an image map.

And finally there seems to be a bug in Apple Mail that if the image map is the last piece of content in an email, it loses its links. Granted this situation is highly unlikely, but may come in handy during testing.

Take Away

Contrary to popular belief, image map support in email clients is pretty robust. If you decide to incorporate image maps in your campaigns however, you should definitely consider its many shortcomings before you embark.

Don’t Guess, Test!

At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect design for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.

Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!


Tinder Inspired Interactive Email: Interview With Penguin Random House

Penguin Random House sent a Tinder themed interactive email this past Valentines and I took the opportunity to interview Cassie Spencer, Manager of Email Marketing to discover some of the inspirations and challenges they came across when building that email.

The design mimics the look of the popular Tinder dating app where users swipe right and left to signal interest or disinterest in a particular match. This email featured a series of book covers along with profiles of their leading men. Under the profiles, readers have the options to go forward, backward or “like” a book. Liking a book takes the user to the product page of the book in a browser.

View the email here

Hybrid Interactivity

What I found clever is that the email featured a traditional interactive “carousel” design when viewed in the more capable Webkit clients such as iOS but falls back to a design that utilizes link anchors. The fallback displays all the options stacked on top of each other and the email client shifts the position of the email in the window to the position of next book when the recipient clicks on a link. The shifting of the position of the content makes it look as if the user is clicking through a carousel.

Interview With Cassie Spencer, Manager of Email Marketing

What interested your team in interactive email?

We’ve seen a major increase in the number of subscribers viewing our emails on mobile devices and wanted to engage with them in a fun and novel way. Interactive email fit the bill perfectly.

         

Could you give some background on the goals of this email?

The goal of this email was to engage with subscribers on our list who have a preference for romance books and introduce them to new romance titles. With this in mind, we bounced around some ideas and landed on an email in a dating app format that would invite subscribers to discover their next book crush. Since Valentine’s Day was coming up, we thought that would be the perfect time to reach out to them with this messaging.

How did the campaign perform in relation to your expectations?

The campaign was right in line with our expectations. Engagement rates were on par with what we’ve seen from the romance portion of our list during past campaigns. We saw an increase in the number of total clicks and clicks per subscriber as a result of the interactivity, which is exactly what we had hoped and expected.

Let us know some of the challenges and insights you learned from this campaign.

While it was a bit of a challenge to figure out which method to use to create an interactive email with functionality seen in dating apps, we came to see that an image carousel would work best. We also learned from this campaign to have a good fallback version for subscribers viewing the email on desktop, or in certain ESPs.

What are the resources and sources of inspiration you turn to when building kinetic campaigns?

FreshInbox, of course, as well as Really Good Emails and Email on Acid. We also sign up for literally everything, so there’s a constant flood of email inspiration delivered to our inboxes daily.

What kinetic techniques are you currently most excited about?

We’re excited about hide/show functionality, as well as image carousels. We’ve utilized both so far and based on positive results are look forward to building even more creative campaigns using these methods. We’re also pretty psyched about using z-indexing and fixed positioning to create a scrolling experience in future campaigns.

Don’t guess, test!

As always, whenever you’re developing sophisticated campaigns incorporating interactivity, it is important to make sure that your designs look good in every email client. That’s why we offer a 7 day free trial of our testing suite.

<a class="btn" href="https://www.emailonacid.com/signup" mce_href="https://www.emailonacid.com/signup
” title=”Email Testing” target=”new”>TEST TODAY!


Tutorial: Animated Image Carousel for Email with Sliding Transitions

This is a follow up to the Animated Image Carousel for Email tutorial. In this article, we will go over how to make the images slide instead of fade when transitioning from one image to another.

See the completed example here.

Like the original animated carousel, this example only works with email clients that support CSS animations as well as absolute positioning such as iOS Mail (iPhone, iPad) and Apple Mail.  Other clients will see the fallback content. Here’s a chart of CSS support among email clients.

Sliding Transitions

We will be using three images although you should be able to modify them to accommodate as many images as you like.

Continuous Loop

You might have seen two types of sliding carousels. Those that loop continuously in one direction, and those that slide to the end and then “scroll backwards” to the beginning to start again.  In this example, we’re going to make our carousel loop continuously.

Left Margins

The key to our slides is that we hide the images not currently visible by sticking them to the left of the carousel by using margin-left:-100%. Technically a better mechanism is to use the translate transform (ie. transform: translateX(-100%) ) since it produces a smoother effect but as will be discussed later, iOS10 has issues with mixing translates and negative delays.

We stagger the animations and start them off sliding in from the right by setting margin-left from 100% to 0%, and then when their turn is up, sliding them towards the left from 0% to -100%.

 .carousel.slide a{
    position:absolute;
    top:0px;
    left:0px; 
    opacity:1;   
    width:100%;
    -webkit-animation: slide-anim 9s linear infinite;    
  }

 @-webkit-keyframes slide-anim
  {
      /* start slide in from right */
      0% {
        margin-left:100%;
      }
      /* end slide in */
      5%{
        margin-left:0%;
      }
      /* start slide out to left */
      33.3333%{
        margin-left:0%;
      }
      /* end slide out */
      38.3333%{
        margin-left:-100%;
      }
      100%{
        margin-left:-100%;
      }
  }

The animation keyframes are broken up into thirds (33.3333%) since we have three images. You’d use a different ratio if you have a different number of images.

Negative Animation Delays

If we used positive animation delays to stagger the timing of the slides, what would happen is that the later slides would be visible while the initial slides are being transitioned. We need to get them out of the way right at the start.

By using negative animation delays, we can simulate as if the animation has had a chance to complete a full cycle and hence having the later images already safely hidden to the left of the carousel.

 .carousel.slide a:nth-child(1){
    position:relative;
    -webkit-animation-delay: -10s;    
  }
  .carousel.slide a:nth-child(2){
    -webkit-animation-delay: -7s;    
  }
  .carousel.slide a:nth-child(3){
    -webkit-animation-delay: -4s;    
  }

Notice that instead of having delays that are a multiple of of 3 (-9, -6, -3) an extra second has been deducted from each. This is to skip the initial sliding in of the first image so the animation starts with the first image already fully visible.

As mentioned in the previous section, there is a bug with iOS10 that translates don’t work when paired with negative animation delays, so we’re forced to other mechanisms such as margins.

Carousel Code

We reuse the same HTML code for our carousel from the original article. This time, instead of using the class “fade” we use the class “slide”.



<!--

Here’s the final code (Click on the View Code link).

Fallbacks

Since non iOS clients will not be able to view the carousel, make sure you also have solid fallbacks as covered in the original article.

What other way to test how your carousel and fallback looks across dozens of email clients out there than with Email on Acid. Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!

<a class="btn" href="https://www.emailonacid.com/signup" mce_href="https://www.emailonacid.com/signup
” title=”Email Testing” target=”new”>TEST TODAY!


6 Rules to Follow When A/B Testing Your Email

Every audience is different, period. One incentive to your audience could fall flat, while another soars. That is why it’s critical to test, test and test some more by split testing your content, incentives, time of send and more. The options are exponential on what you can test, but that doesn’t mean you should!

In this blog, we’re going to break down what guidelines you need in place to ensure you’re A/B test yields results that will actually improve your marketing strategy in the long run. To run a test that will yield repeatable, statistically significant results, you need to adapt a systematic approach. Before we breakdown 6 guardrails to put in place when running split tests, let’s breakdown what an A/B test in email actually is!

What is an A/B test?

A/B testing is a simple way to test your current design (A) against changes to your page/email/ad (B) and determine which one produces the most positive results. This technique can be used to make sense of metrics such as sign-ups, downloads, purchases, and so on, to identify which version will increase or maximize an outcome of interest.

A simple tweak in your email campaign or website could significantly increase your bottom line; that’s why testing MUST be your #1 priority. Without further ado, lets look at A/B guidelines to follow when running a test to ensure you are getting the most marketing bang for your buck.

Know Your Baseline Results

You won’t know if the two versions of you’re A/B test yielded positive results if you don’t have a good grasp on your baseline metrics. A baseline result means you already know what your average open, click-through and conversion rates are. For example, If you ran an A/B test and your conversion rate for A was 1.3% and your conversion rate for B was 3.23%, but your baseline conversion rate is 4.5%, the test had a winner, yes, but what you tested will not positively impact your bottom line in the long run. You want to test option A and B against each other, but you also want to know that whichever one does better in the test is also doing better than your current results.

Test ONLY One Element at a Time

This is the foundation for yielding successful (and true) results. For example, don’t test two different layouts and two different CTAs at once. This will mess up your control condition because you’ll have nothing to compare your changes to. If you were to test multiple elements against each other in an A/B test, you wouldn’t be able to identify the element that resulted in more opens, clicks, conversions, etc.

Test Your Elements at the Same Time

When testing, the two variations of the test must be run simultaneously. When each test is run can drastically impact and skew your results. For example, according to MailChimp, the most optimal days to send email campaigns are between Tuesday and Friday, so if one element was tested on Tuesday and one on Friday, it could not be determined if the results were statistically significant. That is because you can’t factor in any variables that might have changed between Tuesday and Friday.

Measure the Data that Matters

Like I mentioned previously, there are many different things you can test like email layout, images, subject lines, CTA, but remember that each of those things is likely to have an effect on different parts of the conversion process.

For example, if you are deciding that you are going to test two different CTA buttons, it wouldn’t make any sense to see which version had the most opens. Instead, if you are testing two buttons, the data you will want to hone in on is CTR. You would, however, look to which email got a better open rate if you were testing two different subject lines.

Test Your Whole List, Not Just a Sub-Set

The larger your test sample, the more accurate, repeatable and reliable your results will be! If you are only using a small sub-set of your list, the results may not produce statistically significant results.

Another consideration to keep in mind is to randomly split test. If you identify two groups that have different characteristics/demographics, you cannot guarantee your results aren’t skewed based on the make-up of these groups. Handpicking groups can negatively impact your results. You want to gather empirical data, not biased data, to find out which version of your a/B test lead to better conversions.

Ensure Your Results Are Statistically Significant

If you cannot find the results to be statistically significant, then you’ve got a failed A/B test. It’s shockingly easy to get results that are due to random chance. ”Statistical significance” coincides with another A/B testing term called “confidence level.” The confidence level is the probability that the measured conversion rate differs from the control page conversion rate for reasons other than chance alone.

You should have a confidence level of at least 90-95% before you can determine that your results are statistically significant. For example, if you had a very low response to an email campaign sent out the day before Christmas, you should consider that the holiday might have negatively impacted your open rates. Numbers are important, but you must also be able to analyze the numbers logically to gain a conclusive summary of the results.  Quality trumps quantity any day of the week in A/B testing. If in doubt, run the test again to validate the results!

If you need some help crunching the numbers, grab this A/B calculator to be confident that the changes you made have really improved your conversions.

Don’t Guess, Test!

At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect A/B test for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.

Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!


Yahoo Mail Android App Limits Styles to Email Body

Ever since Gmail started supporting media queries, there has been a resurgence of interest in responsive email design. If you’re using media queries in your design you should know that the Android version of Yahoo! Mail does not support the tag in the head of an email.

Android and iOS Versions of the Yahoo! Mail app.

Although the Android and iOS versions of the Yahoo! Mail app look similar, there is a key difference between them and that is the iOS version supports in both the head as well as the body of the email whereas the Android version only supports in the body.

Here’s a code snippet to test with:




.head-class{background-color:green;}
@media only screen and (max-width: 2046px)  {
  .head-mq{background-color:green;}
}



.body-class{background-color:green;}
@media only screen and (max-width: 2046px)  {
  .body-mq{background-color:green;}
}


HEAD STYLES:
Class:

Media Query:


BODY STYLES:
Class:

Media Query:

Here’s the results in the two versions of the Yahoo! Mail app:

This makes Yahoo! Mail’s Android version an outlier in email clients as all other email clients that support the tag either support them in the head and body or just in the head (in the case of Gmail). See this table for details.

Lack of max-device-width support.

Just like Yahoo! Mail Webmail, both iOS and Android versions of the app do not support the max-device-width media query. So you’re limited to using max-width. This may come in useful when troubleshooting responsive email designs.

Should You Duplicate Your Styles?

Should you put your embedded styles in both the head and body of your email to accommodate Yahoo! Mail’s Android app? If your style block is not large, it may not be a bad idea to also include them in the body to enable your email to be responsive in the Android client. However duplicating your style blocks increases the chance for error and the possibility of running into character limitations in certain email clients like Gmail. Therefor, it may be best to keep your responsive styles in the head and allow your design to render as the desktop version in the Android client.

Make sure your email renders nicely not just with Yahoo! Mail but with all the other major email clients as well. Get started for free with our 7 day trial of Email on Acid.