Litmus https://litmus.com/blog Blog Fri, 27 Mar 2015 16:03:23 +0000 en-US hourly 1 http://wordpress.org/?v=4.1.1 Creative Navigation Patterns in Email Design https://litmus.com/blog/creative-navigation-patterns-in-email-design https://litmus.com/blog/creative-navigation-patterns-in-email-design#comments Thu, 26 Mar 2015 20:00:30 +0000 https://litmus.com/blog/?p=9552 Our second Community Contest has officially drawn to a close. Like the first one, which asked people to push the limits of ALT text in email, we wanted to see what email designers could do when thinking outside the (in)box.

While we’re all familiar with simple navigation bars and links in a campaign, this latest contest challenged Community members to explore creative navigation patterns in email. We were absolutely floored by the entries that came in. Although we’d love to crown multiple winners, we had to pick just one entry to take home the prizes from Litmus and our friends over at Code School.

The winner is…

The Community didn’t make it easy, but we had to award this month’s prize to Justin Khoo for his excellent Reader Mode email.

 

Reader ModeClick ‘Edit Email’ to see it live in Builder

With this technique, Justin provides a solution for a common complaint on mobile devices: too much scrolling. Although scrolling is a natural and commonplace interaction on mobile, too much scrolling can get frustrating. Justin alleviates this frustration by enabling a “reader mode” in email. When enabled, a fixed top bar provides navigation between articles in an email. Those articles are then beautifully animated when sliding in and out of the reading pane.

reader-anim

Justin makes use of a number of interesting techniques. He uses the checkbox hack to add interactivity to the email and relies on CSS transitions for animation. Digging into his Builder example, you can see that he even uses some cutting edge CSS in the form of viewport sizing (vw) and the calc() function. He even wrote a blog post on his website detailing the process.

While these properties and techniques don’t work everywhere, the email falls back to a simple newsletter that is easily scrolled when reader mode isn’t supported. Techniques like this are perfect for progressively enhancing your campaigns, though.

The Prizes

For his efforts, Justin will be getting 2 free months of both Litmus and Code School, along with some goodies from both of us. Be sure to join in next month’s Community Contest for your chance to win some cool stuff.

Stunning Examples

There were a number of other entries, all with great navigation examples. From gooey navigation buttons to sliding menus and creative mobile sharing options, it’s hard to convey the smiles on our faces when reviewing all of the excellent ideas being shared. Here are a few of our favorites: Rémi Parmentier, one of our previous winners, crafted a beautiful gooey navigation button.

 

Josh Wayman shows off a great sliding menu for mobile devices.

 

Finally, Dane Robbins gives mobile users some extra options for taking action in an email.

 

Head on over to the official Community Contest thread to see all of the entries. Dig around in the Builder examples to understand what’s going on and, even though the contest has ended, feel free to share your own navigation examples by leaving a comment.

View all entries →

Thank You, Code School

A special thank you to Code School for sponsoring this month’s Community Contest.

Founded in 2011, Code School is an online learning destination for existing and aspiring developers that teaches through entertaining content. With more than 40 courses covering JavaScript, HTML/CSS, Ruby, Git, and iOS, Code School pairs experienced instructors with engaging, high-quality content that’s been inspired by its community and network of partners. More than one million people around the world come to Code School to improve their development skills and learn by doing. For more information, visit www.codeschool.com.

Join the Community

Not a Litmus Community member? Join the best minds in the email industry as they discuss the latest email news, cutting-edge techniques, and solutions to even the trickiest email design problems. Don’t forget to check back for next month’s Community Contest and enter for a chance to win more great prizes.

Join the Community →

]]>
https://litmus.com/blog/creative-navigation-patterns-in-email-design/feed 0
Episode 10: Outlook Keeps Word Rendering and Yahoo Supports Media Queries https://litmus.com/blog/episode-10-outlook-keeps-word-rendering-and-yahoo-supports-media-queries https://litmus.com/blog/episode-10-outlook-keeps-word-rendering-and-yahoo-supports-media-queries#comments Mon, 23 Mar 2015 19:16:46 +0000 https://litmus.com/blog/?p=9536 In the tenth episode of The Email Design Podcast, hosts Kevin Mandeville and Jason Rodriguez discuss the future and fall of Outlook and applaud Yahoo on their recent updates. Be sure to follow along and join in the discussion on Twitter using #EmailDesignPodcast.

Watch the full video above or listen to the audio-only version below.

Download the MP3

In this episode:

Follow the Email Design Podcast

Subscribe to the Email Design Newsletter to get updates on the Email Design Podcast along with a curated selection of our favorite articles and resources on email design.

]]>
https://litmus.com/blog/episode-10-outlook-keeps-word-rendering-and-yahoo-supports-media-queries/feed 2
Responsive Email 101 Webinar Q&A: HTML & CSS Basics https://litmus.com/blog/responsive-email-101-webinar-qa-html-css-basics https://litmus.com/blog/responsive-email-101-webinar-qa-html-css-basics#comments Mon, 16 Mar 2015 16:23:43 +0000 https://litmus.com/blog/?p=9528 As mobile opens continue to rise (they’ve increased over 500% in the past four years!), so has the talk of mobile email strategies like responsive design. In our Responsive Email 101: HTML and CSS Basics webinar, we took a look at the mobile email landscape, the foundations of creating responsive emails, and why these techniques are crucial to improving the subscriber experience. We also covered email client support and demonstrated how to code a responsive email from scratch.

