Category: Email Development

Are Chatbots the Death of Email Marketing?

Spoiler alert: Chatbots are not the death of email marketing. Every year or so a new technology comes around claiming to bring about the end of email marketing. Fortunately, for people such as myself (email marketers), this is far from the truth. While email marketing should co-exist and even thrive off of new technology like chatbots, it still is the #1 preferred channel for consumers to hear from their favorite brand. Plus, it also brings in $40 in ROI to every $1 spent. While chatbots bring about great potential, they still have a way to go before they can rake in that much ROI. In this article we’ll break down chatbots, what they hold in store for 2017 and how this technology will co-exist with email marketing.

What is a bot anyway?

A bot is software that impersonates a real-live person. While bots exist now to eliminate mundane tasks, that was not always the case. Bots started off actually annoying the common marketer. By increasing page views or spamming your Twitter feed, bots have been around for quite some time, but now they finally work in favor of the marketer.

With the help of technology, chat bots are progressing and becoming more contextually relevant for the end user. For example, TechCrunch has toted that Facebook’s Messenger bot store could be the most important launch since the App Store.

Below are major companies that embraced this trend within the past two years:

Messaging apps are not the only platform to succeed with bots. eCommerce is seeing a huge surge in bots being adopted on their website. For example, if someone was searching for shoes on a shoe store site, they could message with the bot asking for grey dress shoes, opposed to searching the site for a while in an effort to find the type and color of shoe they are looking for. With this type of personalization and customer service, bots are a powerful tool.

The issues at hand

Frankly, one of the main reasons email marketing has nothing to fear is that the technology just isn’t there yet for bots to be taking over anything. “The conversations aren’t fluent or smart enough to either trick the consumer to believe they’re talking to a human, or to deliver a good enough experience so that the human doesn’t care,” said Dean Withey, the CEO of ubisend, a mobile messaging solutions firm.

Plus, according to Forrester research only 4% of digital business professionals are actually using chatbots. Andrew Hogan, an analyst serving customer service professionals at Forrester said, “What’s really happening is that there’s been an explosion of attention and development but not necessarily a real business impact.”

There is just too much room for error at the moment for businesses to reply solely on chatbots to provide the support a real customer is looking for. Let’s put it this way, chatbots are good for engaging, not necessarily closing.

Chatbots, email and AI

When thinking about chatbots moving forward, you shouldn’t look at it as email vs. chatbots, having to choose one or the other. Instead, think about chatbots as being a new component to test and interweave into your email strategy.

A great example of this already in motion is through a company called Conversica. Conversica offers a virtual sales assistance that starts reaching out to leads 24/7 within minutes of a user showing interest in your brand. Through email, this virtual assistant sends AI emails that appear to be coming from an employee. Wondering if the copy reads like a robot? Not quite. In fact, 50% of leads reply to AI emails as they are written in a conversational manner and can be more engaging than lead-nurturing autoresponders.

With Conversica, it’s almost like having a little robot on payroll, engaging and nurturing a lead for days, weeks or even months until they make that sale or the lead opts out. When a lead is ready to purchase, Conversica’s lead nurturing software alerts a sales representative that it’s time to reach out and make the sales pitch. We’re still not at the point yet where human interaction is completely removed from the sales cycle.

Relevancy is what matters most

At the end of the day, the most powerful strategy on your side is providing relevant information to the end user. That’s why email is here to stay and thanks to the new and helpful technology chatbots provide, us marketers are even closer to ensuring we deliver the right message, at the right time, to the right person. So email marketers, embrace the bots and incorporate them into your email strategy to ensure you’re delivering to the best of your ability.

With email here to stay, how are you testing your email before you hit send? Every email client is different, so test your campaign across the most popular inboxes in seconds to ensure your message is not only relevant, but will look fantastic in every inbox.

How to Restart CSS Animations in Email Using The :active Pseudo-class

This article shows you a technique to restart CSS animations with a single click or tap using the :active pseudo-class.

There are two kinds of CSS animations, those that only run once, and those than run continuously. Some CSS animations that run in loops may be distracting to the recipient of your email so you might only want to run an animation once. However, it would be useful if the recipient were given an option to replay the animation on demand.

Although the CSS animation-play-state property supports paused and running, it there is no property that makes the animation “restart”. On the web, restarting animations commonly involve the use of Javascript. Unfortunately we don’t have such a luxury with email.

Thankfully there’s a simple technique to restart CSS animations that works in email clients.

My code snippets use the -webkit prefix. This is because for the most part animations only work in Webkit based clients.

Using the :active pseudo-class

The key to restarting a CSS animation is to set the animation-name of an animation to ‘none’ and then setting it back to the original animation.

As you can see this requires two steps. One to switch it to a different animation and one to set it back. You need a mechanism that can toggle these states in one action. Although checkboxes can be used to toggle between two states, if you used a checkbox you’d need to tap twice.

We have two pseudo-classes that fit our needs: :hover and :active. Both of these selectors only operate either while the cursor is over an element or when the user is clicking on an element. Since our goal is to restart an animation when the user clicks on a “restart” button, the :active pseudo-class is preferred.

Here’s the code to play an animation:

  -webkit-animation: launch 2s; 
