Behind the Email: Launching Community

[ 0 By

Launching the Litmus Community—a hub for any and all conversations about email design, marketing, and code—was an exciting announcement for our team. We didn’t want to launch Community with just any average marketing email. We wanted the message to resonate strongly with users and illustrate the idea that every email marketer and designer has a true home in the Litmus Community.

THE BIG IDEA

Our CEO, Paul, sketched out an idea for the email:

paul-community-email

He wanted to feature the people behind the email marketing community—including, when possible, the face of the individual subscriber who opened the email—and bring the Community to life. Our Content Designer (aka, the mastermind behind the development of this email), Kevin, upped the ante by suggesting we add animation to the email.

The final email managed to pull off both ideas brilliantly:

We received dozens of questions about how we accomplished the personalization and animation on this email, so we wanted to share a few of the techniques with you! If you didn’t get our Community email, you can also view a Scoped version.

HOW’D WE GET THE PHOTOS?

Many of our subscribers were pleasantly surprised to see their own faces when they opened the email. Although we couldn’t pull this trick off for our entire audience, we were able to personalize emails for around 20% of our subscribers.

To achieve this effect, we ran a query of our subscriber list against the list of publicly available profile pictures from Gravatar. Gravatar is a database of globally recognized avatars (hence the name), and is often used to pull profile pictures into platforms like WordPress, GitHub, and StackOverflow. If you have a profile picture on any of those sites, your profile picture is stored in the public Gravatar database.

Once we had the Gravatars matched to our subscribers, it was mostly a matter of hosting the images and pulling them into the email through simple personalization strings, just as if we were including a first or last name:

<img src="https://path.to/%%emailaddress%%.0-0.png" style="min-width: 60px; display: block;" alt="" width="60" height="60" />

Subscribers that didn’t have a Gravatar received a generic version of the campaign, with equally-sized profile pictures of various Community members.

community-non-gravatar

(If you fell into this category, create a Gravatar profile in case we use this technique again!)

ARE THOSE…ANIMATIONS? IN AN EMAIL?

Yep! In clients that supported them, several animations and transitions brought the Community to life in this email. Although email designers primarily work in tables and inline styles, modern CSS techniques are starting to find a way into some campaigns. If you’re unfamiliar with CSS animations and transforms, here are some quick primers:

CSS3 animations
CSS3 transform property

The primary animation occurred upon opening the email: the subscriber’s Gravatar starts out large and shrinks down to fit neatly into the mural of other Gravatars.

This was achieved through the use of CSS3 transforms on each of the nine images that comprised the main Gravatar.  In the code sample below, the @keyframes pulse rule establishes a scale transformation on the images, which shrinks them from a scale of 3x down to 1x:

 .pulse{
       animation: pulse 1s forwards;
       -webkit-animation: pulse 1s forwards;
  }
  @keyframes pulse {
       0% {
            transform: scale(3);
       }
       100% {
            transform: scale(1);
       }
  }
  @-webkit-keyframes pulse {
       0% {
            -webkit-transform: scale(3);
       }
       100% {
            -webkit-transform: scale(1);
       }
  }

We didn’t stop there! Aside from the animated primary subscriber Gravatar, our 20×5 table structure of profile pictures contained 91 other Gravatars that were animated as well. Each cell in the table appeared to fade between two different pictures.

To create the “fade in-fade out” effect, we stacked two profile pictures on top of one another within each table cell. Each cell contained a div, and the first image was set to the background image in that div, while the second image was inserted using a standard HTML image tag:

<div style="background: url('image-one.jpg'); background-size: cover; opacity: 0.5;"><img id="f5" style="min-width: 60px; display: block !important;" alt="" src="image-two.jpg" width="60" height="60" /></div>

The top image faded in and out, revealing the image used as the background of the div. To make it appear random, we created three separate classes of fade styles and applied them at random to each of the 91 divs, so that the images would fade at various paces:

 #f3 {
      -webkit-animation-name: fade;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-duration:12s;
      -webkit-animation-delay: 3s;
      animation-name: fade;
      animation-iteration-count: infinite;
      animation-duration: 12s;
  }
  #f4 {
      -webkit-animation-name: fade;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-duration:18s;
      -webkit-animation-delay: 6s;
      animation-name: fade;
      animation-iteration-count: infinite;
      animation-duration: 12s;
  }
  #f5 {
      -webkit-animation-name: fade;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-duration:10s;
      animation-name: fade;
      animation-iteration-count: infinite;
      animation-duration: 12s;
  }

In older clients where this technique wasn’t supported, users just saw the static image without the fading effect.

Note: Our designer used repeated id’s instead of classes because classes were already being used on the images. Multiple classes on elements sometimes cause issues in various email clients, and an easy hack around that is to use id’s instead. It’s not “valid” HTML, but works for the purpose of email.

CONSIDERATIONS FOR OUTLOOK + OLDER CLIENTS

