Month: November 2016


Fluid Retina Images for Email

“Retina” images are actually just ordinary images displayed in such a way that they become more crisp on Apple’s retina displays. For the basics of retina images, check out our blog from last year, Mobile Optimization: Retina Images in Email.

This blog will cover the challenges of coding images that are fluid and retina ready, but won’t break your email’s display in Outlook. If you’re not interested in why it’s challenging, just skip down to the code!

Why do retina images look better?

Apple’s retina displays use four or more physical pixels to create one “display” pixel for CSS and layout purposes. A 300px wide image displayed at 300px will not take advantage of Apple’s retina technology. The 2×2 group of physical pixels that comprise each display pixel will all show the same color, making the image look blurry. But, if a 600px wide image (or more) is shown at 300px, the retina screen will be able to show increased detail for that image. Each of the physical pixels will show a different color. This creates a crisper, more appealing image for users with retina screens.

Below, you can see a side by side sample of the difference this can make. This example is from an iPhone 5S, in the native client, running iOS10. One image was saved at 900px wide and the other at 300px wide, but both are displayed at 300px wide.

The image below shows a zoomed in portion of the image (using pinch and zoom on the phone) which makes the crispness of the retina image even more clear.

Fluid design and retina image sizes

When building fluid emails, such as any email using the popular fluid hybrid technique, retina images become more of a challenge. This is partially because the designer may have to choose even larger images to make sure that they are “retina” on all screen sizes. For example, a given email may be designed to slim down to 320px for iPhone 5S (and earlier) but can also fill the given space up to 768px wide for iPad Retina screens. The image would have to be 1536px wide to still be considered “retina” on the iPad. At that size, the image would be nearly five times as wide as the iPhone 5S display!

Email designers and developers will have to decide how large of an image is worth it for them. Large images increase the amount of data required to download the email, and may make the email take longer to load. An image doesn’t need to be exactly double the size it will be displayed at, but to get the most crisp image possible it should be as close to double as possible.

Outlook for desktop and fluid images

Developers will have their own way of coding fluid images, but the technique below is often used.

This coding technique depends on the image having the same native size as the listed max-width. This is because Outlook for desktop (2007, 2010, 2013, 2016) will only allow images to be resized using the width attribute (not the width style) and doesn’t respect max-width. It also doesn’t care about the size of the container. It will blow out all the tables in your email to show the image at its native size. This is at odds with the retina technique, which requires that we use images larger than their displayed size in the email.

Coding fluid, Outlook-friendly images

It turns out that this is a super easy fix. A big thank you to Charles Hall for pointing out a better route to me! By setting width as an attribute we can appease Outlook, but other clients will respect the CSS width and max-width styles.

The “retina_image” class is included only for progressive enhancements. For example, on iPads you may want to override the max-width setting to use even more of their screen size.

Completed code sample

Check out the completed code sample below. You can send this to an iPhone or iPad with a retina display to see the difference this powerful code makes.






 

 
 

What challenges does fluid coding present for you?

Coding fluid emails can be difficult when trying to implement certain techniques. If there are any conundrums that fluid coding has offered you, let us know in the comments below! We’d love to try and find a fix.

For all of your email coding needs, Email on Acid is here for you. We offer everything from email testing to email analytics, as well as a whole bunch of handy resources like coding tips and free templates. Sign up today and take your email game to the next level!


The Best Black Friday and Cyber Monday Email Campaigns

Black Friday and Cyber Monday are crucial dates on every marketer’s calendar as email accounts for 25% of online transactions. Adobe calculated that shoppers spent $2.74 billion online on Black Friday and $3.07 billion on Cyber Monday. With this type of money on the line and the competition for consumers’ attention being tougher than ever, it’s vital to send engaging email that will convert.

Before we dig into what makes a Black Friday or Cyber Monday email awesome, let’s talk about an important step you need to take before you hit send this holiday season. According to Practical Ecommerce, in 2015 mobile shopping trumped the desktop, grabbing a 57% share and drove a record-breaking $639 million in sales. This year, it’s safe to say that number will only grow. That’s why it’s critical to test your email to ensure it renders properly on different mobile devices before you deploy your email. If you want access to the fastest, and most affordable testing suite, try EOA free for 7 days to unlock unlimited email, spam and image testing!

In the spirit of giving back, we scoured the internet and our inboxes to find the most compelling email campaigns for Black Friday and Cyber Monday. Take a look below to get your creative juices flowing this season.

ModCloth

To kick off the first campaign we’re featuring, we’ll focus on the first element everyone sees in an email: the subject line! Your subject line is your first (and perhaps only) chance to make an impression. For this reason, your subject line’s job is to stop readers in their tracks as 35% of emails opened are based on subject line alone.