Weren’t able to make it? Don’t worry. We recorded the whole thing! Plus, we’ve even made the slides available.

Get the slides + recording →

We had a full house for the webinar, so while we tried to answer as many questions as we could during the Q&A portion, we weren’t able to get to them all. Below, we’ve rounded up some of the most commonly asked questions.

GETTING STARTED WITH RESPONSIVE DESIGN

Do you think the rise in mobile opens has reached its saturation, or do you think it will continue to increase?

While we’ve seen a huge jump in mobile opens over the past four years—over 500%—we’ve already seen its growth start to flatten out a bit. However, we think mobile opens will continue to rise slowly with the proliferation of more mobile devices.

What is the difference between fluid, adaptive, and responsive design?

Fluid design consists of relative widths with no media queries. Adaptive design consists of fixed or relative widths at multiple viewports/breakpoints. Responsive design consists of relative widths at multiple viewports/breakpoints. Here are some great resources to help you better understand the differences between them:

Which approach has the best email client support—fluid, adaptive, or responsive?

From a pure support perspective, fluid emails have the best support. Both adaptive and responsive design require the use of media queries, which have limited support.

However, it does not mean that fluid design is the best approach for emails. Fluid design is a good compromise for creating a mobile friendly version of an email, but maintains the full-width design of the email at its core. It really comes down to your specific audience, where they open their emails, and your design strategy for optimizing your subscribers’ experiences.

What is a media query?

A media query (@media) is a conditional statement that triggers a set of CSS for a specific set of rules. You can learn more about media queries and email with the following resources:

Is there any data on the effect that responsive design has on emails?

You bet! We recently did a report with MailChimp on the effect that responsive design and email testing has on clicks. We found that responsive design results in a 15% increase in clicks for mobile users.

With mixed support and so many workarounds, moving towards responsive design seems overwhelming. How do I get started?

With such limited support from current email clients, responsive email design can be hard to implement. Our first recommendation is to educate yourself as much as possible about responsive email design before diving in. We recommend checking out the resources at MailChimp, Campaign Monitor, and Litmus to help guide you.

If you aren’t comfortable diving right into actual development of responsive email, consider using simple drag-and-drop email editors to build your emails. Products like StampReady, Canvas, and MailChimp will take the hassle out of email coding for you.

If you are comfortable diving into code, check out Litmus Builder, a code editor built specifically for email design. Try implementing basic responsive email techniques as a start—it will provide a great experience for users who open their email in clients that support responsive design (mainly Apple devices).

Also, be sure to preview your emails before sending! You can send emails to yourself using PutsMail or see what your email looks like in over 40 different email clients with Litmus.

If you ever have any questions or run into coding problems with responsive email design, just head over to the Litmus Community for help.

Do you recommend any responsive frameworks?

Yes! We recommend checking out ZURB’s responsive framework Ink (heads up: this framework requires a workaround to render correctly in Outlook 2007-2013). If you like Sass, Faust Gertz made a Sass version of Ink and Alex Ilhan has a Sass email framework called Zenith. In addition, Dan Denney from Code School has an awesome email workflow called Emayll and Brian Graves has an amazing collection of Responsive Email Patterns.

OPTIMIZING FOR CLIENTS THAT DON’T SUPPORT MEDIA QUERIES

If a client doesn’t support responsive design, what will display in that client?

Every single email client renders emails differently, especially when it comes to mobile email apps. Essentially, if they don’t support responsive design, it will fall back to some version of the full-width email. Sometimes it will be a “zoomed out” full-width version, sometimes it will be a scaled up “zoomed in” version, and sometimes a client like Gmail may automatically increase font sizes to make a “mobile friendly” version of the email.

The best thing to do is to always preview your email before sending it. You can send emails to yourself using PutsMail or see what your email looks like in over 40 different email clients with Litmus.

What is the best way to approach responsive design for clients that don’t support it, like the Gmail app for Android? What type of “backup” should we have in place?

We recommend making your emails mobile friendly to begin with. This means having a minimal amount of email content and designing for a mobile use case, such as larger font and button sizes. A one-column design out of the box makes it easier to render your email for Gmail app, too.

For those comfortable with advanced coding techniques, the best way to develop your emails and account for lack of responsive support in the Gmail app is the “hybrid coding approach.” It essentially uses a mobile-first approach and scales the email up to a desktop width using some email-specific hacks. You can read more about how to implement the hybrid coding approach here:

CODE QUESTIONS

Can you put your media queries in a separate CSS document and link to that document in the head?

It is not recommended to use linked stylesheets (<link> tag) for emails due to limited email client support. All styles should be embedded in the <head> of an email.

What are the most common breakpoints for responsive email design? How many breakpoints is ideal?

With the most opens occurring on iPhones, it’s important for your emails to start implementing breakpoints at a minimum of 414px, which is the width of the new iPhone 6 Plus.

There is no “ideal” number of breakpoints for a given design—it all comes down to your individual design and optimizing the experience for your subscribers. It is ideal to account for at least one breakpoint to make your email responsive.

Do you recommend using tables or divs?

Email design absolutely requires using a table-based layout and structure. The reason for this is a lack of support for <div>’s by email clients, like Outlook desktop clients, as it pertains to the actual structure and foundation of the HTML. Some email clients do support <div>’s and can be extremely powerful to use for certain hacks and workarounds, especially for responsive email.

