Litmus https://litmus.com/blog Blog Tue, 22 Apr 2014 15:28:18 +0000 en-US hourly 1 http://wordpress.org/?v=3.8.3 How to Code HTML5 Video Background in Email https://litmus.com/blog/how-to-code-html5-video-background-in-email https://litmus.com/blog/how-to-code-html5-video-background-in-email#comments Tue, 22 Apr 2014 14:26:40 +0000 https://litmus.com/blog/?p=7833 The Email Design Conference. We knew we couldn’t promote THE Email Design Conference with just any email, which is why we aimed for a forward-thinking and uniquely impressive one. Naturally, we wanted it to be so amazing that people couldn’t help but attend the conference to learn about the tricks we used.]]> Last week, we sent the launch email for The Email Design Conference. We knew we couldn’t promote THE Email Design Conference with just any email, which is why we aimed for a forward-thinking and uniquely impressive one. Naturally, we wanted it to be so amazing that people couldn’t help but attend the conference to learn about the tricks we used.

So, what did we decide to do? We used an HTML5 video background. That’s right: video background in an email.

Click here to view the web version of the email.

In addition, you can view the Litmus test results of the final email sent to subscribers (note some screenshots may be “wonky” due the video animation). The video background worked in the following clients:

  • Apple Mail
  • Outlook 2011 (Mac)
  • Thunderbird latest

As you can see, the HTML5 video degrades gracefully across all clients with the fallback image.

We expected the email to get some attention, but the response we received blew our socks off. We’re proud to report that it prompted hundreds of tweets—generating comments, questions, and praise. With such an overwhelming response, we fast-tracked this blog post breaking down the methodology and process behind the email. Here’s a step-by-step guide to the implementation of this responsive email.

DESIGNING FOR DESKTOP

First off, we created a full-width table as a container for the top section of the email:

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#f2ae44" width="100%">

Within that table, we created a table cell with a “fallback” background image that acted as a static image for when the video was not loaded:

<td align="center" bgcolor="#f2ae44" style="padding: 0 0 50px 0; background-color: #f2ae44; background: url(http://pages.litmus.com/l/31032/2014-04-17/2hs7p/31032/17346/video_bg.jpg) top center no-repeat;background-size: cover;" width="100%">

The fallback background image looked like this:

html5-bg-video-fallback

Creating a fallback background image was necessary for two reasons:

  • The majority of email clients do not support video backgrounds.
  • Some subscribers may have trouble downloading the video background due to large file size.

It was also important to include a background color on both the <table> and <td> to ensure there was a fallback when images were disabled. This step was crucial for subscribers using Outlook, AOL Mail, and other email clients that block images by default, and was especially important for our email since the design uses white text in the video section—we wanted to avoid white text on a white background.

Next, we used a wrapper <div> for the video as the first element in the <td>:

<div class="video-wrap">

Since video backgrounds are only supported in Webkit-based clients (Apple Mail, Outlook 2011 for Mac, and the latest Thunderbird), a Webkit-only media query was used to apply CSS to the <div> only when a Webkit client was detected:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
 div[class="video-wrap"]{
 height: 750px;
 position: relative;
 overflow: hidden;
 padding:0;
 margin:0;}
 }

The CSS applied to the “video-wrap” <div> above specifies a defined height, a relative position, eliminates any overflow of content inside, and eliminates any padding or margins.

Next, we put the <video> inside the “video-wrap” <div>:

<video autoplay="autoplay"loop="loop" style="display: none;">
<source src="https://litmus.com/videos/TEDC-short-clips-tinted-compressed.mp4" type="video/mp4">
</video>

We used an .mp4 version of the video since video background is only supported in Webkit-based email clients. We could have included an .ogg file for subscribers opening the web version in Firefox, but didn’t feel that the extra payload was necessary for our audience.

It’s also important to note that we hid the <video> by default using the display: none; property. Since the <video> only works in Webkit-supported email clients, we used a Webkit-targeted media query to overwrite the inline style to display the video for those clients. Here is the CSS for the <video>:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
video[class="video"]{
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
display:inline-block !important;}
}

Once again, we only targeted Webkit with this bit of CSS. We specified a minimum height and width of 100% to scale the video to the entire width of the “video-wrapper” <div>. Since we previously defined the “video-wrapper” <div> to hide any content that overflows, the video wasn’t displayed beyond the specified dimensions of the “video-wrapper” <div>. The video was also given an absolute position (with 0px from the top and left of the page), a z-index value, and a new display value to show the video in Webkit.

Finally, we used an overlay <div> for the content that would be displayed over the video, placing it directly after the <video> tag:

<div class="overlay">

Here is the CSS for the “overlay” <div>:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
div[class="overlay"]{
height: 100%;
min-height: 100%;
position: relative;
margin: 0 auto;
padding: 0 20px;
z-index:3;}
}

A min-height of 100% was used to fill the entire height of the content area, along with a relative position and a higher z-index, so that the overlaid content would display on top of the video.

Then, we placed the content that we wanted to display over the video inside the “overlay” <div>. The rest of the content followed a standard, table-based structure so that it would render properly in all email clients.

<div class="overlay">
<!— STANDARD EMAIL HTML / CONTENT OVER VIDEO —>
<table border="0" cellpadding="0" cellspacing="0" width="600">
...
</table>
</div>

Designing for Mobile

Unfortunately, no major mobile email clients support the use of HTML5 video backgrounds. Most of our own mobile audience uses iOS, which displayed an unwanted play button when video was present.

html5-video-play-button

HTML5 video background on iPhone

We needed a way to disable the video from rendering on iOS devices, so we used targeted media queries specific to the device dimensions and pixel ratios of iOS devices to disable the video and ensure that button wouldn’t be rendered:

/* iPAD MEDIA QUERY */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
video[class="video"]{display: none !important;z-index:-1;}
}