So, what makes a great subject line? One that tells what’s inside, instead of sells what’s inside. ModCloth did a great job of this in the email below as its subject line was, “What’s on sale? Anything & everything.” No fluff, they just get straight to the point with an incredibly compelling offer.

The subject line is also powerful because it does a fantastic job of giving a quick summary or overview of the content contained in the email. Plus, the subject line, images, and content all work together to focus on a singular goal, the Cyber Monday sale. With one goal trailing throughout the entire email, you’re more likely to keep your reader’s attention and close.

FATFACE

FATFACE truly embraces the holiday spirit by giving back to local charities. Instead of doing the usual discount that you see plastered across most emails, they are donating up to 250,000 pounds to local charities from the profits they make on Black Friday.

This not only grabs your attention because it’s something different, but this something different is engaging because of its noble cause.

Plus, can we talk about the text that says, “thanks for GIVING.” I’m a sucker for creative content and wordplay like that.

Uber

Uber followed suit in the “giving vs. getting” mentality as well, but this Black Friday campaign is also amazing for two other reasons. First, the element of surprise. They are offering discounts on 5 products over 5 days, but don’t unveil what the gifts are until the day of. This keeps the reader coming back for more, creating awesome engagement over a period of days. Second, the $5,000 prize for a lucky winner. This goes above and beyond any sort of discount or coupon code.

Also, this email is advantageous to multiple companies as this campaign is a co-marketing effort with multiple brands and products. More than just one company’s bottom line will benefit here.

J.Crew

J.Crew always has fantastic email, holiday or not, but this Cyber Monday they stepped up their game. Like I mentioned previously, I love engaging copy and the way they tied their copy and creative together in such a delightful way was worth a mention. This sort of ingenuity is what marketing is all about. Taking a theme (in this case Cyber Monday) and making every element of the email creative and at the same time conversion-driven is one for the books.

Also, props on using dynamic content at the bottom to locate the nearest store to the reader!

Forever 21

Animated GIFs in email increase CTR by 26%. Since Black Friday and Cyber Monday are one of the biggest days for email, there’s no better time to incorporate a GIF in your campaign.

Forever 21 did a fantastic job of employing this tactic with their Black Friday campaign below. They used a scratch card design to represent three possible gold fields with different prizes underneath: 15%, 20% or 25% off the user’s purchase. Not only is this visually compelling, it is also an enticing strategy as a lot of their readers will click and engage solely to see what prize they get.

Plus, give Forever 21 a few points for the simplicity of their design and CTA. Job well done.

Lou and Grey

Before we wrap up, let’s look at one of the most important elements to close a sale: creating a sense of urgency.

This whole email from its copy to the imagery makes your palms sweat. They do a great job of interweaving scarcity into all the elements in the campaign below.

Most people have FOMO (fear of missing out), so try this in your next campaign and see if it garners more conversions.

REI

In this series of impressive Black Friday and Cyber Monday emails, we’ll end with one that was gutsier than the rest, REI.

REI has built their brand around outdoor living. They stuck to their core mission in this email and used it on the biggest email day imaginable.

In the email, they announced they would close their doors Black Friday at all 143 of its retail locations. Instead of sending their employees to work, they paid 12,000 employees on Black Friday to do what they love, which is getting outside.

Not only was this awesome since they stuck to their core value’s as a company, they also started a frenzy on social media. REI invited the nation to #OptOutside. Twitter went crazy with the hashtag #OPTOUTSIDE and got tons of new eyeballs on their brand.

What are your favorite Black Friday and Cyber Monday emails you’ve seen this year?

Share your favorite campaigns in the comments section below to spread some email inspiration!


How We Monitored Gmail For Their Media Query Support Update

In September Google announced that Gmail will be adding support for embedded styles and media queries. The announcement only hinted that the changes would be rolled out by the end of the month. That immediately set email designers into a frenzy, guessing exactly when the changes would roll out.

Being email developer advocates, we set up a website called GmailUpdates.com so that email designers, developers and marketers could sign up to be notified the moment we detected that the changes have been rolled out.

Here’s how we went about monitoring Gmail for media query support.

HTML Email With Media Queries

We created an HTML email with media queries that showed green checkmarks when media queries are supported and ran them through our email rendering service. Our engineer Tom Skinner spent the weekend hacking up a solution using the Email on Acid API to continuously re-run the email through the Gmail client every five minutes and linked it to the website.

The screenshots allowed us to visually detect when the changes happened, but we needed a way to programmatically detect it. Since time was of the essence we didn’t want to turn this into a major engineering project.

Using OCR

The solution came in the form of a lightweight command line Optical Character Recognition (OCR) tool called Tesseract. An OCR converts text in images to plain text so we can perform pattern matching on them. Tesseract was developed by HP but has been taken over by Google.