If you viewed this email in a Webkit client, you saw a full-width, fully-responsive 20×5 table of Gravatars. Unfortunately, some of the techniques used to create that table aren’t universally supported, and we had to make some compromises in our execution.

For Outlook and other non-Webkit clients, we hid five table columns on each side, creating a static 10×5, 600px table. This way, we avoided the need for testing a complicated responsive/fluid table:

community-outlook

For Webkit clients that would correctly render the full responsive table, though, those five hidden columns were displayed using a “display-block” class:

@media screen and (-webkit-min-device-pixel-ratio:0) { td[class="display-block"] {display: block !important; width: 5% !important;} }

COMPROMISES FOR GMAIL

If you opened this campaign in Gmail, you might have noticed there was some slight horizontal scrolling necessary to view it all. This experience was due to Gmail’s interpretation of the CSS attributes for height and min-height.

In the code, each of the cells in the 20×5 table had a 5% width, a max-width and an “auto” height, so that the cells would adjust to whatever window or screen size they were viewed on. In Gmail, the table cells all reverted to the HTML absolute attributes of height and width, resulting in some slight horizontal scrolling for Gmail users, instead of the fully-responsive table as seen in other clients.

community-gmail

We felt that this was still an acceptable experience in Gmail, knowing that a fairly small percentage of our users open our emails within the Gmail webmail environment. Whenever making design compromises, make sure to know your audience! You can save yourself a lot of time and effort by focusing your QA efforts on the email clients that matter the most for your subscriber base. Our designer Kevin put it best:

Modern coding techniques don’t need to work everywhere; if you can optimize for the clients where most of your users open email, you still win.

AND IT WAS RESPONSIVE?

You betcha—we practice what we preach! For the mobile view, we hid the first 5 columns on each side of the table, making the table 10×5 instead of 20×5, and increased the width of the remaining table cells to 10%. We targeted Webkit clients and a mobile width breakpoint of 525px for these changes, making the Gravatars bigger for mobile:

@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 525px) {
  td[class="display-block"] {display: none !important;}
  td[class="width6"]{width: 10% !important;}
}
community-mobile

DID PEOPLE LIKE IT?

That’s why we’re writing this blog post! The response to this particular campaign was unlike anything we’d ever seen. In addition to the overwhelming number of direct replies to the email itself, many people took to Twitter to share their excitement:

 

We were thrilled to see this kind of response surrounding the launch, and even more thrilled to see that excitement carry over into the Community itself.

If you haven’t yet, browse the discussion topics and learning center articles in Community. Then, contribute your questions and your knowledge; we look forward to discussing email with you!

GET OUR NEWSLETTER

Who knows what we might do next? Sign up for our newsletter to find out and to receive our latest email tips, case studies and resources.

HAVE ANY QUESTIONS?

Leave us a comment! We’re happy to help.

  • http://www.twitter.com/notalyce Alyce

    Seeing my face in that email definitely caught me by surprise! Thanks for writing out the full backstory :)

    • http://www.litmus.com Justine, Litmus

      Our pleasure! Thanks for having an awesome Gravatar :)

  • Yang Lin

    Diabetes as a systemic metabolic disease, use of prescription drugs should be strictly complied with , expert advice , so as not to aggravate or delay treatment. Due to the current situation of domestic abuse of antibiotics still exists ,Gatifloxacin hydrochloride,seriously affecting the health of consumers , and for patients with diabetes , the use of antibiotics may also face the risk of blood disorders , leading to the occurrence of various complications.
    Professor Mei-Shu Lai from Taipei College of Public Health , National Taiwan University, and his team conducted a study that found that diabetic patients with oral fluoroquinolones face higher risk of serious blood disorders , Gatifloxacin mesylate,and taking fluoroquinolones different types, different risk of hypoglycemia . The findings , published online on August 14 this year, the “Clinical infectious diseases” magazine.
    Clinically used fluoroquinolones mainly norfloxacin, pefloxacin , etc. , in recent years , and continue to develop multi- fluorinated quinolones and listing of new varieties . If lomefloxacin (Lomefloxacin), Clotrimazole,Fleroxacin (Fleroxacin multi norfloxacin ) and difloxacin (Difloxacin double norfloxacin ) , etc., commonly used in clinical treatment of urinary tract , intestinal , respiratory and skin and soft tissue , abdominal , bone and joint and other infections.
    In fact, the United States, ” New England Journal of Medicine” website has published research reports that are currently widely used antibiotic gatifloxacin (gatifloxacin) have caused side effects in patients with abnormal blood sugar , blood sugar can lead to increased or decreased . Gatifloxacin belongs to the fluoroquinolone class of broad-spectrum antibiotic drugs in one . According to Mei-Shu Lai and other researchers and other shows that taking fluoroquinolones according to the different types , different risk of hypoglycemia , low blood sugar associated with moxifloxacin most common.

    Medchemexpress Can provide the above product,its website:http://www.medchemexpress.com

  • Pingback: 4 Email Examples that are Pushing the Envelope of Email()