/* iPAD 1 & 2, iPAD MINI MEDIA QUERY */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
video[class="video"]{display: none !important;z-index:-1;}
}

/* RETINA iPAD MEDIA QUERY */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
video[class="video"]{display: none !important;z-index:-1;}
}

/* iPHONE 5 MEDIA QUERY */
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 1){
video[class="video"]{display: none !important;z-index:-1;}
}

/* iPHONE 5S MEDIA QUERY */
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2){
video[class="video"]{display: none !important;z-index:-1;}
}

/* iPHONE 2G/3G/3GS MEDIA QUERY */
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1){
video[class="video"]{display: none !important;z-index:-1;}
}

/* iPHONE 4/4S MEDIA QUERY */
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
video[class="video"]{display: none !important;z-index:-1;}
}

Using these targeted media queries, we prevented the video from displaying on these devices by setting the display property to none. As an extra measure, a lower z-index ensured that the fallback background image in our <td> was displayed.

However, we still wanted to support the video background on mobile Webkit for viewing the web version or just to showcase the responsiveness on desktop, so the following CSS was applied:

/* WEBKIT, CHROME, SAFARI MEDIA QUERY @ 600px */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 600px) {
div[class="video-wrap"]{
height: 570px !important;}
}

/* WEBKIT, CHROME, SAFARI MEDIA QUERY @ 480px*/
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 480px) {
div[class="video-wrap"]{
height: 440px !important;}
video[class="video"]{
top:-75px;
left:-200px;}
}

The mobile CSS changed the height of the “video-wrap” <div> to accommodate for smaller image and font sizes and changed the positioning of the <video> to create a better alignment since its true dimensions were not changed.

POSITIVE FEEDBACK GALORE!

Video backgrounds aren’t something you see often in emails. It took a lot of thought to implement it correctly, but it paid off—people loved it:

Click here to read more tweets!

If you have any questions, please do not hesitate to ask in the comments below, or better yet, in the Litmus Community!

Get awesome emails—and details about The Email Design Conference

Don’t miss our next mind-blowing email—sign up to receive news and information about The Email Design Conference.

]]>
https://litmus.com/blog/how-to-code-html5-video-background-in-email/feed 6
Going Responsive With Limited Resources: A Look at Edinburgh Bicycle’s Journey https://litmus.com/blog/edinburgh-bicycle-journey-responsive-design-limited-resources https://litmus.com/blog/edinburgh-bicycle-journey-responsive-design-limited-resources#comments Mon, 21 Apr 2014 18:17:41 +0000 https://litmus.com/blog/?p=7816 We’re constantly preaching about the importance of designing mobile-friendly emails. However, as Jason describes, there is a lot of confusion about mobile email design strategies and how to choose which one is right for you. It comes down to two aspects: the percentage of your subscribers opening on mobile and the resources you have available to put towards a mobile strategy.

While responsive email design is a powerful strategy, designers can find it difficult to wrap their heads around, and many feel as if they do not have the resources available to make it a priority. However with so many amazing responsive templates and guides available, implementation is plausible—even for small teams!

Edinburgh Bicycle Cooperative is a perfect example. With 100 employees and only five people in their promotions/marketing department (none of whom are focused solely on email!), they were still able to optimize their emails for viewing in mobile, desktop, and webmail environments. Despite their limited resources, responsive design was a must for them. Martin Stewart, Web Developer at Edinburgh Bicycle Cooperative, explained why they decided to use responsive design:

It’s the best way to improve the user experience for customers using mobile devices. And, as the general trend is for more and more people to be using mobiles, it’s really important to make our emails mobile-friendly.

MINIMAL RESOURCES, GREAT RESPONSIVE DESIGN

To choose a mobile strategy, you must take a close look at your audience. On what devices are they most frequently opening your emails? Do you have a high percentage of mobile opens? Edinburgh Bicycle Cooperative analyzed both their email and web audience before choosing which approach was right for them. Martin stated,

I’ve seen a steady increase in the number of customers using mobile devices to read our weekly email (and access our website in general), so it was a bit of a “no-brainer” to optimise for mobile. I want to give the user as good of an experience as possible, so going responsive seemed like the best way of achieving this.

Let’s take a look at what they did!

edinburgh-desktop

Desktop view

edinburgh-mobile

Mobile view

Through the use of media queries and fluid layout techniques, the template switches to a single column design when viewed on a mobile device. This enables text to expand to fill the entire width of the screen, making it easy to read. In addition, all of the buttons are touch-friendly and body copy is 14px, while headlines are 26px—making them completely legible on any screen size!

Edinburgh Bicycle Cooperative also uses media queries to hide and stack content when viewed on small screens. For example, the social sharing links, navigation bar, and phone number are all removed from the top of the email when viewed on mobile devices.

edinburgh-desktop-top

Desktop view (top)

edinburgh-mobile-top

Mobile view (top)

In addition, the navigations bar towards the bottom of the email turns into stackable, clickable buttons.

edinburgh-desktop-bottom

Desktop view (bottom)

edinburgh-mobile-bottom

Mobile view (bottom)

By stacking the buttons on top of each other, rather than side by side, they are extremely touch-friendly on the small screen of a mobile device. Through the use of media queries, the entire email is easy to read and interact with regardless of which environment it is read in.

OPTIMIZED FOR IMAGES OFF

With numerous email clients blocking images by default, it’s necessary to optimize your emails for viewing in images-off environments. Techniques like ALT text, background colors, bulletproof buttons, and live text are perfect for making this happen. Edinburgh Bicycle Cooperative includes almost all of them!

edinburgh-images-off

Through the use of these techniques, the email is completely legible AND easy to interact with when images are disabled! However, using styled ALT text could have taken it even a step further. In addition, their bulletproof buttons could use a little work (we’ll get to this later!).

EXCITING RESULTS!

Martin and the rest of the team at Edinburgh Bicycle have been thrilled with the results they’ve seen since going responsive. He explained,