Can you change the align=“left” or align=“right” attributes within a table using media queries? Or, is it only for changes to style?

You can’t technically change the align HTML attribute in CSS, but there other workarounds. You can wrap each individual table in an empty <div> and use the float property or the display property to swap tables around. ActionRocket has an great blog post on using this advanced technique.

With responsive emails, how is support for background images? What are the ideal dimensions for saving background images if I want them to be full-width?

Background images are very well supported for mobile email clients. There are no “ideal” dimensions for saving background images. You should always try to have relatively small file sizes so your subscribers can download your email quickly. You can use the Image Check feature in Litmus to test your image download speeds.

Do styles have to be inline to get them to work with many of the email clients?

Yes. Several email clients remove any CSS styles in the <head> of emails, notably Gmail, making inlining CSS styles a necessity for emails.

Is it better to use pixels or ems for font size in emails?

It is better to use pixels for defining font sizes in emails, as many email clients do not support ems.

Is it possible to replace images using media queries?

It is possible to replace background images using media queries, but not inline images (<img> tags).

What is the best way to optimize images so they render sharply on retina displays?

For retina, you typically want to make the image twice the size of its final display. For example, a 100×100 image should actually be 200×200, but scaled down to 100×100 using HTML attributes or CSS styling. Typically, this technique should only be used for smaller images that need to be sharp—not large images such as photos. There are a couple of great discussions on the Litmus Community about designing for retina:

Does display:none; or display:block; work in responsive email?

It’s not a matter of whether the display property works in responsive email, but whether it is supported by email clients. Like most CSS, it’s supported by some and not others. It is most notably not supported by Gmail.

Is there any email client equivalent of a web browser’s “inspect element?” It would be useful to troubleshoot my responsive designs.

There isn’t an exact equivalent of a web browser’s “inspect element.” However, the Interactive Testing feature in Litmus is extremely helpful. Also, Litmus Builder has 1-click testing and re-testing functionality to make iterating on email very quickly.

Otherwise, we would recommend just troubleshooting in a WebKit browser (Chrome or Safari). Since the majority of mobile opens happen on WebKit, which has great CSS support, developing and troubleshooting in a WebKit browser is a good replication of what will happen for those email clients.

Is padding universally supported across email clients?

Padding is almost universally supported across email clients. The margin property, on the other hand, does not have great support. We highly recommend using padding.

How do you stack three columns properly using alignment? Should you use center alignment in addition to left and right? Or, do you not recommend using three column layouts at all?

Yes, you can stack three columns in responsive email design, although your options for stacking and reversing them are more limited or more difficult to do than a two-column design. The alignment of the tables depends on how you want to stack them, but you would typically align all three tables to the left.

ActionRocket has an great post on an advanced technique for reverse stacking tables.

LITMUS BUILDER

What is Litmus Builder?

Litmus Builder is the world’s first code editor built for email designers by email designers. It’s completely free to create, edit, and share emails.

Is Emmet built directly into the Litmus Builder?

It is! Our Emmet integration makes shorthand coding a breeze.

Where can we find responsive email templates within Litmus Builder?

Litmus Builder has a gallery of 20+ email templates in the Templates section. All templates are completely free to use. Check out our full help documentation for Litmus Builder.

See your responsive design on iPhone, iPad, and Android

Responsive email lets you fine-tune your designs for an increasingly mobile audience. Put your new responsive skills to the test with screenshots of how your email looks in popular mobile, webmail, and desktop inboxes.

Try Litmus free for 14 days!

Get started today →

]]>
https://litmus.com/blog/responsive-email-101-webinar-qa-html-css-basics/feed 3
2015 State of Email: The Email Marketer’s Guide to Creating Successful Campaigns https://litmus.com/blog/2015-state-of-email-the-email-marketers-guide-to-creating-successful-campaigns https://litmus.com/blog/2015-state-of-email-the-email-marketers-guide-to-creating-successful-campaigns#comments Thu, 12 Mar 2015 15:13:33 +0000 https://litmus.com/blog/?p=9513 The email landscape is constantly changing. Between the introduction of new anti-spam laws, more email apps, and new iPhones, email marketing has never presented more challenges—or opportunities. As an email marketer focused on success, it’s crucial to stay on top of every new development.

In our 2015 State of Email Report, we analyze the biggest email developments and provide tons of actionable tips and advice to keep you on top of your game.

Download the report →

Here’s a sneak peek of what you’ll find inside.

Optimize for the inbox

Larger screen sizes for iPhone mean that more characters are displayed in your from name, subject line, and preview text. The iPhone 6 Plus even boasts three lines of preview text instead of the two lines shown on previous models.

The new version of Outlook for Mac also introduced support for preview text, displaying it as the third line in the inbox (after the from name and subject line).

Ensure that you’re using a recognizable from name, a compelling subject line, and preview text that works well with your subject line.

Send relevant emails

In October 2014, Gmail launched a new email app—Inbox by Gmail. Like Gmail’s tabbed inbox, Inbox automatically sorts emails into categories. Emails in each category are then bundled together, with standard bundles for emails about travel, purchases, finance, and other topics.

Bundling cleans up users’ inboxes, but also has the potential to hide messages from easy view. Sending timely, useful, and relevant content is the perfect way to encourage subscribers to read your emails.

Adhere to spam laws