We then edited our HTML so that the phrase “The updates have not yet happened” is displayed by default and hidden when media queries are present.

When we tested the OCR tool on the screen capture of the Gmail interface, the transcription was pretty bad – mostly because the OCR engine expects a well formatted document and the Gmail UI is anything but. However, we got what we needed, Tesseract managed to capture the word “happened”.

Site Monitoring Alerts

We then wrote a script that would copy the converted plain text into a publicly accessible URL and pointed our site monitor at it. We set it to send one of us a text if it detects that the phrase “happened” is no longer present in the document.

This meant one of us might have to be notified at odd hours of the night if the update happened then. We felt this was safer than having a false positive trigger off the email notifications to hundreds of disappointed recipients.

The Event

At 9:42 MST (Mountain Standard Time) on September 29th, the text came and sure enough, the screenshot showed three green checkboxes – support for classes, ids and media queries. Mallory Mongeon had the auspicious assignment of sending the eagerly anticipated announcement that finally, after 12 long years – #GmailGotStyle.

Due to the way Gmail rolled out their update we weren’t the first to see the rollout. One of the first members of the email community to get it was Ryan Person from Nike. Congratulations Ryan!

If you’re wondering why the announcement was such a big deal, head over to this article to find out!

Be the First to Know

Email on Acid is committed to helping our customers stay on top of changes in the industry. Any change to an email client can have a huge effect on your bottom line if you aren’t prepared for the changes. Keep your eyes on our blog so that you can be ready for industry-shaking events when they happen!


La Poste Webmail Testing: What You Need to Know

La Poste is a major mail service in France and also offers email services to millions of users. While mostly having good support for HTML email, La Poste’s web client does have a few quirks.

If you’re sending email to French recipients, it’s a fair bet that you’ll be seeing some La Poste addresses. Don’t worry! Email on Acid offers email testing in this client so that you can make sure all your emails are pixel perfect.

In this post we’ll see how it copes with some of the most common email development techniques. If you’d like to skip straight to support, you can find a table at the bottom of the post.

The Good

After some testing, I found that the most commonly used techniques are well-supported in La Poste.

Spacing

Spacing applied to HTML elements works as expected. Cellpadding, padding and margin are all supported and work well.

Borders

Borders also work as we’re used to seeing on the web. We tested with the code below.

border: 5px solid #ff0000;

Dashed and rounded borders work well, as do borders on only some sides, border weight and so on.

Headers and Paragraphs

Semantic markup like P and H1-H7 tags are all supported by La Poste.

Header

Paragraph

Animated GIFs

These simple images can do a lot to spice up an email, so we’re glad to report that they are supported in La Poste and will loop.

Max-width

Fear not, hybrid coders! The max-width style, combined with percentage-based widths, will work as expected.

width:100%; max-width:600px;

Font and text styles

We have some good support for different text elements and styles we employ in email. The following styles are supported.

font-size: 14px; 
font-family: 'Palatino Linotype',sans-serif; 
line-height: 16px;

Lists

We found that both ordered and unordered lists work.

in the head and body

La Poste supports embedded styles, whether those are included in the section of an email or in the . It’s great to have another client on board with embedded styles.

The Bad

While La Poste is an excellent email client in most ways, there are a few places that their support for HTML and CSS isn’t great.

Tables

Tables have great support in most email clients, and for the most part La Poste is no exception. Just make sure to define table width using inline CSS, as the width attribute is ignored.

Backgrounds

Background images won’t render in La Poste. We tried CSS inline backgrounds.

background-image: url(images/image.jpg)

As well as HTML attribute backgrounds.

background="images/image.jpg"

Neither of these work in La Poste, so you’ll have to choose a background color as a fallback. Luckily, background colors do work properly.

HTML: background="#ff0000"  
CSS: background-color: #ff0000;

@font-face

You won’t be able to import custom fonts using @font-face in La Poste, so be sure to choose a good fallback font. We tested a set of common web-safe fonts, and we found that the following are all supported in La Poste: Arial Black, Trebuchet MS, Verdana, Century Gothic, Lucida Sans, Lucida Console, Courier, Georgia, Times New Roman, and Palatino Linotype.

Support Chart

Here’s a handy support chart that summarizes what’s supported and what’s not.

La Poste Support