I’ve been pleasantly surprised with the results of the responsive email. There’s been a 13% uplift in mobile clicks, and new visits on mobile were up 30%.

Impressive! They have also seen an 8% increase in opens. Since you can’t see the email before it’s opened, it’s not clear why making an email mobile friendly would lead to an increase in open rates. The increased open rate may be a result of inbox optimization (from name/subject line/preheader text). Also, over time, after the redesign, Edinburgh Bicycle Cooperative may have trained their subscribers to expect a better post-inbox email experience. This could also be a reason for the uptick in open rates.

A FEW SUGGESTIONS

Rendering issues

While they did a great job with this email, there are a few rendering issues—specifically in Outlook (rendering issues in Outlook? Shocking!). Here’s what the email looks like in Outlook 2010:

edinburgh-outlook2010

Compared to ideal renderings of the email, the results in Outlook include some less-than-desirable results.  The email is aligned to the left, includes Times New Roman fonts throughout (rather than their brand font), contains mis-aligned images, and some of the buttons are rendering strangely. Put simply, the Outlook results don’t measure up to the beautiful results in other email clients and on mobile devices!

It’s possible that Edinburgh Bicycle Cooperative has a very small percentage of their subscribers opening in Outlook (which would make sense since they are a mostly B2C company!), and therefore it may not be a big concern for them. However, if they are seeing a large proportion of Outlook opens, we suggest making some of the following changes to their code:

  • Apply font declarations to individual HTML elements, rather than relying on font inheritance from parent elements. This will prevent fonts from reverting to Times New Roman in Outlook.
  • Define image heights and widths for main images, which will enable images to render and line up properly.
  • Center the first container cell <td> so the entire email will remain center aligned.

In addition, they should consider restructuring some HTML elements with defined table widths. This would fix alignment issues that were occurring. You can check out the original HTML code, as well as the altered HTML.

Lastly, in order to make the buttons “fully” bulletproof, they should add a display: inline-block declaration and use the border property (rather than padding) for the main background color.

Button Before

<div style="float:left; padding-top:50px;" class="wraith-div">
 <a href="http://www.edinburghbicycle.com/products/revolution-wraith-14" style="color:#594d4d; font-weight:bold; text-decoration:none; padding:13px; border:1px solid #919191; background:#ffffff; font-size:16px;">Find out more <span style="color:#919191; font-size:13px">&gt;</span></a>
 </div>

Button After

<div style="float:left;" class="wraith-div">
 <a href="http://www.edinburghbicycle.com/products/revolution-wraith-14" style="color:#594d4d; font-weight:bold; text-decoration:none; border:13px solid #ffffff; background:#ffffff; font-size:16px;font-family:Arial,Helvetica,Sans-Serif;display:inline-block;">Find out more <span style="color:#919191; font-size:13px">&gt;</span></a> </div>

While social media and email integration was a big trend, we think that social sharing links can be a waste of valuable space in email. Emails should include relevant information with a specific purpose—and social sharing buttons don’t usually make the cut in terms of relevancy and importance. There are, of course, exceptions; for example, if you’re sending an email about a contest that involves social media.

Turns out social media icons are rarely clicked and can even be a distraction—in both email and websites. HubSpot found that Twitter, LinkedIn, and Facebook sharing links in their emails get about a 0.01% CTR (that’s about 5-9 people clicking for every 100,000 messages sent). Taloon.com saw a 11.9% increase in CTA clickthrough on their product page by removing social sharing buttons. Jani Uusi-Pantti of Taloon.com reasoned

Maybe those share buttons were just extra clutter and distraction on a very good spot.

Why distract your subscribers with social sharing buttons? Have them focus on the content and calls-to-action that matter!

Inbox optimization

Optimizing your from name, from address, subject line, and preheader are crucial — a subscriber’s experience with your email starts long before they open your email. Since some email clients (Outlook, iPhone, Windows Mobile 7) will display the first few lines of text in your email as “preview” or “snippet” text, this portion of the email can be optimized to follow up on the subject line or display other useful information. Let’s check out how this email renders in the inbox:

edinburgh-preheader

While they do have a preheader—“A carbon beauty. Sub 9.5kg for sub £1k”—since it’s so short the “View this email online,” “Share this email,” and even “Unsubscribe” links show up, too. Do you really want one of the first things your subscribers see to be an unsubscribe link? I think not! They should have used this prime real estate to get their subscribers’ attention by further encouraging the open.

Blue links on iOS devices

It’s not uncommon to find phone numbers, addresses, and dates styled blue and underlined when viewing email on an iPhone or iPad. These links can trigger different events, such as making a call or creating a calendar event. Towards the bottom of the email, Edinburgh Bicycle Cooperative mentions opening and closing times of their different locations—all which turn blue in iOS.

edinburgh-blue-links

While blue links definitely make sense for some emails (such as a save the date!), they aren’t necessary in this case. In addition, they take away from the branding and color scheme. In order to remove or restyle the blue links, Edinburgh Bicycle Cooperative could have have added a simple bit of embedded CSS in the <head> their HTML. This fix could change the color of the link to better tie in with their branding.

GET THE BEST MOBILE RESOURCES

Interested in moving towards responsive design? We’ve put together a mobile readiness kit containing our best stats, infographics, and articles on mobile to make understanding mobile audiences easier.

CTA-mobile-email-kit
]]>
https://litmus.com/blog/edinburgh-bicycle-journey-responsive-design-limited-resources/feed 2
How Removing a Featured Newsletter Article Increased CTR 13% https://litmus.com/blog/how-removing-a-featured-newsletter-article-increased-ctr https://litmus.com/blog/how-removing-a-featured-newsletter-article-increased-ctr#comments Tue, 15 Apr 2014 19:11:42 +0000 https://litmus.com/blog/?p=7765 Newsletters are an email marketing staple. Whether it’s Tuesdays at 3pm, every third Monday at 11am or every morning at 9am, the process of assembling a newsletter is a familiar one to most of us.