In July 2014, the Canadian Anti-Spam Law (CASL) went into effect. Essentially, CASL is an opt-in law for organizations and ESPs based in Canada, or for anyone sending emails to Canadian subscribers. Subscribers must give proper consent to receive your emails before you can message them.

You’ll want to brush up on the differences between implied and express consent, review your unsubscribe process, and ensure your organization is keeping detailed records. Check out the report for all the details!

Changes in your open data

Have you noticed an increase in your Gmail opens lately? Gmail opens saw a major increase in 2014 after making changes in 2013 that automatically turns on images in emails. Image caching further complicated open stats, making it difficult to tell the difference between a webmail and mobile open in Gmail.

Using automatic unsubscribe to your advantage

Gmail also introduced an automatic unsubscribe option, which allows users to unsubscribe directly from the top of a message.

Many senders have found that including an unsubscribe link near the top of their emails actually helps reduce spam complaints—the theory being that subscribers are less likely to mark an email as spam if the unsubscribe link is more accessible.

You can take advantage of this functionality by including the “List-Unsubscribe” line in your mailing header.

Send from a private domain

In an effort to stop fraudulent emails coming from @yahoo.com and @aol.com addresses, Yahoo Mail and AOL Mail made changes to their DMARC (Domain-based Message Authentication, Reporting, and Conformance) policy.

If you’re sending an email from an ESP, and using an @yahoo.com or @aol.com address, your email will be rejected by DMARC-compliant providers.

Luckily, the fix is as simple as sending from a private domain rather than a free email account address. For example, all of our emails come from an @email.litmus.com.

Join the first email marketing community

The Litmus Community is the perfect spot for marketers and designers to share information, start discussions, and work out problems together.

Want tips about how others are handling CASL? Or, advice on how to set up a private domain? Tap into the Community for help. It’s completely free, so everyone is welcome to participate, learn, share, troubleshoot, and contribute.

GET YOUR COPY OF THE 2015 STATE OF EMAIL REPORT

Stay up-to-date on the latest email updates and advances. Download our free report!

Download the report →

]]>
https://litmus.com/blog/2015-state-of-email-the-email-marketers-guide-to-creating-successful-campaigns/feed 10
Episode 9: The Impact of Responsive Email, the New Outlook App, and Email Design Contests https://litmus.com/blog/episode-9-the-impact-of-responsive-email-the-new-outlook-app-and-email-design-contests https://litmus.com/blog/episode-9-the-impact-of-responsive-email-the-new-outlook-app-and-email-design-contests#comments Fri, 20 Feb 2015 16:00:57 +0000 https://litmus.com/blog/?p=9490 In the ninth episode of The Email Design Podcast, hosts Kevin Mandeville and Jason Rodriguez discuss the science of clicks, Microsoft’s stellar new client, and mind-ALTering emails. See what we did there? Be sure to follow along and join in the discussion on Twitter using #EmailDesignPodcast.

Watch the full video above or listen to the audio-only version below.

Download the MP3

In this episode:

Follow the Email Design Podcast

Subscribe to the Email Design Newsletter to get updates on the Email Design Podcast along with a curated selection of our favorite articles and resources on email design.

]]>
https://litmus.com/blog/episode-9-the-impact-of-responsive-email-the-new-outlook-app-and-email-design-contests/feed 3
The Tyranny of Tables: Why Web and Email Design are So Different https://litmus.com/blog/the-tyranny-of-tables-why-web-and-email-design-are-so-different https://litmus.com/blog/the-tyranny-of-tables-why-web-and-email-design-are-so-different#comments Thu, 19 Feb 2015 21:42:08 +0000 https://litmus.com/blog/?p=9496 Email marketing is a lot of things: a great investment, very personal, hard to do well, and, most importantly, extraordinarily powerful for any business. Behind the beauty and power of email lies something else. For those just getting started with designing and building campaigns, email can be overwhelmingly frustrating and confusing.

A lot of designers assume that, since email uses the same technology as the web–HTML and CSS–it can be built in the same way. Unfortunately, due to the constraints of the dozens of popular email applications in the wild, email has its own design and coding paradigms. To fully harness the power of email marketing and design, you first need to understand how email design differs from web design.

Designing on the Web

A lot of first-time email designers are web designers tasked with implementing email marketing for their company. Their typical day involves designing and building websites using HTML and CSS.

If you’re coming from the web world, you’re likely used to building websites using the typical web standards approach:

  • You mark up content with HTML using semantic elements
  • You style that content with CSS, usually via an external stylesheet
  • You use JavaScript to enhance that content with interactions and dynamic elements

When laying out content on a page, you can use proper HTML and CSS. Semantic elements—like section, header, footer, article, and headings and paragraph tags—add meaning to the content within. External CSS is then used to provide structure and style to that content.

This separation of content and presentation is what has allowed web designers to build such beautiful and maintainable experiences for the web.

What makes all of it possible are web browsers. While many designers have memories of dealing with old versions of Internet Explorer, modern web browsers have rallied around these web standards. Despite a few inconsistencies, they all support HTML and CSS exceptionally well. Plus, the inconsistencies are only spread across a handful of browsers.

Contrast that to the current state of email clients and you’ll start to understand why email design is a different beast entirely…

Email Clients & Rendering Engines

Unlike the web, which has just a few browsers handling most traffic, emails are read in a huge variety of email applications, or clients. In fact, Litmus Email Previews currently allows you to test in over 40 different email clients. And those are just the most popular.