@-webkit-keyframes launch{
  from {

replay animation

In our example, we set the animation property to none when a user is clicking on the “replay” button. When the user releases the button, the :active selector becomes inactive and the animation reverts back to the original animation, thus restarting the animation.

#replay:active + .anim-container .box{

View code example

Support for :active in email clients

Interestingly :active has a wide support among Webkit based email clients including iOS.

The peculiar thing about iOS is that the :active selector only fires briefly when an element is tapped. Unlike on a browser, where the :active selector stays active as long as the element in clicked, in iOS tapping and holding a button will not prolong the :active selector. That’s why for the longest time, there was very little value in using the :active selector in interactive email.

However, for the purpose of restarting animations, this brief firing of the selector is perfect!

Outlook for iOS quirk

Outlook on iOS has a quirk where clicking on a link with a named anchor will cause Outlook to launch the web browser. One method to address the Outlook on iOS quirk is to quickly move the element away when the :active selector is fired preventing the actual link from firing and opening the browser.

This can be done by using the CSS translate transform to move the element 1000px to the left when the :active selector is fired. Note CSS transforms can only be applied to block level elements.


Alternatively, you can use an image as the trigger instead. The default iOS Mail client will only fire the :hover or :active selectors when applied to links, images or labels.

Arrangement of elements

As you’ve probably noticed, this technique requires that the replay trigger is placed before the animated element in the code, since the sibling selector can only target elements that are ahead and not behind itself.

What if you want to place the trigger after the animated element? The simplest way to achieve that is to either use absolute positioning or CSS transforms to visually place your trigger after the animated element on the email. (Keep in mind the Samsung Android client does not support absolute positioning).

View code example

Starting animations manually

Sometimes you don’t want an animation to automatically start. This can be done by using the :checked state using a label that targets a radio element. Clicking the label the first time will activate the :checked state of the radio element causing the animation to run once. By targeting the label using the :active selector, clicking the label again will cause the animation state to switch and switch back, and thus restarting the animation.

#cbox:checked + .anim-container .box{
  -webkit-animation: launch 2s; 
#replay:active + .box{
  -webkit-animation-name: none!important;

View code example

Keep in mind that email clients such as Outlook on iOS and Mac (and certain email service providers like MailChimp) do not support form elements in email, so you won’t be able to apply this trick.

Make sure you hide the checkboxes in your email. Here’s an article that goes into the details of hiding form elements.


View email example

A cool use of a replay button is to allow the recipient to replay an intro animation in an email. Here’s an email that plays fireworks with a recipient opens the email. The replay button allows the recipient to enjoy the fireworks as many times without having to reopen the email.

Another use of a replay button is to play animations that may be embedded further down the email content (below the fold), by having a replay button recipients will be able to start the animation when they are ready to view the animation.


When working with interactivity and animations in email, you need to ensure the experience on less capable clients are not negatively impacted, so be sure to plan for those clients as well. This article goes into how you can display fallback content for clients that don’t support these features.

Testing on the multitudes of email clients is where Email on Acid can save you a ton of time. Get over 70 previews in just one minute by testing with Email on Acid.

How to Prevent Gmail From Displaying An Image Download Button In Your Email

One of the common annoyances in Gmail webmail is Gmail displaying an image download icon when a user moves the cursor over an unlinked image. Thanks to Gmail’s recent support for embedded styles you can use CSS to to suppress the image download icon.

Gmail Image Download Icon

If you have unlinked images in your email and the image is above a certain size, Gmail will display an image download icon when you move the cursor over the image. In my tests this happens when the image is at least 300 pixels wide and 150 pixels tall. Clicking on the icon will cause your browser to download the image to your computer.

Gmail will also display this icon if you resize your image dimension down – up to a degree. For example although the icon does not appear for images 200 pixels wide and 100 pixels tall, the icon will appear if the image was sized from 300 pixels wide to 200 pixels wide.

In addition, Gmail will also change the cursor to a pointer (hand) when the cursor is over the image. If you click on the image itself and not the icon, the image is featured within a grey background within the Gmail interface.

Techniques to Hide the Download Icon

Here are two ways to hide the icon:

1. Add a Link

The simplest method to prevent Gmail from displaying the download icon is to wrap the image with a link. You can link it to a call to action or even place an empty anchor on the image.

2. Use a Sibling Selector

Remi Parmienter discovered that you can hide the icon with a sibling selector because the download icon is contained within a div that is added after the image by Gmail.

img + div { display:none; }

This selector is very broad as it will hide any div that is adjacent to an image including divs that you might have added yourself.

Thankfully since Gmail started supporting class names in their update last year, you now have much more control over this.

You can add a class like “g-img” to an unlinked image and when add a CSS style like below in the (Gmail only supports tags in the head) of the email

img.g-img + div {display:none;}

However if you happen to have a div adjacent to your image, this may cause that div to be hidden in other clients, such as Yahoo! Mail or iOS. As a safeguard you can append a “placeholder” div after your unlinked image:

3. Set the Image as a Background Image

Although Gmail does not add the image download icon to background images, a few email clients do not support background images. Clients that do not support background images include some versions of Gmail Android clients as well as Microsoft Outlook (you need to resort to using VML).

Choosing The Best Option

Wrapping an image with an empty link is simple and straightforward. However, when the recipient clicks on the image, nothing happens which can lead to the recipient thinking that your email is broken. This also has the effect of making the image having an appearance of a link in non Gmail clients as well. Therefore if you want to use this option, use a real link.

With the sibling selector technique you can hide the download icon, but Gmail will still convert the cursor to a pointer when the user moves the mouse over the image. Since Gmail strips the ‘cursor’ CSS style, we aren’t able to override Gmail’s cursor styles. However using this technique, your image won’t look like it has a link in other email clients.

Using the background technique will prevent the icon from being displayed and the cursor from being changed, but comes with more complexity as you have to deal with clients that don’t support background images.

As usual, when testing new techniques, you should make sure that they don’t negatively affect rendering in other email clients. Here’s where Email on Acid can save you a ton of time. Get over 70 previews in just one minute by testing with Email on Acid.

iOS10 now available for testing

Good news folks, we’ve now added iOS10 testing to our extensive list of clients you can test on.

You will now be seeing four new clients in your Email on Acid account:

  • iPhone 6 iOS 10.2
  • iPhone 6 Plus iOS 10.2
  • iPhone 7 iOS 10.2
  • iPhone 7 Plus iOS 10.2

iOS and mobile in general still dominate a large part of the email client market share. With this in mind, it’s as important as ever to ensure you’re testing on the latest devices.

If you’re not seeing the new devices in your testing, make sure you update your default testing clients in your Email on Acid account.

Not an Email on Acid member?

Not only do we have the latest iOS10 testing, we have a range of over 70 different email clients to test on. Sign up now to test instantly on these email clients.

7 Reasons Email Marketing Still Works

It may (or may not) be Throwback Thursday when you read this, but when we refer to email marketing, we are not trying to do a throwback from the distant past. While some remember the days of hearing, “You’ve got mail” and are taken back to the early days of the Internet, this blog isn’t about email back in the day or a romantic comedy. Instead, we’re going to break down why email marketing is still alive and well in 2017.

Email is still the most preferred method of communication for many people and businesses. It remains so for a variety of reasons. Email is convenient, direct, timely, and it provides what you need to know in a way that works best for the consumer mindset.

Why is email so important? The reach is widespread and specific to your client’s needs and preferences. It is still an efficient way to invest in your business and continually expand your circle as the potential is limitless. Now, let’s dive into 7 other reasons email marketing is still effective to your bottom line.

Effectively target your messaging

On most websites, you can opt to receive targeted emails. This means that the people receiving your emails have signed up for a reason; they are invested or interested in your product in some way. They desire to hear from you. As the company sending this, you should always reach out to the customer in a direct way that is accessible to them as it will make the biggest impact.

Easily keep your clients in the know

As expressed before, part of what makes this type of marketing effective is that you can reach out to tell your clients about information they might not otherwise see or hear in time. Having a sale? The best way to spread the news is through email! Have coupons? Email is the way to go. The worst outcome is if your client is not informed of the latest events and opportunities you have for them. Nothing feels worse for your client base than finding out about that sale at their favorite store until after the fact. Keep them updated and they will appreciate you for it!

Security and mobility

Those of us who have been raised with computers knew emails would one day replace “snail mail” as the means to communicate. While it has not completely taken over as the only form of communication, it has in fact made it easier for you to quickly communicate with others in the modern world. You can keep track of receipts, order confirmations as well as other digitally accessible details.

It’s so much more convenient to have digital access today to many documents that used to be mainly paper based. Your clients increasingly prefer to go paperless too. There is safety and assurance in knowing you can access that document wherever you can access the internet. This is a valuable tool; effective and secure for your customers on the go.

Cost effective

In any business, cost is king. For a wise business owner, it is crucial to be as cost effective as you can. When using any method to spread news about your business, the data matters. Whether you are sending coupons, sales adverts or any other information about your business, emails will get there in a timely manner and can be scheduled in advance. You don’t have to worry about the information getting lost in the mail or getting picked up by the wrong person. The best news is email marketing allows you to keep your budget on track. No more overspending on marketing tools that provide little in terms of ROI.


Emails are still seen as the most professional method of outreach online. Today, people expect offers, information and contact from businesses via email. You can count on increased click-through rates when you offer promotions or useful information.

Many business professionals are checking their email at work regularly, not going onto all the social media sites. Reach out to them directly where they prefer communication for their business transactions and informational needs. Heck, 40 percent of Americans read emails while in bed. That means you already have their attention in their inbox, so use it!

Less intrusive

No one wants to be interrupted with telemarketers while eating or enjoying family time. Time at home with your family can be limited with the full work week and plethora of your children’s after school activities, and this is valuable time that is highly guarded by many.

So how is email less intrusive? That answer is easy. It is something that your client chooses to open and read through when they have time. They are not being forced to read it, or open it for that matter. They will likely read it, hoping to find something that conveys a new opportunity meeting their needs, a discount or a free item or promotion. Email is the fun and convenient way of receiving new mail today instead of the old fashioned literal mailbox in the front yard.

Tests the market

This is a great way to see how effective your marketing is simply because you can monitor opens, clicks, conversions, volume of calls, web visits and promotional codes used after an email offer. There are analytical tools available to help do the math and see the benefits, so you know what is working and what isn’t. A good question to test is: Why are people unsubscribing? This will help show you how to improve your reach and meet the real and expressed needs of your client base.

Email is far from dead…

Well, it looks like the results are in. Email marketing is still a highly-preferred method to reach not only a wider client based, but a direct and specific way for targeted marketing needs too. This is the best way to remain cost effective, communicate in the way customers prefer, keep everyone updated with what they want to know and a great way to get the data needed for how well you are reaching customers and meeting your goals.

As technology continues to improve, the digital world remains the top choice for many and a way to keep the environment green; a wider mobile reach with a professional business touch. Show is email marketing being used to drive your organization’s goals? That is alive and well.

Email Accessibility in 2017

It’s 2017 now, if you haven’t heard, and email marketing is still not dead. In fact, email is flourishing! There’s never been a more exciting time to be part of the email world. We’re bombarded from all sides with technological advances. However, there’s still something basic we’re not doing enough of; accessibility.

Setting the scene

According to the World Health Organization 285 million people are estimated to be visually impaired worldwide and over 5% of the world’s population – 360 million people – has disabling hearing loss. To put that into perspective, the population of the USA is 325 million.

The range of adaptive technologies available to these users is truly astonishing, ranging from tools we’ve heard about such as screen readers or screen magnifiers to the more advanced sip ‘n puff devices to eye tracking technology. The fact these tools exist means many users who otherwise wouldn’t be able to access the internet and, by proxy, their emails now can.

More good news! We can actually further assist these users by making our emails more accessible. This is my New Year’s Resolution for this year; create more accessible email. Let me show you how I’m going to do it.

Fixing the code

A lot of accessibility issues in email marketing stem from development. There are quite a few quick, actionable code changes we can make.

Use Semantic Code

This is one of the most basic fixes that can be applied to code. It also happens to be one of the most overlooked ones. Ensuring the use of


tags will help screen readers digest your content. Allowing the screen reader to properly differentiate between headings and paragraphs not only creates a more pleasant reading experience, it allows the user to navigate through your emails.

Set the HTML Language attribute

Another very simple fix we can apply to our emails is in the head of the email. By setting lang=”” with the correct language. Although a very minor fix it will ensure that words are being pronounced correctly by screen readers.

Unsure of how to use lang=””? You can read more here.

Set the Title of the email

Proper use of the tag has two benefits for our emails. Firstly, it’ll set a title on the tab of the webpage when viewing the email in a browser, rather than an email client. More importantly, it provides a title and some context for users with assistive technology, such as screen readers.</p> <h4>Encode your characters</h4> <p>Don’t forget to encode your characters in the HTML! It’s really simple, just add:</p> <pre><code></code></pre> <p>All this is doing is letting the browser or email client know which type of characters to expect in the following code. We’re simply making sure nothing untoward slips in, breaking the reading pattern for both people reading or using screen readers to read the email.</p> <h4>Don’t set titles on links</h4> <p>A bit of myth busting with this one, a lot of people still like to use title=”” to add titles to links. Where possible, we should avoid setting titles on links altogether. Stick to including the key information either as part of the text or the link itself. Screen readers will break their reading pattern to read the title and it can cause issues.</p> <h4>Set and style alt text</h4> <p>I’m sure most readers of this blog are aware by now of the importance of alt text. You should already be setting it to ensure your email is still legible before images load.</p> <p>Alt tags also serve a purpose in accessibility! Setting the right alt text will enable screen readers to accurately describe images to those using them. However, not all images need alt text. If your image is purely for the aesthetics of the email, such as a spacer gif or shadow, be sure to set an empty alt=”” on the image. This simply tells the screen reader to skip over these images.</p> <h4>Fix your tables</h4> <p>Fixing our tables is another very quick fix that, arguably, makes the biggest difference to email code. This fantastic piece of code was shown to me by <a href="">Mark Robbins</a> and it makes a world of difference. Simply add the below to your tables.</p> <pre><code>role=”Presentation”</code></pre> <p>This uses ARIA (more on that later, I promise) to tell the screen reader that this isn’t a data table, which is the intended use of tables in HTML, rather it’s a presentation table. This makes reading the content a lot more intuitive for screen readers.</p> <p>It’s worth noting that if you’re using a table for showing data you should leave this off those specific tables as you still want them to be read as data tables.</p> <div class="hr"></div> <h3>General Email Considerations</h3> <p>There are also some general email marketing points to consider when discussing accessibility, which don’t necessarily relate to code but can still make life easier for those dealing with the aforementioned visual and hearing impairments.</p> <h4>Be wary of contrast</h4> <p>There are no specific rules for contrast but it’s something to be wary of. This is especially important for subscribers who may suffer from color blindness. There are a few different tools out on the web for checking contrast but <a href="">one of the best is from webaim</a>.</p> <h4>Keep fonts legible</h4> <p>A general good rule of thumb is to have your fonts at a <span style="font-weight: bold" class="Apple-style-span">minimum of 14px in size</span>. Anything less than 14px can be very tough for people to read. That being said, it’s only a general rule. Around the web we’ve seen an increase in popularity of fonts being used with a light font weight. If using a light font, please consider using 16px as a minimum font.</p> <h4>Maintain a logical reading structure</h4> <p>You should try, where possible, to keep a logical reading order. Consider the fact that screen readers will, in general, read left to right before dropping to the next line. Keeping a logical reading order can also help those with dyslexia to maintain reading flow.</p> <h4>Avoid center aligned paragraphs</h4> <p>Yes, even on mobile! Although it can be aesthetically pleasing to have your text in the center it can be much harder for people with dyslexia to read center aligned text. Try and keep large bodies of text left aligned.</p> <div class="hr"></div> <h3>Is ARIA the answer?</h3> <h4>What is ARIA?</h4> <p>ARIA, or Assistive Rich Internet Applications, is a web spec created by W3C with the aim to add extra descriptive information to HTML elements to enhance the experience for those using screen readers.</p> <p>It’s worth noting that ARIA has zero effect on how your email looks or renders, it’s simply a descriptive layer we wrap onto the code.</p> <h4>How does ARIA work?</h4> <p>ARIA allows us to use HTML to tell screen readers what a HTML element is. The following are examples of ARIA roles:</p> <pre><code>role=”presentation” role=”article” role=”img” role=”listitem”</code></pre> <p>If you’d like to see more ARIA examples, <a href="">view them here</a>.</p> <h4>So, is ARIA the answer?</h4> <p>In short, no. At least, not yet! Although it’s making its way into web development, it’s still being left behind a bit in email marketing.</p> <p>As Mark Robbins correctly says in <a href="">this fantastic blog</a> many different email clients already use ARIA elements in questionable ways. The examples he includes are:</p> <ul style="padding-bottom:20px"> <li>Gmail wraps your code with role=”listitem” inside role=”list” but only a single list item.</li> <li>Yahoo! use role=”presentation” on a div and that is inside role=”main” which is also odd. There should only be one main per page and a div is presentational by default.</li> <li> (newer version) uses role=”document”.</li> </ul> <p>So, with this in mind, my suggestion for now is to avoid using ARIA roles. If webmails are already adding potentially incorrect roles we would further add to the confusion. That being said, please still do heed my advice to use role=”presentation”, although ARIA roles aren’t ready for production, this is an exception to the rule for the benefit of screen readers.</p> <div class="hr"></div> <h4>Resources</h4> <p>Accessibility in email is something that isn’t always the first topic on our minds. I do, however, have some fantastic resources if you’d like to do some further reading on accessibility.</p> <ul style="padding-bottom:20px"> <li>Rebelmail – <a href="">Accessibility in Email Part 2</a></li> <li>Campaign Monitor – <a href="">Accessibility and Email Campaigns</a></li> <li><a href="">The A11Y Project</a></li> <li>The A11Y Project – <a href="">Getting started with ARIA</a></li> <li>Mailchimp – <a href="">Accessibility in Email Marketing</a></li> <li><a href="">The Type E: Newsletter</a></li> </ul> <div class="hr"></div> <h4>It’s all down to us</h4> <p>Whether you’re a developer, designer, email marketer, or are otherwise involved in the creation of emails the burden of good accessibility falls to us. Even though we can’t use ARIA, we can take steps to ensure we give the best possible email experience, regardless of visual, hearing, or other impairments.</p> <p>If you think I’ve missed a resource, an important fix, or anything similar or you have any general thoughts or questions, please feel free to leave a comment or reach out to us on Twitter. I’d love to discuss email accessibility with you.</p> <p>When making any sort of changes to your email, whether it’s code based or simply changing the reading order of your articles, it’s important to ensure you re-test <span style="font-weight: bold" class="Apple-style-span">every iteration</span> of your email. Email on Acid’s rendering tests can show you how your email looks in over 70 different kinds of clients in seconds.</p> <div class="btnWrap2" style="margin: 10px 0px 20px;float: left;width: 100%;text-align: center"><a class="btn" href="" title="Email Testing" target="new">TEST TODAY!</a></div> <div class="feedflare"> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> </div> <p><img src="" height="1" width="1" alt="" /></p> </div><! box mark-links--> </div><!--.single_post--> </div><!--.g post--> <div id="post-49" class="g post post-49 type-post status-publish format-standard hentry category-email-development"> <div class="single_post"> <header> <hr><h2 class="title post-title" style="font-family: Helvetica,Arial,sans-serif; font-weight: normal; font-size: 16px; color: #444; text-transform: uppercase; line-height: 21px; clear: both; word-wrap: break-word;display: block; margin-bottom: 0!important; overflow: hidden;" ><a href="" >Holiday Interactive Email Campaigns</a></h2> <div class="post-info"> <span class="thecategory"><a href="" title="View all posts in Email Development">Email Development</a></span> <span class="thetime updated"><i class="fa fa-clock-o"></i> <span>January 16, 2017</span></span> <span class="thecomment"><i class="fa fa-comments"></i> <a href="" itemprop="interactionCount">0</a></span> <span class="theauthor"><i class="fa fa-user"></i> <span><a href="" title="Posts by admin" rel="author">admin</a></span></span> <span class="thetags"></span> </div> </header><!--.headline_area--> <div class="post-single-content box mark-links entry-content"> <p>The holidays are a busy time for email marketers as it is the peak shopping season. However the holidays also provide a ripe opportunity to for email marketers to fire up their creative juices. Here are some really cool campaigns that leverage interactivity and advanced CSS animations that we came across the past holiday season.</p> <h4>1. Taco Bell</h4> <p><span style="font-weight: bold" class="Apple-style-span"><a href="" target="_blank">View live version</a></span></p> <p><a href="" target="_blank">eROI</a> created this fun interactive campaign for Taco Bell that lets the recipient select among three ways to get to the Taco Bell store.</p> </p> <p style="text-align: center"><img src="" width="450" height="953" class="image_border_med"></p> <h4>2. Two-UK</h4> <p><span style="font-weight: bold" class="Apple-style-span"><a href="" target="_blank">View live version</a></span> </p> <p><a href="" target="_blank">Two</a> a digital agency based in the UK sent this interactive Christmas tree. Not only can the recipient select various lighting options, they can choose to burn the tree down as well! Kristian Robinson wrote a <a href="" target="_blank">blog article</a> on how they created the email. </p> <p style="text-align: center"><img src="" width="464" height="590" class="image_border_med"></p> <h4>3. Brightwave</h4> <p><span style="font-weight: bold" class="Apple-style-span"><a href="" target="_blank">View live version</a></span></p> <p><a href="" target="_blank">Brightwave</a>, a full service email agency based in Atlanta sent this nautical themed holiday email. It employs a pleasant background scrolling effect.</p> <p style="text-align: center"><img src="" width="456" height="434" class="image_border_med"></p> <h4>4. 1973</h4> <p><span style="font-weight: bold" class="Apple-style-span"><a href="" target="_blank">View live version</a></span></p> <p>Recipients of this interactive email from UK based digital agency <a href="" target="_blank">1973</a> can click to open a present uncovering a snow globe featuring members of their team. I liked how they implemented the snowfall with seemingly random falling directions, sizes and transparency.</p> <p>You can read more about the email on <a href="" target="_blank">their blog</a>. </p> <p style="text-align: center"><img src="" width="478" height="540" class="image_border_med"></p> <h4>5. Wax Media</h4> <p><a href="" target="_blank"><span style="font-weight: bold" class="Apple-style-span">View live version</span></a></p> <p><a href="" target="_blank">Wax Media</a> a UK based digital agency which counts B&Q among some of their clients sent this fun email where an email shakes after a set of elves fall into the scene.. What I like about this example is that the dancing elves are implemented as an animated gif, so in clients that don’t support CSS animations, they’d still be able to see the elves dancing.</p> <p style="text-align: center"><img src="" width="500" height="359" class="image_border_med"></p> <h4>6. Email on Acid</h4> <p><a href="" target="_blank"><span style="font-weight: bold" class="Apple-style-span">View live email</span></a></p> <p>We thought it would be cool to implement an email featuring a greeting card where the recipients could flip open. This technique uses 3D transforms which can provide for some impressive animated effects.</p> <p>Read about how it was done in <a href="" target="_blank">this blog article</a>.</p> <p style="text-align: center"><img src="" width="496" height="356" class="image_border_med"></p> <h4>7. FreshInbox</h4> <p><a href="" target="_blank"></p> <p>View live version</a></p> <p>Check out this new year email featuring an animated fireworks intro for the <a href="" target="_blank">FreshInbox</a> Email Geeks newsletter. You can see some other cool <a href="">interactive techniques</a> featured in the blog. </p> <p style="text-align: center"><img src="" width="389" height="442" class="image_border_med"></p> <h3>Considering Interactive Email?</h3> <p>I hope the examples inspired you to experiment with interactive email. If you’d like to learn more you can check out our <a href="">articles on Email Development</a>. </p> <p>Make sure you test your email thoroughly before running an interactive email campaign. Ensure fallbacks are functional and that your email looks great on all clients – not just those that support interactivity. Email on Acid’s rendering tests can show you how your email looks in over 70 different kinds of clients in just one minute. </p> <div class="btnWrap2" style="margin: 10px 0px 20px;float: left;width: 100%;text-align: center"><a class="btn" href="" title="Email Testing" target="new">TEST TODAY!</a></div> <div class="feedflare"> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> </div> <p><img src="" height="1" width="1" alt="" /></p> </div><! box mark-links--> </div><!--.single_post--> </div><!--.g post--> <div id="post-50" class="g post post-50 type-post status-publish format-standard hentry category-email-development"> <div class="single_post"> <header> <hr><h2 class="title post-title" style="font-family: Helvetica,Arial,sans-serif; font-weight: normal; font-size: 16px; color: #444; text-transform: uppercase; line-height: 21px; clear: both; word-wrap: break-word;display: block; margin-bottom: 0!important; overflow: hidden;" ><a href="" >Email Development Best Practices 2017</a></h2> <div class="post-info"> <span class="thecategory"><a href="" title="View all posts in Email Development">Email Development</a></span> <span class="thetime updated"><i class="fa fa-clock-o"></i> <span>January 12, 2017</span></span> <span class="thecomment"><i class="fa fa-comments"></i> <a href="" itemprop="interactionCount">0</a></span> <span class="theauthor"><i class="fa fa-user"></i> <span><a href="" title="Posts by admin" rel="author">admin</a></span></span> <span class="thetags"></span> </div> </header><!--.headline_area--> <div class="post-single-content box mark-links entry-content"> <p>Email development can be a very confusing undertaking. Many new email developers, or web developers who are new to email, find that the complex and multi-layered email client ecosystem causes endless paradoxes. A fix for one client breaks their email in three others. A simple float functions in only half of the email clients available.</p> <p>The best practices that I’ll outline below cover both email design and email development. Starting with these best practices in mind can save you hours of hair pulling down the road!</p> <div class="hr space"></div> <h3>Email Design</h3> <h4>Single column design</h4> <p>Keep the design simple to make life easy! A single column design is sufficient for most emails (other than product based or newsletter style) and will help make it much easier to accommodate mobile devices. It’s also easier for your readers to scan a single column of material than it is to jump around a lot.</p> <h4>Use 600px for default width</h4> <p>We recommend that you keep your email’s maximum width close to 600px. This width should give you plenty of space and will fit nicely on most web and desktop clients. You can scale it down to fit better on mobile screens using media queries or <a href="" title="Fluid Hybrid Design Primer" target="_blank">fluid design</a> (see below).</p> <h4>Keep mobile users in mind</h4> <p>With the rise in popularity of mobile devices, some email designers have embraced “mobile first” design. This means that they design the email with mobile primarily in mind, and then make sure it also looks good on desktop. This approach is the opposite of what many designers have been doing; designing it on desktop and then adapting it for mobile. By putting mobile users first, designers hope to increase engagement and click-throughs on mobile devices. We recommend this approach especially for simpler emails like password resets, transactional emails and account updates.</p> <h4>Every email client is different</h4> <p>When designing an email, keep in mind that it’s going to be very difficult (if not impossible) to achieve “pixel perfection.” Instead, try to achieve an email that maintains your branding while being easy to read (and click) on all email clients.</p> <p>The only way to know how your email will look across the board is to <a href="" title="Try us free!" target="_blank">test it</a>.</p> <h4>Plan for missing/blocked images</h4> <p>Some clients will block images by default, and some users will change their settings to block images so that they can save on data usage. If images aren’t downloaded, it may be impossible to get your message across. To prevent this, include descriptive alt text for your images. You should <a href="" title="Alt text in email" target="_blank">style alt text</a> to improve its appearance.</p> <h4>Use email safe fonts</h4> <p>You can use<a href="" title="Google Fonts in Email" target="_blank"> Google Fonts</a>, but you’ll find that many clients don’t support them. For this reason, having a good fallback font is key. Your fallback font ensures your design still looks good without custom web fonts. You’ll also want to make sure that you use a font-stack compatible with Outlook. One of the many quirks of Outlook is that an unrecognized font in the stack will cause it to fall back to Times New Roman. Address this annoying bug using <a href="" title="Custom font stacks" target="_blank">one of the four fixes we covered</a>.</p> <p>Here is a short list of fonts that should be supported universally: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Σψμβολ2 (Symbol), and Webdings. MailChimp also has an excellent <a href="" title="Typography" target="_blank">list of email safe fonts</a>.</p> <h4>Avoid entirely image-based emails</h4> <p>If image blocking is on, your carefully crafted email won’t communicate anything! With image blocking on, your whole message may be lost. If text must be contained in an image, use <a href="" title="Mastering Alt Text" target="_blank">styled alt text</a> to make sure your message gets across.</p> <p>Image-based emails are also very hard on your recipients’ data plans and can be very difficult for the visually impaired. Use HTML text where possible, instead.</p> <h4>Don’t forget to add an unsubscribe link!</h4> <p>And don’t try to hide it. You don’t want to be emailing people who don’t want to read your emails. It’s also illegal to leave an unsubscribe link out of commercial email. The unsubscribe usually appears in or below the footer. If you want to go for extra credit, set up a “manage preferences” center, which can help reduce the number of unsubscribes you see.</p> <div class="hr space"></div> <h3>Email Development</h3> <h2>HTML</h2> <h4>Tables are your friend. When in doubt, table.</h4> <p>Forget divs and floats. Yes, I know it seems like we’re forcing you to code in the dark ages of the internet, but tables are by far the most reliable way to achieve a consistent layout. They also enable us to replicate something that many email clients otherwise don’t allow: floats. Okay, not really CSS floats. Tables allow us to take advantage of the align attribute, which was the progenitor of modern CSS floats.</p> <p>Using align=”left”, we can cause tables to stack on top of each other on smaller screens. This technique is the basis of responsive and <a href="" title="Fluid Hybrid Design Primer" target="_blank">fluid</a> design. At a basic level, it works like this: We have two tables that are each 300px wide, with align=”left”, inside the same container. If the screen is 600 or more pixels wide (as it would be for most desktop clients) then the tables will appear side by side. If the screen is only 400px wide, then the two tables will stack on top of each other.</p> <p>Nested tables are totally safe, so feel free to nest away. You can also use colspan and rowspan, as long as you count your columns/rows carefully. Watch out for <a href="" title="Empty Table Cells" target="_blank">empty TDs</a>, as some email clients don’t handle these as you’d expect. Usually this issue can be fixed by adding an ” ” or non-breaking space character. You can control the size of this character using CSS so that it doesn’t mess with your layout.</p> <h4>Know your framework</h4> <p>There are a two popular approaches to coding an email layout. The most popular framework is usually called “responsive.” The basis of this technique is to start with a 100% width table (to which you can apply styles that will affect the whole email) and then floating (using align=”center”) a fixed-width table in the center of this wrapper. Using media queries, the width of this fixed-width can be adapted to various screen sizes. Our free <a href="" title="Get your free template" target="_blank">Seashells template</a> is a great example of this coding technique.</p> <p>The other popular framework is called hybrid fluid or “spongy” design. This technique uses container tables that are set to width=”100%” and constrained by a max-width style. On screens wider than the max-width, the table will reach its max and become no wider. On smaller screen, like tablets and phones, the table will naturally fill the available space. The “hybrid” part of this technique is that each table must be surrounded by a conditional table visible only to Outlook. The hybrid table has a fixed width, which solves the main problem with fluid design: Outlook ignores max-width statements. The main advantage of this technique is that it works pretty much everywhere, regardless of support for embedded styles or media queries. For more on hybrid fluid design, <a href="" title="Fluid Hybrid Design Primer" target="_blank">check out our primer</a>. We also have a few free hybrid fluid templates, including the <a href="" title="Get your free template" target="_blank">Coffee Shop template</a>.</p> <h4>Make sure code is well commented</h4> <p>Keeping our code well commented will allow for ease of editing templates. This is true of any kind of coding, really, but shouldn’t be neglected for email. Because email development is full of hacks and fixes for client quirks, it can be invaluable to note why a particular style or element was added.</p> <h4>Encode special characters</h4> <p>If your ESP uses a different kind of encoding from the kind you selected for your email, it may cause your special characters (like ©) to appear incorrectly, often as a black square or a diamond. This can even affect quotation marks and apostrophes. To avoid this problem, use a character encoder <a href="" title="Character Converter" target="_blank">like this one</a>, or the one that is included with the Email Editor.</p> <div class="btnWrap2" style="margin: 10px 0px 20px;float: left;width: 100%;text-align: center"><a class="btn btn-lg btn-success" href="" title="Email Testing" target="new">GET ACCESS!</a></div> <h4>Keep email file size under 100kb</h4> <p>There are a couple good reasons to keep your email under this limit. One is that it will <a href="" title="Email file size and deliverability" target="_blank">pass through more spam filters</a> by staying light. Keeping your email under 102kb will also prevent Gmail from “clipping” your email, as shown in this <a href="" title="Gmail clipping emails" target="_blank">Adestra article</a>.</p> <p>To keep your email under the limit, consider removing redundant or unused styles, moving some of the content of the email to a landing page, or minifying your code before sending it out. Just make sure to test any changes before the final send!</p> <h4>Code for high DPI displays</h4> <p>High DPI displays such as Outlook 2010 on a laptop that is defaulted to high DPI can often cause issues when scaling email designs. This is because it will scale certain parts of the email (those with height, width, font-size and so on coded in px) but not other parts. To make sure your whole email scales properly, just follow the steps in our <a href="" title="Read it here" target="_blank">Coding for DPI Scaling in Outlook</a> blog.</p> <h4>Include preheader text</h4> <p>Preheader text is what you see after the subject of the email in many inboxes. This text is <a href="" title="Coding preheaders" target="_blank">easy to code</a> and can make a huge difference in open rates. Just make sure you don’t hard-code “default” preheader text into your template!</p> <h4>Avoid Javascript, Flash, forms and other complex CSS/HTML</h4> <p>Javascript and Flash are completely unsupported in email clients, so don’t use them at all. Newer code, such as HTML5 and CSS3 have limited support, but are sometimes possible (and fun!) to use. These enhancements should be used with caution. As always, test thoroughly when using any advanced code!</p> <h4>Use cellpadding for spacing</h4> <p>Cellpadding provides reliable spacing across all email clients. If you need spacing only on one side of an image or container, you may want to use another spacing technique. Check out our blog on <a href="" title="Read it here" target="_blank">spacing techniques in email</a> for more info.</p> <h4>Test test test!</h4> <p>Email coding is hard! Every email client has different quirks when it comes to rendering code. Outlook for desktop (2007, 2010, 2013 and 2016) can be especially challenging. The only way to know your email will look great everywhere is to test it. <a href="" title="Try us free!" target="_blank">Email on Acid can help you test</a> by generating over 70 screenshots of all the most popular email clients in less than 30 seconds.</p> <h2>Images</h2> <h4>Make images retina ready</h4> <p>Many devices now include “retina” displays. This means that they have more physical pixels than their CSS dimensions would otherwise indicate. A 10px wide image might use 20 or more physical pixels to display it. By using extra large images, we can make sure that they appear extra crisp on these displays. For more on this technique, read our articles about <a href="" title="How to make your images retina" target="_blank">retina images</a> in email and fluid retina images for email.</p> <p>If you include hard coded preheader text (usually in a field that can be modified), you will at some point forget to customize it and you’ll send out an email with preheader text like, “PREHEADER TEXT HERE.” What a faux pas!</p> <p>Instead, just include the “default” preheader text as an HTML comment. This way, other marketers and developers you work with can tell what purpose of that part of the code serves, but no recipients will see it if you forget to customize.</p> <h4>Use absolute addresses for images</h4> <p>You may be using local image references for your testing, but when you do your final send <a href="" title="Absolute image references" target="_blank">absolute image references</a> are an absolute must!</p> <h4>Seeing strange spacing around an image?</h4> <p>Use display:block and it will usually remove this extra spacing. This is actually a doctype issue.</p> <h4>Don’t use image maps</h4> <p>If you need to connect one image to multiple locations, you’re going to have to slice it. Put each slice in its own table cell, and then link the images. This can cause all kinds of havoc trying to get the slices to line up perfectly, so I would only do this as a last resort.</p> <h4>Background images take some extra work</h4> <p>This is because Outlook can’t handle the background attribute or backgrounds set through CSS. You’ll have to use <a href="" title="Vector markup landguage" target="_blank">VML to get backgrounds working in Outlook</a>, and even then it can be finicky. If you’re having a hard time, try using Stig’s <a href="" title="Button generator" target="_blank">button</a> and <a href="" title="Background generator" target="_blank">background</a> generators so that you don’t pull all your hair out.</p> <h2>CSS</h2> <h4>Use inline styles</h4> <p>Even with <a href="" title="Gmail now supports media queries" target="_blank">Gmail’s recent changes</a> to support embedded styles, including classes, IDs and media queries, you still need to inline styles. Some Gmail clients, like Gmail Android App for Non-Gmail Accounts (GANGA), still don’t support embedded styles. In addition to this, there are quite a few smaller email clients like <a href="" title="Testing in Yandex" target="_blank">Yandex</a> and <a href="" title="Tesing in Telstra" target="_blank">Telstra</a> that still require inline styles.</p> <p>To achieve this, you can code using classes and IDs and then make use of a CSS inliner. Email on Acid offers an inliner that you can use from any email test, or from within the <a href="" title="How the editor improves your workflow" target="_blank">Email Editor</a>.</p> <h4>Avoid shorthand CSS when possible</h4> <p>If you see problems with a client interpreting your CSS, check to make sure you’re not using a shorthand declaration. For example, “margin-top: 5px” may work where “margin: 5px 0 0 0;” does not. Especially avoid three-digit hex codes. Some clients don’t react well to these, so you’ll want to make sure you always use the full six-digit code.</p> <h4>Get used to !important</h4> <p>If you are a web developer, you may have been trained to avoid !important at all costs. When coding email, though, you’ll find this declaration can be invaluable. You can use it to override styles added or modified by the email client (especially web clients). You’ll also get a lot of use out of !important when writing media queries, where this declaration will let you override a default style with a mobile-specific one.</p> <h4>Get comfortable with media queries</h4> <p><a href="" title="What are media queries?" target="_blank">Media queries</a> are commonly used to create custom styles for different clients or screen sizes. The basic format of a media query for email is:</p> <pre><code class="language-markup">@media only screen and (max-device-width: 640px){ styles here }</code></pre> <p>This will cause the styles contained in the query to trigger only on screens of 640px or smaller. “Min-device-width” would do the opposite, triggering on screens of 640px or larger.</p> <p>The most common uses of this technique are to control font sizes, image sizes, and to make some tables become 100% width so that they will fill a mobile screen. You can also use media queries to hide content that isn’t necessary for mobile users. Just make sure that you use !important on styles within the media query, so that they will overwrite existing styles. <a href="" title="Read it here" target="_blank">Click here</a> for more on using media queries in HTML email.</p> <div class="hr space"></div> <h3>What best practices do you follow?</h3> <p>We’re always looking for more tips to add to our list! What best practices do you follow when developing emails?</p> <div class="feedflare"> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> </div> <p><img src="" height="1" width="1" alt="" /></p> </div><! box mark-links--> </div><!--.single_post--> </div><!--.g post--> <div id="post-51" class="g post post-51 type-post status-publish format-standard hentry category-email-development"> <div class="single_post"> <header> <hr><h2 class="title post-title" style="font-family: Helvetica,Arial,sans-serif; font-weight: normal; font-size: 16px; color: #444; text-transform: uppercase; line-height: 21px; clear: both; word-wrap: break-word;display: block; margin-bottom: 0!important; overflow: hidden;" ><a href="" >Minesweeper Interactive Email: Interview with Camille and miah from table tr td</a></h2> <div class="post-info"> <span class="thecategory"><a href="" title="View all posts in Email Development">Email Development</a></span> <span class="thetime updated"><i class="fa fa-clock-o"></i> <span>December 21, 2016</span></span> <span class="thecomment"><i class="fa fa-comments"></i> <a href="" itemprop="interactionCount">0</a></span> <span class="theauthor"><i class="fa fa-user"></i> <span><a href="" title="Posts by admin" rel="author">admin</a></span></span> <span class="thetags"></span> </div> </header><!--.headline_area--> <div class="post-single-content box mark-links entry-content"> <p style="text-align: center"><img src="" width="386"></p> <p>Camille Palu and miah roberts (miah likes his name spelled with lowercase) and their website <a href="" target="_blank">table tr td</a> have been getting a lot of buzz lately among the email design community with their interactive email creations. You can view their creations <a href="" title="table tr td interactive emails" target="_blank">here</a>.</p> <p>One of the emails that caught our attention is an email that featured a fully functioning Minesweeper game within the email (<a href="" title="Minesweeper Interactive Email" target="_blank">view it here</a>). For those of you who are not familiar with Minesweeper, it was an early PC game that came <a href="">bundled with the Windows operating system</a> where the goal is to clear up squares without triggering a “mine”.</p> <p>Having seen many interactive email implementations, I was impressed with the execution of this one (the email featured more than 64 interactive elements and 40 checkboxes – checkboxes are used to trigger the <a href="" title="Explanation of interactive email techniques" target="_blank">interactive states</a>). I reached out to the creators of the email for an interview to get their thoughts on the subject.</p> <p></p> <p style="text-align: center"><img src="" width="400"></p> <h4>Give our readers a little background about yourselves.</h4> <p>We are email developers that live and work in Denver, CO. We have worked together for four years at two companies (Merkle Inc. and Digital Fusion). We run our passion project (table tr td), and own a business (camiah). We like to build email, design stickers, buttons, and t-shirts, and find the “best way” to do just about everything. We like coming up with brand new ideas and executing them. We love being creative, and we both love our little families. We are perfectionists that painstakingly care about every aspect of what we do.</p> <h4>What was your inspiration in starting the table tr td website?</h4> <p>We originally started table tr td as a code library. We, ourselves, use it daily so that we work from a shared code base. As a project, and as a way to express ourselves, we started sending email art. For the website, we keep it updated with the code we use. We consistently look at every post and ensure it still applies. For the emails, we send what we think will be either funny, fun, or relevant. Table tr td is 100% a passion project for us, and we try to make sure everything is the best it can be.</p> <h4>How did you come up with the idea for the Minesweeper email?</h4> <p>We are always racking our brains for ideas to get our followers to smile. We like to include interactive gems that no one in their right mind would spend time creating. So when the idea for minesweeper hit, development started immediately.</p> <h4>How long did it take you to build it?</h4> <p>Wow, this is quite a question. The development time was between 20-25 hours. 3-4 late (eye-bleeding) nights in a row. After it was ready we decided to ensure it fell back very thoughtfully in each email client so it would look intentional.</p> <h4>What advice do you have for email designers who are interested in trying out interactive email?</h4> <p>First of all, get out there and experiment, do something fun and creative for yourself. If it is for a client, find a really good and meaningful use case. Do not waste time and money developing something just because. Once you have your use, do a quick study up. We have a post on table tr td showing the basics behind it and the code needed. It’s a little funky to get used to, but it is so much fun. Especially when you’re doing it right. Another thing you’ll have to get ready for is all the fallbacks needed. It’s not going to work everywhere, so the email will need to have depth.</p> <h4>Do you feel that the time for interactive email has arrived?</h4> <p>Well, interactive email is definitely popular at the moment. And it can be used really well. But it can also burn a ton of dev time since it’s not easy. What we really think interactive email can do is bring excitement to the field, and get people, who are not normally excited about email, opening and clicking around.</p> <h4>You send really cool and whimsical emails that make use of cutting edge techniques. Is there one that you’re particularly proud of, besides the minesweeper one?</h4> <p>There is a place in our hearts for every email we send. We really enjoy the <a href="" title="Interactive Pizza Email" target="_blank">Pizza</a>, <a href="" title="Interactive Pin Email" target="_blank">Pin Code</a>, and <a href="" title="Interactive Blackberry Email" target="_blank">BlackBerry</a> emails. We send each one on purpose to people who want to receive them. We get excited thinking of how happy our followers will be to open our creations. And we hope they can see the care we have in what we do.</p> <h4>Do you think that interactive email must serve a function? Or can fun interactivity be the point of the email?</h4> <p>We have a unique point of view. We send almost exclusively to get people to think, not to have them take an action. But even though our interactivity is the point of the email, it still has a function. A function to create thought, movement, a smile, a laugh, a share, a positive reputation, or to build trust with our followers.</p> <h4>Is there any interactive email that you’ve come across that you really liked?</h4> <p>We love what our buddy <a href="" target="_blank">Eric Lepetit</a> and his team at Nest do. Everything <a href="" target="_blank">Mark Robbins</a> has to offer is magical as well. [Editor’s note: check out Mark’s <a href="" target="_blank">interactive email games</a>].</p> <h4>What are your predictions for email in the next two to three years?</h4> <p>We are really excited about the next few years in email. The community has been syncing up and collaborating more than ever and we are becoming a more confident group. It’s also really fun to have well known email devs out there to look up to and really geek out about.</p> <p></p> <div class="hr"></div> <h3>Do you love email?</h3> <p>So do we! That’s why we find work like what table tr td does so exciting. We love innovative emails, but coding them can be challenging. That’s where Email on Acid comes into play! We can help you test your emails to make sure they’re perfect. Get over 70 previews in just one minute by testing with Email on Acid.</p> <div class="btnWrap2" style="margin: 10px 0px 20px;float: left;width: 100%;text-align: center"><a class="btn" href="" title="Email Testing" target="new">TEST TODAY!</a></div> <div class="feedflare"> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> </div> <p><img src="" height="1" width="1" alt="" /></p> </div><! box mark-links--> </div><!--.single_post--> </div><!--.g post--> <div id="post-52" class="g post post-52 type-post status-publish format-standard hentry category-email-development"> <div class="single_post"> <header> <hr><h2 class="title post-title" style="font-family: Helvetica,Arial,sans-serif; font-weight: normal; font-size: 16px; color: #444; text-transform: uppercase; line-height: 21px; clear: both; word-wrap: break-word;display: block; margin-bottom: 0!important; overflow: hidden;" ><a href="" >5 Ways to Up Your Email Game in 2017</a></h2> <div class="post-info"> <span class="thecategory"><a href="" title="View all posts in Email Development">Email Development</a></span> <span class="thetime updated"><i class="fa fa-clock-o"></i> <span>December 15, 2016</span></span> <span class="thecomment"><i class="fa fa-comments"></i> <a href="" itemprop="interactionCount">0</a></span> <span class="theauthor"><i class="fa fa-user"></i> <span><a href="" title="Posts by admin" rel="author">admin</a></span></span> <span class="thetags"></span> </div> </header><!--.headline_area--> <div class="post-single-content box mark-links entry-content"> <p>It’s never been a more exciting time to be an email marketer! 2016 has brought lots of changes to email. Gmail took huge strides with their various email clients when they made the decision to support media queries and embedded styles. Outlook surprised everybody when they decided to really engage with the email community and open a channel for feedback so that they can improve their products. Interactive email has become the new bling that every marketer wants to add to their campaigns, but remains challenging to implement.</p> <p>So, what should you do in 2017 to get to the next level? Check out these 5 recommendations from our team at EOA.</p> <div class="hr"></div> <h3>Let Your HTML Enter the 21st Century</h3> <p>We’ve been coding like it’s 1999 for too long! But that’s all starting to change. As the share of mobile clients with good HTML support rises, we’re beginning to see more advanced coding techniques become popular in email. Because web clients and mobile clients are so easy to update, big moves like <a href="">Gmail’s update</a> can happen surprisingly fast.</p> <p>Though clients like Outlook will continue to hold back email development for a little while longer, they won’t be able to stop the flood of new techniques and better emails. Microsoft has already shown interest in fixing some of the issues with Outlook. Combined with the diminishing market share of desktop email, coding for Outlook should become a thing of the past. When you have to do it, though, just make sure to <a href="">include a good fallback</a>!</p> <p>Feel free to flex your coding muscles and start trying techniques like interactive email! Soon enough, the door for email innovation will be wide open. Here are a few techniques to try if you haven’t already.</p> <ul> <li><a href="">Using Interactive Email to Highlight Content</a></li> <li><a href="">Tutorial: Animated Image Carousel for Email with Ken Burns Effects</a></li> <li><a href="">Add These Two Innovative Email Layout Techniques to Your Toolbox</a></li> <li><a href="">Coding Interactive Hotspots in HTML Email</a></li> <li><a href="">The Ultimate Email CSS Animation Guide: Part 1</a></li> </ul> <div class="hr"></div> <h3>Rule the Inbox with Engaging, Personalized Content</h3> <p>Last year, we predicted that hyper personalization would be a powerful tactic with a growing number of followers in 2016, and we weren’t wrong. The returns for carefully personalizing emails <a href="">can be staggering</a>. Today’s consumer expects experiences that are tailored just for them, and content that looks great and applies to their interests.</p> <p>List segmentation is the first (and more importantly, free) way to send more relevant information. If you’re ready to go beyond creating email audiences based on shared characteristics, <a href="">dynamic content</a> is the next level when it comes to personalization. With dynamic content, you can send one campaign, one time that is optimized and targeted to every single user by leveraging subscriber data and behavior. While you should still leverage these two tactics, there’s a new kid on the block named Big Data and he’s about to change the email game when it comes to relevancy.</p> <p>Emerging AI technologies and algorithms make mastering 1:1 messaging through email easier than ever before. This kind of technology enables greater personalization by taking the guesswork out of content curation. For example, a company called Boomtrain uses machine learning that gathers insights about your users and provides predictive recommendations. This then allows you to deliver relevant experiences through personalized emails. Another company called Phrasee uses AI to generate and optimize your marketing language. For example, Phrasee uses artificial intelligence to create conversion-driven subject lines that increased a customer’s revenue by 417%.</p> <p>Before, people knew about Big Data, but not how to apply it. Now, with these companies and technology, sending the right email, at the right time, to the right person isn’t a pipe dream anymore; it’s a reality. Not only does sending more relevant email help with conversions, it will also help with your inbox placement!</p> <p>Stricter international spam laws and reputation-based filtering are beginning to ensure that the email that makes it to a customer’s inbox is what they really want to see. This is fantastic if you’re a marketer who sends great content. Your reputation will soar and so will your email ROI.</p> <p>Email certainly isn’t dead, but batch and blast sure is.</p> <div class="hr"></div> <h3>Coding for Mobile Will Show Huge Returns</h3> <p>In the last year, mobile has dominated email opens. This means that marketers must create an excellent mobile experience, from subject line to landing page. As the market share of mobile continues to grow over 2017, investments made now in improving mobile rendering and mobile transactions will pay enormous dividends down the road.</p> <p>So how can you make your emails really shine on mobile?</p> <ul> <li>Use <a href="">media queries</a> to make sure your layout and font size fit the screen perfectly. For most users, media queries should now work in the Gmail app as well!</li> <li>If you’re worried about your email not being responsive everywhere, <a href="">try fluid hybrid design</a> instead. It can be a bit of a challenge to get used to, but it creates fluid layouts in every device and app.</li> <li>Check out our <a href="">5 easy tips on mobile optimization</a> to make sure you’ve covered all your bases.</li> </ul> <div class="hr"></div> <h3>Streamline Your Email Production</h3> <p>Email production can take a huge amount of time if you build from scratch over and over. Instead, we recommend building and testing a few trusty templates that can be reused as much as you need them. For a more flexible approach, consider switching to <a href="">modular design</a>. This technique can save you loads of time while allowing for some flexibility in the design of your emails. With modular design, each content block can be coded as a standalone “partial” or chunk of code. Then you can drop any number of these chunks into the “frame” of the email in any order. This lets you mix and match content blocks on the fly to create the look you need for each email.</p> <p>Modular design is even easier with our <a href="">Email Editor</a> tool. Our handy Snippets feature lets you save code with a unique shortcut so that you can drop all of it in with just a few keystrokes. The Email Editor also brings lots of other useful features to the table, like instant testing, revision history, an image library and more. <a href="">Improve your email workflow</a> with our Email Editor today!</p> <div class="hr"></div> <h3>Embrace the Unsubscribe</h3> <p>Unsubscribes happen. And you shouldn’t beat yourself up about it! You don’t want to keep disengaged readers on your list. Make sure your unsubscribe link is easy to find at the bottom of the email. Not only is this illegal to hide, but it’s just an added frustration for users.</p> <p>If you’re able to create one, a <a href="">preference center</a> is an even better option to present customers with. Preference centers truly put the power of choice back in the hands of the readers. This allows them to stay in touch on mailings they want to receive but unsubscribe from those they aren’t interested in any more.</p> <p>Hard as it might be to part with a few contacts on your list, a period reengagement campaign is an excellent way to trim dead weight from the list and improve metrics across the board. Just segment out those readers who haven’t opened or clicked an email for a few months and send them a campaign to confirm they want to remain on your list.</p> <div class="hr"></div> <h3>What have you got planned for 2017?</h3> <p>The suggestions above can help almost any email marketer improve their campaigns. What plans do you have for 2017? Are there any new tools or techniques that you’re excited to use? Let us know in the comments below!</p> <p>If you’re changing up your email strategy, don’t forget to test! Broken emails don’t get clicked. We can help you catch costly errors before they get sent out. Try our email testing service today, and you’ll see how easy it is to send amazing email.</p> <div class="btnWrap2" style="margin: 10px 0px 20px;float: left;width: 100%;text-align: center"><a class="btn" href="" title="Test Today" target="new">Start testing now</a></div> <div class="feedflare"> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> <a href=""><img src="" border="0"></img></a> </div> <p><img src="" height="1" width="1" alt="" /></p> </div><! box mark-links--> </div><!--.single_post--> </div><!--.g post--> </div> </article><hr> <!--Start Pagination--> <nav class="navigation pagination" role="navigation"> <h2 class="screen-reader-text">Posts navigation</h2> <div class="nav-links"><a class="prev page-numbers" href="">Previous</a> <a class='page-numbers' href=''>1</a> <a class='page-numbers' href=''>2</a> <a class='page-numbers' href=''>3</a> <span class='page-numbers current'>4</span> <a class='page-numbers' href=''>5</a> <a class='page-numbers' href=''>6</a> <a class='page-numbers' href=''>7</a> <a class="next page-numbers" href="">Next</a></div> </nav> <!--End Pagination--> </section><!--#latest-posts--> </div> </div> <aside id="sidebar" class="sidebar c-4-12" role="complementary" itemscope itemtype=""> <div id="search-2" class="widget widget_search"><form method="get" id="searchform" class="search-form" action="" _lpchecked="1"> <fieldset> <input type="text" name="s" id="s" value="" placeholder="Search the site" /> <button id="search-image" class="sbutton" type="submit" value=""> <i class="fa fa-search"></i> </button> </fieldset> </form> </div> <div id="recent-posts-2" class="widget widget_recent_entries"> <h3 class="widget-title">Recent Posts</h3> <ul> <li> <a href="">Relationships Are Hot; Acquisition is Not</a> </li> <li> <a href="">Digital Marketing Conference in the “Mile High” City</a> </li> <li> <a href="">New Research: How Does Reputation Impact Deliverability?</a> </li> <li> <a href="">Our Consumer Network Data: The Top 10 Things You Need to Know</a> </li> <li> <a href="">Maintaining Data Privacy in a Data Driven World</a> </li> </ul> </div> <div id="recent-comments-2" class="widget widget_recent_comments"><h3 class="widget-title">Recent Comments</h3><ul id="recentcomments"></ul></div><div id="archives-2" class="widget widget_archive"><h3 class="widget-title">Archives</h3> <ul> <li><a href=''>July 2017</a></li> <li><a href=''>June 2017</a></li> <li><a href=''>May 2017</a></li> <li><a href=''>April 2017</a></li> <li><a href=''>March 2017</a></li> <li><a href=''>February 2017</a></li> <li><a href=''>January 2017</a></li> <li><a href=''>December 2016</a></li> <li><a href=''>November 2016</a></li> <li><a href=''>October 2016</a></li> <li><a href=''>September 2016</a></li> </ul> </div><div id="categories-2" class="widget widget_categories"><h3 class="widget-title">Categories</h3> <ul> <li class="cat-item cat-item-1 current-cat"><a href="" title="Acid on Email tests your emails across the most popular clients, apps and devices, then measures the performance of your emails">Email Development</a> </li> <li class="cat-item cat-item-4"><a href="" >Random</a> </li> </ul> </div><div id="meta-2" class="widget widget_meta"><h3 class="widget-title">Meta</h3> <ul> <li><a rel="nofollow" href="">Log in</a></li> <li><a href="">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="" title="Powered by WordPress, state-of-the-art semantic personal publishing platform."></a></li> </ul> </div></aside><!--#sidebar--> </div><!--#page--> </div><!--.main-container--> <footer id="site-footer" role="contentinfo" itemscope itemtype=""> <div class="container"> </div> <div class="copyrights"> <div class="container"> <!--start copyrights--> <div id="copyright-note"> <span><a href="" title="" rel="nofollow">Acid on Email</a> Copyright © 2018.</span> <div class="right">Theme by <a href="" rel="nofollow">MyThemeShop</a></div> </div> <!--end copyrights--> </div><!--.container--> </div><!--.copyrights--> </footer><!--footer--> </div><!--.main-container-wrap--> <script type='text/javascript' src=''></script> <script type='text/javascript'> /* <![CDATA[ */ var _wpcf7 = {"recaptcha":{"messages":{"empty":"Please verify that you are not a robot."}}}; /* ]]> */ </script> <script type='text/javascript' src=''></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = {"visibility_show":"show","visibility_hide":"hide","width":"Auto"}; /* ]]> */ </script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> </body> </html>