Although marketers are increasingly questioning their merits, newsletters still retain value. They circulate a variety of content to users and allow marketers to easily maintain consistency in their email cadence. Ideally, they also have targeted, valuable content and aren’t just being sent for the sake of being sent—but that’s a subject for another post.

Many of you know Litmus for our monthly newsletter, which features email tips, guides and case studies. Did you know we also publish a second monthly newsletter called Email Design Monthly? It was launched as a Litmus hack week project and has retained an extremely active audience ever since.

Email Design Monthly is a Litmus-curated collection of email resources from around the web. We want to provide marketers and designers with the best information available (whether it’s on our site or not), and this newsletter allows us to do so each month.

TESTING FEATURED ARTICLES

As Email Design Monthly has evolved, we’ve run a few A/B tests to find the optimal way to deliver this kind of content. As originally designed, the newsletter includes one featured article, followed by a marketing section and a design section.

email-design-monthly1

To increase performance, we wondered what would happen if we removed the featured article concept, giving equal visual importance to all articles. We anticipated two potential outcomes:

  • Without an eye-catching main article, more subscribers would dive deeper into the newsletter to find something that interested them.
  • The lack of hierarchy could overwhelm readers, resulting in less click activity.

To test this egalitarian concept, we sent two versions of our most recent edition. One version included a featured article, and the other did not. In the second version, the “featured” article was still the first article listed, but it was bundled in with the other marketing articles:

edm-featured2

Version A (w/ Featured Article)

edm-no-feature2

Version B (w/o Featured Article)

WHAT HAPPENED?

Although we don’t always see dramatic differences in our A/B tests, this experiment gave us some clear results:

  • When designated as featured, the first article received 36% more clicks.
  • When the featured concept wasn’t present, each of the other articles received 9% more clicks on average.
  • The version with no featured article got 13% more people to click at least one article.

These click rate disparities suggest that featured articles play a major role in a subscriber’s perception of the entire newsletter. If the featured article isn’t appealing, readers are less likely to look beyond that article to find something of interest.

If there is no featured article to influence their perception, subscribers seem more likely to skim to find an article that interests them. This version had much deeper engagement at the bottom of the newsletter compared to the one with the featured article.

SHOULD WE STOP FEATURING SPECIFIC ARTICLES?

Not necessarily, as results weren’t completely in the test variant’s favor. The featured article version won on an interesting metric: the number of links clicked by each subscriber. On average, subscribers who received that version clicked 3 links, while their peers in the non-featured group each clicked only 2.5 links.

That particular result suggests that subscribers who saw the featured article were likely to click it purely on principle of it being featured. They came back to the newsletter to keep clicking on other articles.

For the purposes of choosing a winner, the 13% unique click-through rate increase on the version with no featured article is the key metric. I’d much prefer that more people find at least one article appealing so that they continue to find value in the publication and don’t unsubscribe from lack of interest. A next step will be to increase total clicks in that version while still maintaining a high unique click-through rate.

Remember, these results could obviously vary from month-to-month, company-to-company and even article-to-article. The only way to know what impact a featured article could be having on your newsletter is to test it! When you do, evaluate performance based on these metrics:

  • Unique click-through rate: What percentage of subscribers click at least one article?
  • Total clicks: How many clicks overall did you generate?
  • Clicks per clicker: Divide the number of total clicks by the number of unique clicks to get the average number of links each clicker clicked.
  • Difference in click-through rate on the featured article.
  • Difference in the click-through rate on each of the other articles.

SUBSCRIBE TO EMAIL DESIGN MONTHLY

Not a current subscriber? Sign up below! We’ll send you our favorite email marketing resources from around the web each month. (Plus, you’ll get to be a part of our test next time!)

]]>
https://litmus.com/blog/how-removing-a-featured-newsletter-article-increased-ctr/feed 2
Scalable, Fluid or Responsive: Understanding Mobile Email Approaches https://litmus.com/blog/defining-and-understanding-mobile-email-approaches https://litmus.com/blog/defining-and-understanding-mobile-email-approaches#comments Thu, 10 Apr 2014 19:42:54 +0000 https://litmus.com/blog/?p=7586 Mobile is a wildly popular topic in email design, which makes sense—emails opened on mobile devices have grown more than 400% since 2011, and mobile email opens hit the 50% mark in 2013. We’ve talked before about how important mobile has become to email marketers and the need to optimize campaigns for mobile audiences. But it’s not always clear which strategy works best for mobile audiences.

To make matters worse, many marketers are confused about what strategies actually exist. Eliminating the possibility of not doing anything at all, mobile email design can roughly be broken down into three categories:

  • Scalable Design
  • Fluid Design
  • Responsive Design

For marketers to choose the approach that best suits their needs, it’s important to understand the differences between these three approaches.

Scalable Design

Let’s begin with what many email marketers are currently using: scalable design. Scalable design can be defined as any design that works well across both desktop and mobile without using code to adjust table or image sizes, or display or hide content between the two platforms. While we’re using the term “scalable” to describe this approach, you may have also heard these concepts referred to as mobile aware, mobile friendly, agnostic or mobile first.

definingmobile-scalable

Scalable designs are typically the easiest to implement. Since scalable emails don’t adjust the widths of tables or images between devices, and don’t use CSS media queries (we’ll get to those later) to swap content or change the size of text, it’s important to use a number of techniques to keep the content of scalable emails enjoyable not only on desktop, but when viewed on mobile devices as well.

  • A simple (usually single-column) layout that scales down nicely.
  • Large text that is readable on screens of all sizes.
  • Large, touch-friendly calls-to-action.

For more information on scalable design, Lauren’s post on the differences between scalable and responsive design is a great place to start. Our Anatomy of the Perfect Mobile Email infographic is another excellent resource.