The problem with email design is that all of these email clients support different subsets of HTML and CSS. And the difference in support is oftentimes drastic. As we’ve written about before, email clients use rendering engines to display the content of an email. Unfortunately, desktop, webmail, and mobile clients all use different rendering engines.

Looking at Campaign Monitor’s Ultimate Guide to CSS, you can see how much support differs between email clients. The most notable lack of support comes from the desktop versions of Microsoft’s Outlook, which is powered by Microsoft Word.

Guide to CSS
Campaign Monitor’s CSS Guide

Looking at the Box Model and Positioning & Display sections, we can start to understand why laying out emails can be so problematic.

Web designers rely on CSS properties like display, float, width, height, margin, and padding to structure web pages. While these properties can be applied to most HTML elements, they are supported across web browsers and make laying out content relatively easy.

Unfortunately, most versions of Outlook have little to no support for any of them. And, since Outlook still holds a respectable amount of market share, most designers need to make sure that their campaigns display as intended when viewed in Outlook.

So, if email designers can’t rely on typical web design approaches, how can we design robust email campaigns?

Tables are the Only Solution

In a nutshell, email designers have to take a page out of the web design handbook…circa the late 1990s. Back when web browsers hadn’t even heard of the web standards movement, designers relied on HTML tables to structure web pages. Since tables worked everywhere, they were the de facto standard.

HTML tables are likewise supported by every major email client. They are pretty much the only thing that is universally supported when it comes to email design. So, if we want email campaigns to display relatively well across email clients, we need to use HTML tables to lay out our campaigns.

It can be jarring to use tables if you’re coming from building modern web sites, but if you stick to the following when coding emails, you’re off to the right start.

Instead of This…

Use This

<div>

<table>, <tr>, <td>

<p>

<td>

<h1>, <h2>, <h3>, etc.

<td> or <span>

<link type=”text/css”>

<td style=””>

margin

<td style=”padding:;”>

float

multiple table cells and align

Curious how that actually looks in an email? Check out this example template for how to properly use HTML tables to structure content and CSS to style everything.

This lack of support for standard HTML and CSS shouldn’t hold you back from designing great emails, though. As we’ve mentioned before, you can still pull off some amazing things in email, even using HTML5 and CSS3 by progressively enhancing your table-based designs.

Always Test Your Designs

While tables are absolutely necessary for designing email campaigns, there are still a lot of things that can go wrong. The varying levels of support across email clients and their rendering engines leads to a lot of display issues, which is why you need to constantly test your email campaigns before pushing send.

Litmus Email Previews allows you to easily test any campaign in 40+ email apps, including desktop, webmail, and mobile clients. Try out Litmus free for 7 days and make sure your campaigns look good everywhere… even Outlook.

Start your free trial →

]]>
https://litmus.com/blog/the-tyranny-of-tables-why-web-and-email-design-are-so-different/feed 5
Episode 8: Our Top 5 Predictions for Email Design in 2015 https://litmus.com/blog/episode-8-our-top-5-predictions-for-email-design-in-2015 https://litmus.com/blog/episode-8-our-top-5-predictions-for-email-design-in-2015#comments Wed, 11 Feb 2015 14:55:25 +0000 https://litmus.com/blog/?p=9480 In the eighth episode of The Email Design Podcast, hosts Kevin Mandeville and Jason Rodriguez make their top five predictions for 2015. What will the new year bring for the email design industry? Be sure to follow along and join in the discussion on Twitter using #EmailDesignPodcast.

Watch the full video above or listen to the audio-only version below.

Download the MP3

Our Top 5 Predictions for 2015

  1. Gmail will finally support responsive design (but won’t tell us when they do).
  2. Inbox by Gmail will fail.
  3. More experimental emails (video, interactions, animations, etc.) will hit the inbox.
  4. Outlook (desktop) will fall to 5% market share. Yahoo will buy a mobile email client.
  5. We’ll see more in-depth personalization using things like context, history, and geolocation.

Follow the Email Design Podcast

Subscribe to the Email Design Newsletter to get updates on the Email Design Podcast along with a curated selection of our favorite articles and resources on email design.

]]>
https://litmus.com/blog/episode-8-our-top-5-predictions-for-email-design-in-2015/feed 3
Pushing the Boundaries of Creative ALT Text in Email https://litmus.com/blog/pushing-the-boundaries-of-creative-alt-text-in-email https://litmus.com/blog/pushing-the-boundaries-of-creative-alt-text-in-email#comments Fri, 06 Feb 2015 16:45:19 +0000 https://litmus.com/blog/?p=9456 This past January we held our very first Litmus Community Contest. Community Contests will be held monthly and encourage Community members to explore new techniques and push the boundaries of email design, all while showing off some impressive email design skills.

Our first contest asked members to try out new, creative uses for one of our favorite aspects of email design: ALT text. With 43% of emails blocking images, providing alternative text (ALT text) is one of the quickest wins for email designers. We wanted to see if Community members could push ALT text beyond just basic styling.

While only a few members entered, we were blown away with the results—so much so that we couldn’t pick one winner. Instead, we crowned both Michael Muscat and Rémi Parmentier the winners of the very first Community Contest.

Winning Entries

While a lot of email marketers are familiar with using ALT text to provide information about images even when they’re disabled, few have really explored anything beyond the basics. That’s not the case with our two winning entries, which both utilized some truly cutting edge techniques for optimizing emails even in the absence of images.