Element/Style Support
in head
in body
CSS Selectors
img
table No width attr support
class
id
padding
margin
      border-radius
      border
      line-height
      font-family
      font-decoration
      font-size
      max-width
      Animated GIFs

      CSS inline background
      HTML attribute background
      @font-face

      Closing words

      Backgrounds and custom fonts aside, La Poste generally has great support for modern HTML and CSS. If you’ve been working with La Poste and know some of the quirks of this client, let us know in the comments below!

      If you’re sending to a lot of La Poste addresses, try our email testing software, free for 7 days, and make sure your email looks fantastic! We offer testing in La Poste, along with a host of other regional email clients.


      Using Interactive Email to Highlight Content

      Interactive email is a topic hot on everybody’s lips; it’s what everyone wants to be sending out. Day by day we see new clever examples popping up, but to quote Elliot Ross, “Flashy design for no reason is confusing and awkward.” In this post, I’ll show you how I used interactive elements to highlight areas of our product in a recent email, and how good content can go hand-in-hand with interactive email.

      The Goal

      My goal with this email was to split it into clear content blocks, each block highlighting a different part of Email on Acid in a way that adds a bit of interactivity. In each section, I’ll explain how and why it was coded in the way it was, how we dealt with fallbacks, and the end product.

      Take a look at the full email here. Make sure to use a webkit browser (like Chrome of Safari) so you can enjoy all the interactive goodness!

      Forums – Hover Animation

      The first area of Email on Acid I wanted to highlight was our forums. For this section, I decided to add three icons showing the benefits of joining and posting on our forums, as can be seen below;

      Forums static

      To add an element of interactivity to this section, I wanted to add a clever hover effect. When you hover over an icon, it gives the impression that the icon is reversing.

      Forums animated

      Although this may look a complicated piece of code the implementation is fairly simple. Let’s break it down.

      All three icons are coded in the same way. We have a table and a cell to contain the image. You’ll notice that the cell has a class of iconArea1BG and the image itself has an id of iconArea1.

      The next step is to add the CSS to the located in the . We’ll need to reference both the class and id seen above.

      #iconArea1:hover {
      	opacity: 0;
      	transition:  all 0.3s linear;
      }

      This section is handling the id of iconArea1 we placed on the image. This piece of code is simply saying that when we hover over the image we want it to switch from full opacity, to zero opacity.

      #iconArea1BG {
      	background-image: url(images/icon1-1.jpg);
      	background-repeat: no-repeat;
      	
      }

      This piece of code is handling the class of iconArea1BG. With this snippet, we’re simply adding a background to the cell with the icon in it.

      So, to recap, by adding these two pieces of CSS to the email we’re saying that when we hover over the image it will become transparent, enabling us to see the background hidden behind it.

      In terms of fallbacks, this piece of code works itself out. For any clients that don’t support the :hover functionality, they’ll simply see the standard icons.

      Email Templates – Side-Scrolling Image

      The next thing I wanted to highlight was our free email templates. We have a fantastic selection of bullet-proof email templates that are completely free with a community account. It was important to me to show the wide variety of different templates we have.

      Template infinite scroller

      To achieve this, I created a wide image which consisted of multiple preview images of our templates. I then set it as the background image of the section and had it scroll infinitely. Unfortunately, it’s always trickier to code than to explain. So, let me show you how I coded this section!

      First off, we have to deal with Android 5.1 and Gmail App with Non Google Accounts (GANGA) which will not display background images.

      We simply contain a table inside a div with the class of fallback.

      @media screen and (-webkit-min-device-pixel-ratio: 0) {
          .fallback {
              display:none;
              display:none!important;
              max-height:0;
              overflow:hidden;
          }
          .interactive{
              display:block!important;
              max-height:none!important;
          }
      }

      By adding the above snippet of CSS to the head, we will ensure that any clients that will render our interactive section will hide the fallback div. By using a combination of all these hiding techniques, we can ensure a bulletproof hidden section.

      So, now for the main section.

      There’s a lot going on here, but we’ll break it down bit by bit! Let’s start with the div containing all of the content. This div is set to hide by default, which we reverse in the embedded CSS snippet above on clients that will render it.

      Next up, we have some VML to ensure our background image renders on Microsoft Outlook clients. We also have to include a transparent PNG with the width and height of the whole area, to ensure that when we’re scaling the size of the email we can see the entire background image.

      We also have an id set on the table cell of “animate-area2”. This is how we handle the animation of the section, as seen in the CSS below.

      #animate-area2   { 
          width:650px;
          background-image: url(images/scroller.jpg);
          background-position: 0px 0px;
          background-repeat: repeat-x;
      
          animation: animatedBackground 45s linear infinite;
          -moz-animation: animatedBackground 45s linear infinite;
          -webkit-animation: animatedBackground 45s linear infinite;
      }
      
      @keyframes animatedBackground {
          0% { background-position: 2400px 0; }
          100% { background-position: 0 0; }
      }
      @-moz-keyframes animatedBackground {
          0% { background-position: 2400px 0; }
          100% { background-position: 0 0; }
      }
      @-webkit-keyframes animatedBackground {
          0% { background-position: 2400px 0; }
          100% { background-position: 0 0; }
      }
      

      We’re simply saying here that our animation, named animatedBackground, we want it to move from its original position along the x axis by 2400 pixels, which is the width of the image. This is what creates the scrolling effect. We also set the animation to be infinite.

      The final piece of interaction I added was to let the user be able to pause the animation on hover. This was done simply so they could read the information on the images, as it can be tricky to read as they scroll past. This was done by adding a :hover style as seen below.

      #animate-area2:hover {
      	-webkit-animation-play-state: paused;
      	-moz-animation-play-state: paused;
      	-o-animation-play-state: paused;
      	animation-play-state: paused;
      }

      Events – Image Carousel

      Another element of our Email on Acid offering I wanted to promote was our recent dive into hosting events for the email community. For this section I wanted to show speakers from our first meetup, along with their names and presentation title. I decided to do this by adding a carousel in the email.

      Events image carousel

      To create a fully working bulletproof carousel I used the guide provided our email expert Justin Khoo. You can read how to achieve this over on his blog.

      One thing to note is that with the recent Gmail changes they have dropped support for attribute selectors which, unfortunately, means this carousel won’t work within Gmail. However, that’s a fair price to pay for mobile responsiveness in Gmail, right?

      Editor – Animated GIF

      Our final section to highlight in the email was our awesome email editor.

      Email Editor

      I chose to use an animated GIF here. Animated GIFs have long been a staple of the email marketing industry. Not only are they incredibly robust, they boast exceptional support in most email clients. We still need to ensure the first frame of the GIF has the right content in it, as Outlook 2007, 2010, 2013 and 2016 will only render the first frame.

      Final thoughts

      I loved building this email. From the first concept the finalised piece, my goal was to create an email that used interactive features to highlight different areas of our product. I like to think I achieved this goal, but I’d love to hear your thoughts. Do you have examples of interactive email that highlights content well? Got a personal idea you want to show off? Let me know in the comment section.

      With any email campaign, interactive or not, one of the most important parts of the process is testing. A broken email campaign can cost you in ROI and brand image. We offer email testing in over 55 different email clients, so try us free for 7 days!


      The Limitations of Interactivity and the Importance of Testing

      For those of you who know me, have seen me speak at a conference or read any of the articles I’ve published you’ll know I’m a BIG fan of interactive email and I’m always encouraging others to give it a try. I’ve talked extensively about the benefits (driving conversion, more insightful analytics etc.) but what are the limitations?

      Fallbacks

      Not every email client supports interactive email. At Rebelmail we class all email in clients in three buckets: Interactive, Limited and Static. ‘Interactive’ clients have full support of interactive email, ‘Limited’ clients have some limited support and ‘Static’ has no support.

      This means 3 possible experiences could be had from one email, so design and UX need to be properly considered for each case. We create fallbacks for the interactivity, so whether a subscriber is viewing the email on an interactive, limited or static email client he or she will have a seamless experience. The differences between interactive, limited or static are often minor but still need to be as carefully considered as the rest of your email.

      Each version should be a complete experience in itself.

      Size

      Things like image galleries, tabbed and accordion layouts allow you to offer a lot more information in a much cleaner layout. Visually this means more information in less space, but it’s still contributing to the total file size you’re sending.

      A couple of years ago Mallory Mongeon, Digital Marketing Manager at Email on Acid, wrote a great post titled How does email file size affect deliverability? In this post she advises keeping your HTML file size under 100KB, and we stick to that rule. Going much over this limit can mean your email gets cropped in some email clients and is more likely to end up in the spam folder.

      Unfortunately, you won’t fit a full website into 100kb (I’ve tried) but you can still get a lot of content in there. If you optimize your code well, avoid duplicate content and reuse CSS it is possible to keep files sizes down.

      If you’re skirting close to the 100kb limit, it’s wise to double check your files size after you’ve uploaded your code to your ESP, some may add extra code that will bloat your files size and push you over the 100kb limit.

      Load optimisation

      Similar to file size, load times can go up sharply with interactive email.

      The biggest offenders here are images. People will often use a large animated gif as a fallback to the interactivity. This may look good, but it’s also adding a lot to the load weight. Hiding an image tag will not stop the file from downloading, the user may not see it but the file will still download.

      So, if you have a 500kb fallback gif which you hide and replace with 5 100kb images in a gallery, the user will actually be downloading 1000kb of images every time.

      Think about trying to reuse content rather than replacing it.

      There is a really good throttling tool built into Google Chrome to test load times. If you open your email in Chrome and enable this tool you can emulate the load time of a 2G, 3G 4G or any custom connection you can think of. There’s a good article on the google developers site to tell you more.

      Time

      Probably the biggest limitation holding people back from experimenting with interactive email is time. It takes longer to design interactive email and much longer to code and to test. I’m afraid there are no shortcuts here, you have to put in the hours.

      I know, because it’s what I do, all day, every day.


      Email Professionals Directory: Hire one today!

      Email design can be incredibly frustrating. If you have coding or marketing questions you just can’t seem to figure out, sometimes it’s best to ask an expert. That’s why we compiled a list of the most tried and trusted email developers, designers and coders from our community.

      Check out our group of rock stars that are absolutely killing it with email.

      Ted Goas – Sr. Product Designer at Stack Overflow

      Ted is a killer designer & front-end developer working on websites, apps, and HTML emails. Ted’s goal is to create work cool enough to show his friends and honest enough to show his parents. Considering that he has worked on a project for NASA, I think he can check that goal off his list. Product design, web & interface design, front-end development, HTML emails and website speed are all in his repertoire, so check out his website if you’re in an email jam.

      Specialties Include:

      HTML, CSS, jQuery, responsive & adaptive design, cross-browser testing, and microformats.

      Work Sample:

      Portfolio | Dribbble | Cerberus: Responsive Email Patterns

      Contact Information:

      Website | Email

      Darren Greer – Desire Digital Ltd.

      Darren is a freelance UI and Email Developer who has been building HTML emails and websites for over 16 years. He has experience creating branded emails across a number of industries including marketing, digital, games, technology, recruitment, retail and leisure. Darren has worked on email campaigns for EA Games, Sony Pictures, Adobe, Dell, Bacardi and Tesco. He has extensive knowledge of integrating email builds with a variety email software providers including MailChimp, Campaign Monitor, dotmailer and Pardot (Salesforce). If you’re looking for someone to create your next email or have problems with your current one, Darren is the developer to ask.

      Specialties Include:

      HTML email coding and integration using MailChimp, Campaign Monitor, dotmailer, Pardot (Salesforce), UI, UX, HTML5, CSS3, jQuery, Javascript, CMS, accessibility.

      Work Sample:

      Portfolio

      Contact Information:

      Email |
      Website |
      LinkedIn |
      Twitter

      Charles Hall – MRM//McCANN

      Charles is a digital industry veteran, as he has been professionally designing since 1988 and developing since 1993. He is a resident subject matter expert on email – including user-centered, responsive, interaction and contextual design and other progressive enhancements – for MRM//McCann and its clients, serving a distribution of over 120 million. He is an active member of the W3C HTML for email Community Group and other industry organizations and communities. He also mentors designers, developers, researchers and strategists.

      Specialties Include:

      UX, HTML, CSS, web/UI design, accessibility, performance, strategy and consultation.

      Contact Information:

      Email | Website | LinkedIn

      Dean Harrison – Design-Dean

      Over the last 6 years Dean has been lucky enough to work with a variety of clients both big and small. He always works to create something clean, simple and visually appealing while strengthening the client’s brand. This is an approach that he began to apply to email design over the last 3 years while working at the ESP, Communicator, and has continued to do so since leaving and working as a freelance designer. Dean is always trying to think of new ways to approach email so that his designs standout in the inbox. If you like the sound of a design that’s clean, simple and visually appealing; then he’s your guy.

      Specialties Include:

      HTML, CSS, digital marketing, Adobe Creative Suite, responsive email, branding, print design, product design.

      Work Samples:

      Website | Dribbble

      Contact Information:

      Email |
      Website |
      LinkedIn |
      Twitter

      Sharon Jennings – Email Consultant & Developer at Chic Geek Consultants Ltd

      Her name is Sharon, but online she’s better known as Email Chic Geek. She’s a freelance email developer with almost 8 years’ experience in email marketing, and has specialised in the coding of responsive emails using HTML and CSS. She’s passionate about the quality of her work. She’s built emails for a number of companies over the years, including Disney (via MXW), Channel 4, Chelsea Football Club, EDF Energy and Deliveroo.

      Specialties Include:

      Building rock solid responsive emails, teaching designers how to design for email, best practice in terms of layouts, interviewing and code reviewing potential new recruits.

      Work Sample:

      Portfolio

      Contact Information:

      Twitter |
      Website |
      LinkedIn

      Camille Palu and Miah Roberts – Camiah.com

      Cam and Miah are the ultimate dynamic duo. Creators of email experiments like Minesweeper in email and Bubblewrap in email, they always have something creative and surprising to offer the email community.

      Specialties Include:

      Interactive email, consulting, daily production work, solving rendering issues, creating documentation.

      Work Sample:

      Blog | TABLE TR TD

      Contact Information:

      Email |
      Website

      Jason Samuels – NCFR

      Jason Samuels is a jack of all trades when it comes to technology. He’s skilled at creating responsive email templates and is knowledgeable in email coding and design. Jason is the nonprofit technology manager at NCFR, with experience managing projects, budgets and vendor relations. He took his first crack at creating a responsive email way back in 2012. Now he’s moved on to newer techniques; check out his recent blog on Building a Fab Fluid Hybrid HTML email template.

      Specialties Include:

      CMS, HTML, responsive design, data analysis, software implementation, network administration, Sharepoint, Drupal, technology management, WordPress, webmaster services.

      Contact Information:

      Email | Website | Twitter | LinkedIn

      Stephen Sharp

      Stephen has worked in various interactive mediums since 1995, and specifically in email marketing since 2001. Most of Stephen’s email experience comes from Experian CheetahMail, where he worked as Creative Director for over 8 years. In that time, he owned the creative relationship with well-known clients including: DirecTV, Electronic Arts, STARZ, Pep Boys, Disney, Carnival Cruise Line, Hilton, Neiman Marcus and many others. Stephen specializes in not only email design and responsive/non-responsive email development, but also building successful email creative teams and processes from the ground up. Stephen has dabbled in almost every aspect of email marketing so if you need an email veteran with oodles of experience, contact Stephen today.

      Specialties Include:

      HTML email design and art direction, responsive HTML email development, HTML, CSS, reporting and analysis of email metrics, email creative team management and mentoring, public speaking and email creative best practices presentation, QA testing and troubleshooting.

      Work Sample:

      Website

      Contact Information:

      Website | LinkedIn

      Brian Sisolak – Vice President, Technology Services at Trilogy Interactive

      Brian has been an email marketer for 10 years, with clients including high-profile presidential and senatorial candidates, Fortune 500 companies and national non-profit organizations. As a Senior Strategist with Trilogy Interactive, he is responsible for directing responsive design and overall email optimization. He has also presented on mobile optimization at various conferences so if you’ve got coding questions, he’s your guy.

      Specialties Include:

      Responsive email coding, cross-provider email rendering, DMARC setup and evaluation, deliverability consulting, advanced emails tools such as Mozify and VideoEmail.

      Contact Information:

      LinkedIn | Twitter | Email

      Monika Toth – oDesk

      Monika has been working as an email marketing specialist for more than ten years and has consulted with more than a hundred companies across the globe to address their email needs. She has extensive knowledge and experience with Mailchimp, Campaign Monitor, AWeber, GetResponse, Constant Contact, Custom Contact, GroupMail, Vertical Response, iContact and Infusionsoft, to name a few. If you want to find a professional that knows their way around all the major ESPs, she is your gal.

      Specialties Include:

      Responsive email design & coding, RSS templates, custom email templates, PSD, PDF, JPG to email, HTML, CSS, E-flyers, deliverability and email campaign management.

      Work Sample:

      oDesk Profile

      Contact Information:

      LinkedIn | Email

      Glenn Smith

      Glenn Smith is a HTML Email Developer based in Croydon, Surrey, London, United Kingdom. Glenn is an experienced, professional and friendly digital specialist focusing on HTML Email. A meticulous problem solver, he approaches all tasks with energy and creativity, taking pride in a job well done and enjoy working with like-minded, passionate individuals.

      Specialties Include:

      Email design, email development, email testing, email reporting, creating email template packs, email code review, landing pages

      Work Sample:

      Website | People Per Hour

      Contact Information:

      LinkedIn | Website

      Do you want to be listed here?

      If you are a member of Email on Acid and think you have the chops for adapting templates, creating custom email designs and/or trouble-shooting coding problems, we’d love for you to drop us a line at the email below with the following information:

      • Email Address
      • Company
      • Website
      • LinkedIn Profile
      • Samples of Your Work


      Tutorial: Animated Image Carousel for Email with Ken Burns Effects

      This is a follow up to the Animated Image Carousel for Email tutorial. In this article, we will go over how to add pan and zoom effects, commonly referred to as the Ken Burns effect, to the animated carousel. However, you can also use these techniques by themselves as well. 

      The Ken Burns effect is what many people see on screensavers that display a series of images with slow zooming or panning effects.

      See the completed example here.

      Like the original animated carousel, this example only works with email clients that support CSS animations such as iOS Mail (iPhone, iPad) and Apple Mail.  Other clients will see the fallback content.

      The implementation is pretty straightforward, so let’s dive in!

      Using CSS Transforms

      Zoom Effect

      We can implement a slow zoom effect by using the scale() CSS transform. Enlarging the image to a size larger than its native size may make the image look slightly blurry, so a solution is to use a larger image than the space you intend to fit it in. When it’s scaled up, it will be scaled to its native size.

      .zoom {
        -webkit-animation: effect-zoomin 3s linear infinite;    
      }
      
      @-webkit-keyframes effect-zoomin
      {
         from {
            -webkit-transform: scale(1);
          }
          to {
            -webkit-transform: scale(1.2);
          }
      }
      

      Pan Effect

      We can implement a slow pan effect by using the translateX() CSS transform. The image needs to be a bit enlarged (so you have space to pan without showing gaps), so you’ll apply a scale effect to enlarge the image.

      @-webkit-keyframes effect-panleft
        {
           from {
              -webkit-transform: translateX(20px) scale(1.2);
            }
            to {
              -webkit-transform: translateX(-20px) scale(1.2);
            }
        }
      

      If you want the carousel to be responsive, then you need to use percentages instead of pixels so the panning will shift equally regardless of the size of the image.

      However, in iOS9, translateX() animations using percentages with negative delays only start running after the user scrolls the email. Since we’re using negative animation delays (positive delay animations can go out of sync in iOS9), we’re forced to use an alternative: left margins. Technically, translate is a more “computationally efficient” method to move elements around and produces smoother animations, but I’ve seen that margins do as good a job. (If you combine zoom and pan effects, the smoothness of translate() becomes more apparent.

      @-webkit-keyframes panleft
      {
         from {
            -webkit-transform:scale(1.2);
            margin-left: 10%;
          }
          to {
            -webkit-transform:scale(1.2);
            margin-left: -10%;
          }
      }
      

      Integrating into the Carousel

      We begin with the basic carousel that we have in this example that fades between images.

      To synchronize each image’s effects with the swapping of the images, we set the effect to happen between the first 33% of the animation (for carousels with 3 images).

      @-webkit-keyframes effect-zoomin
      {
        0% {
          -webkit-transform: scale(1);
        }
        33.33%{
          -webkit-transform: scale(1.2);
        }
        100%{
          -webkit-transform: scale(1);
        }
      }
      

      However, because the carousel animation begins fading to the next image at 33%, we want the image to remain in the final state until the transition ends. Therefore, we set 38% as a point to make the image begin to revert back to its original state for the next cycle.

      @-webkit-keyframes effect-zoomin
      {
        0% {
          -webkit-transform: scale(1);
        }
        33.33%{
          -webkit-transform: scale(1.2);
        }
        38%{
          -webkit-transform: scale(1.2);
        }
        100%{
          -webkit-transform: scale(1);
        }
      }
      

      Now we apply the animation timings to the individual images.

      .carousel.effects img{
        -webkit-animation-name: effect-zoomin;
        -webkit-animation-duration: 9s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
      }
      .carousel.effects a:nth-child(1) img{
        -webkit-animation-delay: -9s;    
      }
      .carousel.effects a:nth-child(2) img{
        -webkit-animation-delay: -6s;    
      }
      .carousel.effects a:nth-child(3) img{
        -webkit-animation-delay: -3s;    
      }
      

      And finally, we make it so we can target the individual effects by setting the class name on the images, such as zoom-in, zoom-out, pan-right, pan-left:

      .carousel.effects img.zoom-in{
        -webkit-animation-name: effect-zoomin;
      }
      .carousel.effects img.zoom-out{
        -webkit-animation-name: effect-zoomout;
      }
      .carousel.effects img.pan-right{
        -webkit-animation-name: effect-panright;
      }
      .carousel.effects img.pan-left{
        -webkit-animation-name: effect-panleft;
      }
      

      Animation Timing Functions

      Other than the duration, a key attribute of an animation is the timing function. The animation-timing-function (in our case -webkit-animation-timing-function) property can make the animation speed up or slow down as it goes from one point to another in an animation. The timing function is based on what is called a Bezier function, which you can learn more about in this article.

      Some of the more popular values of the property include: linear, ease, ease-in and ease-out. Linear means there’s no acceleration throughout the animation. Ease speeds up and then slows down the animation. Regardless of the choice of function, the animation takes the same amount of time going from one point to the next.

      For our pan and zoom effects the ‘linear’ or ‘ease-out’ function (where the animation slows down before the transition to the next image) probably work best. Although ‘ease’ is the default value, I prefer using linear because I feel that it works best when the animation fades at the end.

      Carousel HTML

      With our updated CSS (from above), we use the same HTML of the original carousel. We can enable the effects by giving the carousel div the class name “effects”.

      
      

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

      Using Background Images

      You can also implement Ken Burns effects using background images as well. When using background images, instead of using scale and margin, you’d use background-size and background-position. 

      Other Effects And Applications

      So far we’ve used opacity, scale and translate in our examples. CSS3 offers us a lot more cool effects that we can use – a big one is CSS filters. CSS filters offers a further set of effects such as grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, and invert.

      Check out this cool email by Burberry that uses a combination of the above-mentioned effects.

      Coming Next

      I hope this tutorial piques your interest in experimenting with CSS animations!

      The next article in this series will go over how to make the carousel slide from one image to the next instead of fading.