One thing to keep in mind when designing scalable emails (or any email) is the Android “Grid of Grim.” In some Android email apps, messages are not scaled at all, resulting in the need for subscribers to scroll both vertically and horizontally. Ideally, you should place the most vital information in your campaign on the left side of your email—keeping things like logos, important copy, and CTAs visible without having to scroll horizontally.

When optimized using the techniques above, scalable emails are a great way for marketers to engage with their mobile audiences without the need to drastically change process or introduce new workflows. They typically require no extra coding or knowledge beyond what most email designers already know—it’s just a matter of making mobile users a priority and altering the overall email layout to accommodate their needs.

Check out these great examples of mobile-optimized, scalable emails:

While scalable emails are good for teams that need a quick solution, more advanced solutions allow for better control over campaigns on different devices.

Fluid Design

In between scalable and responsive is what we term “fluid” design. Fluid emails use percentage-based sizing to make the width of tables and images adapt to the screen size on which they are viewed, similar to what is known as “liquid” layouts on the web. Fluid emails are similar to scalable ones, in that they don’t purposefully alter the layout or content of an email, but they have the added benefit of having content “flow” to fill space on the screen. For this reason, fluid designs typically work best for text-heavy layouts since there’s less control over how copy and images relate to each other.

definingmobile-fluid

Implementing a fluid layout is relatively simple. Instead of using pixels for sizing tables, you use percentages.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    ...Content...
</table>

However, Campaign Monitor makes a good point that you will need to constrain the width of your emails on larger screens. If left completely fluid, emails on these screens will be too wide and the copy will be hard to read.

fluid-wide

Line lengths can become unwieldy in unconstrained fluid layouts

While websites can use the CSS max-width property to constrain the layout to a specific size, this technique isn’t widely supported in email clients. However, we can use alternative methods for limiting the width of a layout. The best way to achieve this is by wrapping the content of your email in a container table with a fixed width.

<table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper">
    <tr>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
                ...Content...
            </table>
        </td>
    </tr>
</table>

Then, you can make that fixed width fluid by targeting it in a media query:

@media screen and (max-width: 525px) {
    table[class="wrapper"]{
        width:100% !important;
    }
}

Now, your tables and images will flow beautifully on most mobile devices, while still being readable on larger screens, just like some of these great emails:

It should be noted that fluid email designs are becoming less common these days. Fluid tables and images are almost always coupled with responsive design techniques to allow for the most control over email designs. Don’t let that discourage you from using fluid techniques, though! It’s still an excellent way to optimize for mobile if you don’t have the resources to devote to a completely responsive template.

Responsive Email

Responsive email takes everything from scalable and fluid emails and builds on it by adding more control via CSS media queries. While media queries are also used to help contain fluid layouts, it’s a simple implementation of media queries—nothing too advanced was happening. Responsive email, on the other hand, uses media queries to change the layout of emails, adjust the size of text, images, and buttons, and, in some cases, hide or even swap content between desktop and mobile devices.

definingmobile-responsive

CSS media queries allow you to target things like device and screen size to set up conditional styles for those sizes.

@media screen and (max-width: 525px) {
    img[class="hide"]{
        display:none !important;
    }
}

Using media queries, you can perform some impressive email acrobatics. Content can be shifted around, hidden, and even swapped out, providing email designers with amazing control over their campaigns on mobile devices.

For example, you can take a complex, multi-column layout on desktop and streamline it into a single-column, easy-to-scan, easy-to-scroll design on mobile—complete with larger text and more touch-friendly buttons.

defining-mobile-responsive-switch

Responsive design can be an amazing tool, but some designers have found it hard to wrap their heads around, which is why we made our How-to Guide to Responsive Email Design. Anna Yeaman over at STYLECampaign put together an amazing video that goes into what is possible with responsive email design. Our friends at Campaign Monitor also have a wonderful guide on the subject. Finally, if you don’t have the resources to build your own responsive templates, our friends at Stamplia recently built 7 Litmus-exclusive responsive email templates.

While responsive email design is the most powerful tool for dealing with mobile, designers should be aware that media queries and responsive techniques don’t work everywhere. Depending on your audience, though, you can start using responsive techniques today. We suggest starting small by using simple techniques (enlarging fonts on small screens for example) and then gradually working your way to more advanced concepts as you grow more comfortable with media queries. Using mobile-aware techniques as a foundation for your responsive emails allows you to design an email that falls back gracefully in clients that don’t support media queries.

Here are some of our favorite responsive emails:

Which Strategy Is The Best?

Once you understand the differences between scalable, fluid, and responsive email design, you can determine which strategy works best for your team. If you lack the know-how or resources to implement a responsive campaign, both scalable and fluid strategies are a great way to keep your emails friendly for mobile subscribers. However, if you have the time to go fully responsive, the added control can be exactly the thing needed to set your campaigns apart from the competition.

Scalable Design

Perfect for:

Testing the mobile waters

Reliable rendering across clients and devices

Teams with limited resources

Fluid Design

Perfect for:

Simple layouts

Emails with mostly text that can flow

Teams with limited resources

Responsive Design

Perfect for:

Large mobile audiences

The most control over layout

Teams with knowledge of media queries

 

Learning More

It’s also important to understand that these three strategies don’t represent every approach for an email campaign. Many designers find that borrowing elements of each strategy and using them together is the way to go. As always, the most important thing is to understand your audience and tailor your solution to fit their needs.

To help, we’ve put together a mobile readiness kit containing our best stats, infographics and articles on mobile to make understanding mobile audiences easier.

CTA-mobile-email-kit
]]>
https://litmus.com/blog/defining-and-understanding-mobile-email-approaches/feed 6
Introducing Kevin, Senior Developer https://litmus.com/blog/introducing-kevin-senior-developer https://litmus.com/blog/introducing-kevin-senior-developer#comments Wed, 09 Apr 2014 16:40:40 +0000 https://litmus.com/blog/?p=7711 With over eight years experience as a web developer and a love for working with small teams, Kevin is the perfect addition to Litmus! Alongside Eddie, Jordan, Luca, Alan, and Drew, he’ll be working on the product team as a senior developer.