Michael Muscat’s Space Invaders

While not technically using ALT text, Michael Muscat’s winning entry shows off an alternate method for handling email clients that disable images. In an homage to the 70’s classic Space Invaders, Michael uses ASCII characters to provide a fallback for an included video of the vintage video game.

Space Invaders
With images on.
Space Invaders
With images off.

When the video is disabled, the ASCII block characters act as pixels and allow Michael to build a wonderful representation of the familiar Space Invaders screen.

What really pushes this entry into new territory is Michael’s use of CSS3 animations to actually make those mock-pixel graphics move, mimicking the coming alien onslaught and the back-and-forth motion of the laser cannon.

Check out the code with Litmus Builder →

Rémi Parmentier’s Shadow DOM

For his winning entry, Rémi took advantage of one of the more experimental browser features, the shadow DOM, to gain deeper access to ALT text and make it dynamic.

Shadow DOM
Animated ALT text.

The shadow DOM allows individual HTML elements to be broken down into even more granular elements, giving designers even more control over their display and use. In this example, Rémi accesses the ALT text and combines it with CSS pseudo-elements and the content property to add even more ALT text. Finally, using CSS transitions, he animates between the ALT text when a user hovers over it.

Check out the code with Litmus Builder →

Explore More in the Community

You can see all of the entries, as well as read more about how Michael and Rémi pulled off their email acrobatics, in the Community Contest discussion thread. Be sure to check out all of the entries’ code examples using Litmus Builder.

Join us next week as we announce the theme of the second Community Contest, along with some new prizes.

Not a Litmus Community member?

Join the Community →

]]>
https://litmus.com/blog/pushing-the-boundaries-of-creative-alt-text-in-email/feed 4
Use Testing to Continuously Learn More About Your Audience https://litmus.com/blog/use-testing-to-continuously-learn-more-about-your-audience https://litmus.com/blog/use-testing-to-continuously-learn-more-about-your-audience#comments Mon, 02 Feb 2015 16:37:52 +0000 https://litmus.com/blog/?p=9429 In order to produce well-performing campaigns, it’s crucial to send emails that not only render well, but also resonate with your audience. But, how do you know what type of content, calls-to-action (CTAs), and design work best for your audience? It’s easy: test! Through testing, you can gain insights into your subscribers and their preferences that help you send strategic, optimized, and better-performing campaigns.

The team over at Emerson, a manufacturing and technology company, wanted to generate interest in their product by offering a free trial via email. While they knew their B2B audience consisted mostly of conservative, middle-aged engineers, they were unsure which type of offer would resonate best—and ultimately produce the most leads.

So, they set out to test…and test…and test again!

While their results were surprising, they now know which types of email perform well with their audience. More importantly, they have instilled testing in their process, allowing them to learn even more about their subscribers over time.

A/B TEST: FREE TRIAL VS. WHITE PAPER

Emerson’s first test was to see whether including a white paper alongside a free trial would generate more leads than simply a free trial alone. Their hypothesis was that the white paper would distract from the free trial, producing fewer leads. They sent 50% of their audience the “free trial only” email, and the other 50% received the combination free trial and white paper version.

Email1

Control email

Email2

Test email

This test also pitted two CTAs against one another: the CTA in the control email enticed readers with a “Free trial and installation” while the test version asked subscribers to “Download the white paper.” In both emails, the CTAs are in the same place and use the same color—one in the header image and one at the bottom of the email. In the test email, there is also a secondary CTA in the sidebar for a “Free trial and free installation.”

The subject line also drew attention to the inclusion of the white paper, stating “[White Paper] The Impact of Failed Steam Traps on Process Plants.” The control email used “Free Trial & Installation: Capture Energy Savings with Automated Steam Trap Monitoring”.

The results

The results really threw the Emerson team for a loop! For starters, the subject line of the test email resulted in 23% more unique opens than the control email. While the control had a 8.92% open rate, the test had a 10.96% open rate. This showed Emerson that their subscribers are more apt to open an email that included content rather than just a free trial.

While both emails generated the same amount of interest in the free trial, the white paper was significantly more popular than the free trial and generated additional inquires. Take a look at the clicks for the emails:

Control Email

Test Email

Total CTR

0.77% 2.77%

Unique CTR

0.49% 1.33%

WHERE ARE PEOPLE CLICKING?

After using A/B testing to see what type of offer (content vs. trial) resonates well with their audience, Emerson began adding content offers to their free trial emails. However, they wanted to determine if clicking on a white paper CTA or a free trial CTA indicated interest in the trial. Their hypothesis was pretty straightforward—that clicks on a free trial link indicated more interest in free trials than clicks on a white paper CTA.

Email3

They started tracking the location of clicks in each email and cross-referencing these clicks to inquiries and interest about the offers:

email-clicks

Once again, the white paper received significantly more clicks than the free trial itself. However, both free trial CTAs received the same amount of clicks—19. The sidebar CTA received 14 clicks on the button and 5 clicks on the corresponding image, while the CTA at the bottom received 19 clicks on the button. But, which CTA placement led to the most leads and the most interest in a trial?

Lead generation forms for both CTAs had the same qualification questions: 1) Are you interested in learning more about a specific product? 2) Are you interested in a free trial?

Forms that were submitted without checking either of those boxes were considered inquiries, forms with any two checkboxes were considered leads, and forms with both checkboxes filled in were considered interested in the offer.

email-inquiries

Email inquiries

email-leads

Email leads

email-interest

Email offer interest

Once again, the results surprised them! The initial interest in the white paper generated more clicks that later became leads—and not only leads, but leads expressing interest in the trial offer. Their conclusion: content really is king.

WHAT HAPPENS IF YOU RE-SEND AN EMAIL?

Re-sending messages (especially to non-openers) is a frequently debated email marketing tactic. When making the decision to re-send messages, you might consider using the same email, or re-writing a message to differentiate from the first send. Which practice is most effective, and a better use of marketing resources?

This was another question that the team at Emerson wanted to answer. While they filtered out anyone who had already downloaded the white paper or signed up for a free trial, they re-sent the exact same email to those who had not. The email sends were one week apart. The only difference between the two emails was their subject lines:

  • Whitepaper: The Impact of Failed Steam Traps on Food Processing Plants
  • Whitepaper: Food Processing Plants; The Impact of Failed Steam Traps

The team feared that sending identical emails might annoy their audience; however, they didn’t see an increase in unsubscribes with the second send. Unsurprising to the team, the first email generated more traffic to the landing page because the click rate was much higher.

1st Email

2nd Email

Email CTR

1.91% 0.93%

However, they were shocked to see that the second email actually generated more leads than the first.

1st Email

2nd Email

Inquiries

162 60

Leads

22 24

Offer Interest

16 7

After diving into the click data between the two email sends, they discovered that there wasn’t much overlap between subscribers who clicked both emails. In fact, only 30 people clicked links in both emails; 568 subscribers clicked links in the first email and 270 different subscribers clicked links in the second email.

Clicked 1st Email

Clicked 2nd Email

Clicked Both Emails

568 270 30

What did Emerson learn from this? For starters, the subscribers who clicked on their first email may in fact have been annoyed that they were resent the same email—only 20 of them clicked links in the second email. However, while there were fewer clicks in the second email, those that clicked led to more leads, and both emails resulted in approximately the same percentage of people expressing interest in the free trial.

While the results of this test were very interesting, they weren’t conclusive enough for Emerson to make a decision for future sends. They plan to do more testing on re-sending campaigns to see whether multiple sends can lead to an increase in leads. They are interested in looking at changing subject lines and excluding clickers from the initial send.

By continuously testing (and often being shocked by those results!), Emerson continues to learn more about their audience and what types of emails, messaging, and CTAs resonate the best with them.

A big thanks to…

We’d like to thank Vanessa Bright, Online Marketing Manager; Scott Pries, Marketing Communications Manager Flame & Gas Detection; and Charlie Oracion, Team Lead, Online Marketing on Emerson Process Management—Rosemount’s team for sharing all of their testing efforts with us.

DISCOVER YOUR AUDIENCE + OPTIMIZE YOUR MESSAGES

A/B testing is just one way you can learn more about what resonates best with your audience. Litmus’ Email Analytics data will show you engagement, email client, geolocation, forward and print data to help make key design and HTML build decisions, providing you with opportunities to surprise and delight your subscribers (not to mention increase conversions!).

Not a Litmus user? New customers have unlimited Email Analytics access until February 28th.

Optimize for your audience →

]]>
https://litmus.com/blog/use-testing-to-continuously-learn-more-about-your-audience/feed 1
The Top Email Marketing + Design Thought Leaders on Twitter https://litmus.com/blog/the-top-67-email-marketing-design-thought-leaders-on-twitter https://litmus.com/blog/the-top-67-email-marketing-design-thought-leaders-on-twitter#comments Thu, 22 Jan 2015 19:29:18 +0000 https://litmus.com/blog/?p=9406 Email marketing and design used to be a dark art riddled with secrets, mystery, and confusion. Now it feels more like a tight-knit family. Between conferences, social media, meetups, the Litmus community, and other events, the industry is coming together more often to share and learn from one another. When one of us succeeds in pushing the limits of email—like using HTML5 video in email—or finally convinces Gmail to think about supporting responsive design, it’s a win for all of us.

Litmus has a proud history of supporting innovation, creativity, and education in email. The Litmus community, Builder, and The Email Design Conference are just a few examples of how we’re pushing the industry forward. These initiatives shine a bright light on the hard work designers and marketers put in every day to make email happen at their organizations—and has helped these thought leaders gain visibility for their efforts.

These efforts were recognized by the industry when Justine Jordan, Marketing Director here at Litmus, was presented the eec Email Marketer Thought Leader of the Year award. Alongside other passionate email lovers, like fellow nominees Ryan Phelan, Jay Jhun, and Chad White, Justine is a constant advocate for advancing the work of the email community.

This great news gave us the perfect opportunity to acknowledge all the thought leaders in the industry—because without them we wouldn’t have the community, the conference, or the tools that help us push email forward every day. This list of email geeks are the people who passionately (and happily!) spend their days planning, writing, coding (and debugging… and debugging), testing, and executing emails. Because of them, email is finally being recognized as a results-driven craft—a craft that certainly isn’t dead.

Update: In our first version of this post, we named 67 thought leaders. In recognition of the collaborative nature of email (and our accidental omission of some key contributors in the industry), we encourage the community to add to this list! Submit your favorite thought leaders in the comments.

Note: While many wear several email-related hats, we’ve tried to break them into groups for easier viewing!

CREATIVE & STRATEGY

These experts often combine humor, insight, and observations about user experience and subscriber behavior in their tweets. View them all in our creative strategists Twitter list!