MEET KEVIN, THE NEWEST ADDITION TO OUR TEAM!

kevin-thompson

Almost a decade ago, Kevin started in the web development world slicing and coding table-based layouts. Today, he loves solving problems using a wide range of technologies and programming languages including SASS, CoffeeScript, Ruby on Rails, and Go. While he’s had experience working at small agencies, large corporations, and even as a freelancer, he is most passionate about working with small teams (which is why he’ll fit in great at Litmus!).

Kevin enjoys mentoring fellow developers and has started apprenticeship programs at his last two companies. In addition, he organizes and hosts (and sometimes speaks!) at a monthly meetup called Full Stack, which brings together local designers and developers in Northern San Diego.

Aside from web development, video games are his biggest hobby. He enjoys the social aspect of gaming and is always interested in finding other designers and developers to play with online. Connect with him! His Xbox and Playstation gamertag is SignalException.

Outside of work and gaming, Kevin loves spending time with his wife and two daughters. He’s a lover of breakfast foods and claims to cook a mean French Toast and Minnie Mouse pancakes. To burn off the morning treats, he runs the occasional 5k while pushing his daughters in a jogging stroller and, while he ran a half marathon once, he thinks once is enough!

Join us in welcoming Kevin to the team! You can give him a shout out on Twitter.

INTERESTED IN JOINING OUR TEAM?

Between catered lunches, top notch equipment, 28 vacation days, and so much more, Litmus is a great place to work. And, guess what? We’re hiring!

Check out our open positions →

]]>
https://litmus.com/blog/introducing-kevin-senior-developer/feed 0
Gmail Continues to Shift the Market Share Landscape https://litmus.com/blog/gmail-continues-to-shift-the-market-share-landscape https://litmus.com/blog/gmail-continues-to-shift-the-market-share-landscape#comments Mon, 07 Apr 2014 21:15:41 +0000 https://litmus.com/blog/?p=7649 The effects of Gmail image caching continue to impact market share stats. Four months after the initial roll-out of image caching and automatic image downloads, Gmail opens are starting to even out. We saw another percentage point increase this month, bringing Gmail to 11% of total opens—a 285% increase since December.

gmail-opens-march-2014

Mobile Gmail apps for both Android and iOS download images automatically and serve them via Google’s caching service. As users update to the new mobile Gmail apps, we’re seeing image caching affect mobile open rates, specifically opens made with the Gmail app on Android. As Gmail open rates rise, there has been a corresponding drop in Android opens. Since January, Android opens have dropped 34%—now representing 8% of opens.

gmail-android-tracking

THE IMPACT OF CACHING ON GMAIL

When Gmail automatically downloads and caches images, those cached images—including open tracker pixels—are stored on Gmail’s servers. Gmail then loads the same images from the same servers for everyone—regardless of whether they open using Gmail in a web browser or a Gmail Android or iPhone app.

gmail-reporting

As a result, Gmail opens made in a browser and on mobile Gmail apps look the same—there’s no way to distinguish webmail from mobile. While automatic image downloads mean more accurate open rates and a better subscriber experience, image caching eliminates the ability to determine the user’s device. To be clear, this only affects opens that occur in Gmail, either in a web browser or in a Gmail mobile app. Emails sent to Gmail accounts but opened in other mail apps are not affected. The silver lining is that open rates for the native email client on Android—which has support for responsive emails—are now more accurate.

MINIMAL CHANGES TO TOP TEN

Looking at recent changes to the top 10, Apple Mail took back its #5 spot and bumped Android down to #6—not surprising given the dip in Android opens.

After hitting 51% in November and December, mobile opens appear to have been on a continuous decline. Thanks to image caching, what appears to be a mobile loss can be partially attributed to Gmail opens—reported as an increase in webmail opens. Detectable mobile opens now represents 47% of total opens, whereas webmail opens are at 25%.

environment-growth-march-2014

Desktop opens also increased 1 percentage point to reach 28% of opens. This rise can mostly be attributed to Outlook, which claims 14% of opens. It’s still holding steady at the #2 spot!

As always, keep in mind that some email clients may be over- or under-reported due to automatic enablement of images and/or image blocking. Tracking trends over time is the best way to monitor open data for email!

]]>
https://litmus.com/blog/gmail-continues-to-shift-the-market-share-landscape/feed 7
April Fools’ Email Roundup: Did They Leave Us Laughing or Unamused? https://litmus.com/blog/april-fools-email-roundup-did-they-leave-us-laughing-or-unamused https://litmus.com/blog/april-fools-email-roundup-did-they-leave-us-laughing-or-unamused#comments Wed, 02 Apr 2014 20:38:42 +0000 https://litmus.com/blog/?p=7596 April Fools’ Day gives email marketers (and marketers in general!) the perfect opportunity to show their brand personality through witty and funny techniques. Here at Litmus, we anxiously monitored our inboxes all day (yes, we are email nerds) waiting for the April Fools’ emails to roll in. And, while our inboxes were cluttered with them by the end of the day, we were left feeling pretty unimpressed.

Don’t get us wrong, there were some absolute gems that left the team laughing, but, for the most part, we saw a lot of the same tactics used. In particular, many retailers (over)used variations of “No joke!” in their subject lines, which became mundane very quickly.

Let’s take a look at what ended up in our inboxes this April Fools!

JOINT EMAIL MARKETING CAMPAIGNS

This was somewhat unexpected! Clearly, joint marketing occurs all the time, but I was surprised that it occurred in the context of April Fools’ email campaigns.

Timbuk2 and Anchor Brewing

aprilfools-timbuk2

View email

Timbuk2—whose emails tend to be witty and fun (even their transactional ones!)—and Anchor Brewing joined forces for one of our favorite April Fools’ emails! They partnered together to develop the Dehydration Backpack—a “highly technical, exceptionally practical, keg backpack.” Not only did they include an entertaining video on the landing page, but the text throughout the email was witty as well. My favorite part? “Limited Edition – only 1 unit made.” And, don’t worry, “Frat boys love it!”

The idea behind this campaign was unique, funny, and definitely made us laugh! It was an April Fools’ email success.

TOMS and Uber

aprilfools-uber-toms

View email

Another April Fools’ email collaboration came from TOMS and Uber. In their email, they launched ShuberX, “the next step in transportation.” Like Timbuk 2 and Anchor Brewing, they also linked to a video in their email to explain ShuberX. However, there were no details about the product in the email itself and I wish there had been! From looking at the email alone, you’d have no idea what the product was (although, from the punny name, it’s likely one would know it’s a joke!).

The video is entertaining and definitely made me laugh! ShuberX combines “the comfort of TOMS with the mobility of Uber.” Essentially, they replace Uber’s cars with cardboard boxes (it’s all about sustainability!) and drivers pick up their recipients and “drive” around while wearing TOMS shoes. One of Uber’s engineers asks, “What better way to activate our riders than to literally physically active them?” Very cheesy but we liked it.

And, while ShuberX is a complete fabrication, at the bottom of the landing page there is information about a real partnership between TOMS and Uber. For every new Uber driver that enters promo code “shuberX,” $10 will be donated to TOMS.

LOTS OF REPETITIVE SUBJECT LINES, NO JOKE

Some retailers tried to cut through the April Fools’ inbox clutter by declaring not a joke or not foolin’ in the subject line. While we understand the sentiment in this tactic, it lacked originality and actually did the opposite of their intent—it caused their subject lines to blend in rather than stand out. And, we weren’t the only ones who noticed!

While we commend their efforts to do something with the holiday, a little more creativity could have gone a long way.

UrbanDaddy

Subject line: No Jokes, Just Whiskey. And Leather Briefcases.

aprilfools-urbandaddy

View email

Levi’s

Subject line: These savings are no joke. (+free shipping on everything)

aprilfools-levis

View email

Urban Outfitters

Subject line: $50 Off Your Purchase – Today Only: And we’re not foolin’.

aprilfools-urbanoutfitters

View email

Shoppe by Scoutmob

Subject line: win $2,000 of whatever you want on Shoppe by Scoutmob (seriously. no April foolin’.)

aprilfools-shoppe

View email

TigerDirect.com

Subject line: 256GB SSD $109…Home Theater $39…With prices like this, the joke’s on us!

aprilfools-tigerdirect

View email

Alloy Apparel

Subject line: No Joke: 25% Off!

aprilfools-alloy

View email

Banana Republic

Subject line: 41% off? It’s no joke!

aprilfools-bananarepublic

View email

OUR FAVORITE APRIL FOOLS’ EMAILS!

Lomography

aprilfools-lomography

View email

Like all of Lomography’s emails, this one is full of great imagery and has an infographic-like feel. And, the spoof is hilarious! In this email they launch the Lomography Super Photo Spray, which enables you to take photos on any kind of 35mm film without having to use a camera simply by spraying the film roll.

The email includes a step by step guide about how to product works. They really worked hard to make this fake product seem real! The final step of the process states,

Please note that due to the intensive strength of the super spray, a regular photo will take approximately 24 hours to produce and a long-exposure can take up to 2 weeks.

This long (and hilarious!) time frame is also present in the video, which is linked to from the email. The video is also great so check it out!

aprilfools-lomography-video

Code School

aprilfools-codeschool

View email

Code School also had a nice April Fools’ email in which they launched a new class, Try Flux. Try Flux is a course that lays the foundations for time travel (that’d be pretty nifty, eh?). The email is simple in both design and content, all while being unique and fun!

The landing page is also great!

aprilfools-codeschool-lp

It continues the fun, witty language but reveals that it has a zero percent chance of working and there is “a lot of equipment currently on fire.” They also admit that “long-distance time travel isn’t quite ready for testing, but short-distance time travel is.” They then encourage their subscribers to travel back to yesterday’s launch of “Surviving APIs with Rails.” Clever way to promote a course!

ThinkGeek

aprilfools-thinkgeek

View email

ThinkGeek also had a great April Fools’ email that was not as blatant as other emails—upon first glance some of the products in the email looked real! However, it was actually chock full of joke products, like the Mr. Beard Machine (picture a Keurig but instead of coffee, you get any type of facial hair) and a Unicorn Drinking Horn.

When I was going through the email, the product descriptions were so detailed and realistic that I was actually unsure whether some of them were real or not! The product pages were even more detailed. It wasn’t until I would try to add a product to my cart that I realized their trick had worked on me.

aprilfools-thinkgeek-lp

How great are the “gotcha” landing pages? I love that they use it as an opportunity to cross sell actual products that are somewhat similar to what their subscriber was trying to purchase.

Hotel Tonight

aprilfools-hoteltonight

View email

This email really made me laugh! First of all, obviously unsubscribes are associated with emails, so I found it especially witty. Secondly, I thought the whole concept of the “Ultimate Unsubscribe” was creative and unique! Everyone can relate to wanting to get away from it all so most subscribers would find it comical.

SOME OTHER GOOD ONES…

DID WE MISS ANY GOOD ONES?

Did we miss your favorite April Fools’ email? Share it with us in the comments section!

Get email inspiration delivered straight to your inbox

Subscribe to our newsletter to receive tips, tricks, stats, and plenty of inspiration packaged in a beautiful monthly newsletter.

]]>
https://litmus.com/blog/april-fools-email-roundup-did-they-leave-us-laughing-or-unamused/feed 3
Gmail Does It Again: The New Promotions Tab https://litmus.com/blog/gmail-does-it-again-the-new-visual-promotions-tab https://litmus.com/blog/gmail-does-it-again-the-new-visual-promotions-tab#comments Wed, 26 Mar 2014 19:24:41 +0000 https://litmus.com/blog/?p=7546 Note: This post has been updated to reflect discoveries made about the new grid view after Gmail launched it to an initial wave of users.