Alessandra Souers
Senior Brand Manager, JibJab

Alex Williams
VP, Creative Director at Trendline Interactive

Andrew King
Senior Strategy Consultant at Lyris

Andrew Kordek
Co-Founder & Chief Strategist at Trendline Interactive

Bob Frady
VP of Technology at Zeeto Media

Brent Walter
Marketing Automation Strategist at DEG

Colin Nederkoorn
Founder & CEO at Customer.io

Cori Hemmah
Senior Manager, Demand Generation at Xamarin

Darryl Vos
Director of Art & Technology at G+A Advertising

Jason Meeker
Strategic Partner at RootedELM

Jay Jhun
VP of Strategic Services at BrightWave

Jordan Cohen
CMO at Fluent, Inc.

Jordie van Rijn
Email Marketing & Marketing Automation Consultant at eMailMonday

Justine Jordan
Director of Marketing at Litmus

Kirsty Trainer
Digital Marketing Executive at toinfinity

Mark Reeves
Founder at Clearbold, LLC

Megan Merrifield
Marketing Coordinator, Strategic Marketing at Gulfstream Aerospace

Ryan Phelan
VP, Global Strategic Services at Axciom

Skip Fidura
Global Client Services Director at dotMailer

Tamara Gielen
eCRM & Lifecycle Email Marketing Expert at Plan to Engage

Tink Taylor
Founder & COO at dotMailer

Vicky Ge
Marketing Manager, Trade Books at Amazon

Check out their tweets →

EMAIL HACKERS & DEVELOPERS

The leaders here are HTML and CSS wizards—making the impossible possible when it comes to email. See all their updates in the email hackers & developers Twitter list!

Alex Ilhan
Email Developer at display block

Anna Yeaman
Creative Director at STYLECampaign

Becs Rivett
Freelance Email Marketer at Becs Rivett

Brian Graves
UI Team Lead at DEG

Clinton Wilmott
Freelance Email Marketing Specialist

Dan Denney
Front End Developer at Code School

Elliot Ross
Founder at Action Rocket

Fabio Carneiro
Lead Email Developer & UX Designer at MailChimp

Jacques Corby-Tuech
Contractor at Curse, Inc.

Jaina Mistry
Email Specialist at Padawan Group

Jason Rodriguez
Community Manager at Litmus

Justin Khoo
Email Wonk at FreshInbox

Kevin Mandeville
Content Designer at Litmus

Kristian Robinson
Email Developer at iris worldwide

Mark Robbins
Email Developer at RebelMail

Mike Ragan
Designer at Action Rocket

Nicole Merlin
Email Engineer at Campaign Monitor

Paul Airy
Email Designer & Developer at Beyond the Envelope

Stig Morten Myre
Email Developer at Campaign Monitor

Ted Goas
Designer & Developer at Canfield Scientific

Check out their tweets →

TESTING & ANALYTICS

These are the folks developing innovative testing plans and mining through piles of open, click, conversion, and site data to prove that our designs are driving performance. View their tweets and subscribe to their updates in the testing & analytics Twitter list.

Dela Quist
CEO at Alchemy Worx

John Foreman
Chief Data Scientist at MailChimp

Kath Pay
Marketing Director, cloud.IQ

Kristina Huffman
Global Practice Lead, Creative Services at Salesforce Marketing Cloud

Matt Byrd
Email Marketing Manager at Uber

Mike Heimowitz
Online Marketing Manager at Atlassian

Tim Watson
Founder at Zettasphere

Check out their tweets →

CONTENT & RESEARCH

Content is king, and so are these experts who contribute research, thought leadership, and plenty of advice about copy, graphics and all the other good stuff that makes up the body of our messages. See all their updates in the content & research Twitter list!

Bill McCloskey
Founder at Only Influencers

Chad White
Lead Research Analyst at Salesforce Marketing Cloud

Dan Oshinsky
Newsletter Editor & Staff Writer at BuzzFeed

David Daniels
CEO at The Relevancy Group

Jeanne Jennings
Email Consultant at Jeanne Jennings

Kristin Bond
Freelance Email Nerd

Loren McDonald
VP, Industry Relations at Silverpop

Mark Brownlow
Publisher at Email Marketing Reports

Ros Hodgekiss
Community Manager at Campaign Monitor

Scott Cohen
VP of Marketing at Inbox Group

Simms Jenkins
CEO at BrightWave

Zachary Hanz
Email Marketing Manager at Sprout Social

Check out their tweets →

DELIVERABILITY, SECURITY & PRIVACY

If the emails we create never made it to the inbox, we’d be in big trouble. These are the folks that influence the inner workings behind getting email delivered. View their tweets and subscribe to their updates in the delivery Twitter list.

Al Iverson
Product Manager at Salesforce Marketing Cloud

Andrew Bonar
Founder at emailexpert

Andy Thorpe
Professional Service Consultant at Pure360

Craig Spiezle
Executive Director & President at Online Trust Alliance

Dennis Dayman
Chief Privacy & Security Officer at Return Path

Joey Rutledge
Delivery Engineer at MailChimp

Laura Atkins
Founder at Word to the Wise

Matthew Vernhout
Founder at EmailKarma.net

Steve Henderson
Compliance Officer at Communicator

Check out their tweets →

]]>
https://litmus.com/blog/the-top-67-email-marketing-design-thought-leaders-on-twitter/feed 15