If one topic dominated email marketing conversations in 2013, it was definitely Gmail tabs. The auto-organization of consumer inboxes struck general fear and uncertainty in the hearts of email marketers everywhere.

General consensus among the email community is that brands sending quality messages won’t run into any trouble with tabs. Subscribers will seek out valuable content they genuinely want in the Promotions tab.

Buckle your seatbelts, my friends. Gmail has done it again.

The Gmail team has released the next iteration of the Promotions tab to users who opted-in to try it. Taking a page out of the Pinterest playbook, Gmail is bringing large graphics and infinite scrolling into the Promotions tab:

gmail-promo-tabs

Source: Official Gmail Blog

Gone are the days of representing an email with just a from name, subject line and preheader text. Gmail will now represent each email in the Promotions tab with a large image, displaying messages in a grid format with heavy emphasis on visuals rather than just plain text.

Other recent Gmail developments like Quick Actions gave marketers the option of adding additional functionality to select messages. Grid view in the new Promotions tab affects all messages. However, subscribers are still able to choose between the current list view or the new grid view, so marketers should plan their emails with both experiences in mind.

HOW IT WORKS

To control how your emails show up in the new Promotions tab, you’ll need to implement specific markup—called schemas—into the HTML of each of your emails. Gmail outlines all the details, including code samples, on their Developer site.

The code allows you to specify the featured image that should represent your message in the Promotion tab grid view:

richview

You can use GIF, PNG or JPEG images, but animated GIFs used as featured images will be rendered as static. Additionally, featured images are cached in the same way that Gmail now caches images inside emails.

For emails that don’t contain this specific code, Gmail will use an algorithm to determine which image from your email should be featured. While this algorithmic gamble can sometimes turn out well, it is also resulting in some oddly cropped photos and text:

In some cases, they are forgoing an image altogether and displaying plain text instead. In this example from Kayak, the text shown in the featured image area was pulled from the fourth article in the email:

To have a strategic presence in this grid view, design a featured image to represent your message and implement it using Gmail’s code. Otherwise, you risk a sloppy appearance in the inbox at the whim of Google’s algorithm. We have created a free tool to help you with the implementation process!

The sender name and subject line still come from your actual email, as they do today. For the grid view, the sender name displays up to 20 characters, and up to 75 characters for the subject line, so keep these numbers in mind if you have a high percentage of users opening your emails in Gmail.

The sender image is pulled from your company’s verified Google+ profile. If you haven’t created one, now might be a good time to set one up! For senders that don’t have a verified Google+ profile, the logo portion of the message is the first letter of your sender name in a serif font:
Email without verified Google+ profile

NEW DEVELOPMENTS FOR ADS

Similar to how ads are integrated in the current Promotions Tab, ads are also included in the new grid layout. Apart from a small icon in the top-left corner and a different background color, ads in the new Promotions tab look the same as any other email.

gmail-ad-row

NEXT STEPS

Notably absent from Gmail’s official post on this development is any mention of how these changes will be reflected in their mobile apps. We are assuming that this initial trial phase is desktop-only, and mobile developments will be saved for a final release.

Keep in mind that this new Promotions tab redesign is still in an opt-in trial phase—so it’s likely to only affect Gmail power users and devotees for now. Elements could change or disappear when/if it is rolled out to all Gmail users. There are many unknowns at this point, but we’ll keep you updated as we find out more.

However, we’d still recommend preparing for the new Promotions tab now, as subscribers who opt-in to participate in the trial already have access to this new layout.

Your preparedness also depends on how many of your subscribers are opening your emails in a Gmail environment. Worldwide, Gmail currently accounts for about 10% of opens.

Use our free Which Gmail Tab? tool to quickly send a test and see if your email is destined for the Promotions tab.

gmail-which-tab

Find out which Gmail Tab your email will appear →

For messages headed to the Promotions tab, we’ve developed a handy Gmail Promotions Tab Code Generator to help you create the code you’ll need to implement into your HTML source file.

gmail-promo-tabs

Make your email Gmail Promotions Tab friendly →

GET OUR NEWSLETTER

Stay current on any future Gmail updates and receive our latest email tips, case studies and resources.

]]>
https://litmus.com/blog/gmail-does-it-again-the-new-visual-promotions-tab/feed 18
Behind the Email: Launching Community https://litmus.com/blog/behind-the-email-launching-community https://litmus.com/blog/behind-the-email-launching-community#comments Tue, 25 Mar 2014 20:22:03 +0000 https://litmus.com/blog/?p=7396 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.

]]>
https://litmus.com/blog/behind-the-email-launching-community/feed 3
Introducing Julie https://litmus.com/blog/introducing-julie https://litmus.com/blog/introducing-julie#comments Mon, 24 Mar 2014 19:40:43 +0000 https://litmus.com/blog/?p=7206 We’re thrilled to introduce you to the newest member of our team!

MEET JULIE, VP OF FINANCE

julie-headshot

As a CPA with over 15 years of experience in the wild world of finance and a passion for working with early stage SaaS companies, Julie will be joining us as our new VP of finance. She’ll be responsible for building out the finance and HR functions at Litmus, all while helping us grow and scale.

Before starting at Litmus, Julie worked at uTest, where she built the finance team and contributed to significant top line growth. When she’s not crunching numbers, Julie spends her time running around after her two young (and very active!) boys, Kevin and William, and also enjoys cooking.

INTERESTED IN JOINING OUR TEAM?

Between catered lunches, top notch equipment, 28 vacation days, and so much more, Litmus is a great place to work. And, guess what? We’re hiring!

Check out our open positions →

]]>
https://litmus.com/blog/introducing-julie/feed 0