Litmus https://litmus.com/blog Blog Tue, 14 Apr 2015 21:22:02 +0000 en-US hourly 1 http://wordpress.org/?v=4.1.1 Introducing the Litmus Job Board https://litmus.com/blog/introducing-the-litmus-job-board https://litmus.com/blog/introducing-the-litmus-job-board#comments Tue, 14 Apr 2015 10:04:26 +0000 https://litmus.com/blog/?p=9655 The email industry is a fast-paced and challenging environment. It’s also one that’s constantly growing. As more companies begin to understand the importance and power of email marketing, they need teams of email-savvy designers, developers, and marketers to help harness that power.

Traditionally, it’s been hard for companies to advertise those positions to an entirely email-specific audience. More importantly, it’s been almost impossible for email lovers to hunt down job opportunities that fit their unique set of skills, let alone track down their dream gig.

That is—until now. We’re thrilled to announce the Litmus Job Board: the only job board devoted to email industry jobs for designers, developers, marketers, and strategists.

Find your dream job

Whether you’re an email designer or developer, marketer or manager, if you’re knee-deep in email on a daily basis, The Litmus Job Board is where you’ll find the next step in your career.

Unlike other job boards, we’re focusing solely on email-related jobs. We’re email designers and marketers at heart, as is our core audience and the Litmus Community. By narrowing the focus of the Job Board to roles that deal with the strategy, production, and management of email, we can support that community and encourage it to grow.

job-board-screenshot

The Job Board currently features categories for design, development, marketing, strategy, copywriting, and QA positions. If you’re looking to further your career or find your dream job, head over to the Litmus Job Board today.

Looking for a new team member?

As an email-focused company, we also know how hard it is to find the perfect person for your team. We’ve made it easy for companies tap into the biggest email design and marketing community by posting new jobs to the Litmus Job Board.

And, for a limited time, posting a new job is free. In the future, we’ll introduce pricing for full-time, contract, and freelance positions, but for now, you can post your email-related gig for free.

Just keep in mind that the Job Board is focused strictly on email-related jobs. We’ll review everything posted and may remove positions that don’t fit. Don’t worry, we’ll shoot you an email explaining everything if we do.

Post a job for free →

What are you waiting for?

If you’re looking for your next move, or are searching for an amazing addition to your team, there’s no better place to look than the Litmus Job Board.

Find your dream job today →

]]>
https://litmus.com/blog/introducing-the-litmus-job-board/feed 0
iPhone vs. Android: How to Get Your Email Looking Great on Both Platforms https://litmus.com/blog/iphone-vs-android-how-to-get-your-email-looking-great-on-both-platforms https://litmus.com/blog/iphone-vs-android-how-to-get-your-email-looking-great-on-both-platforms#comments Fri, 10 Apr 2015 15:15:41 +0000 https://litmus.com/blog/?p=9640 Today, nearly 60% of American adults own a smartphone. iPhone and Android purchases are nearly even in the US—iPhone represents 47.7% of sales, while Android holds 47.6% of market share. In most of Europe and China, Android has the majority of purchases, followed by iOS. Conversely, in Japan, iOS holds the majority with over 60% of sales.

While looking at worldwide purchase data is a great indicator of smartphone adoption, it’s your audience that matters. What smartphones are most popular with email subscribers?

Understand your audience

Beyond sales, email opens are another great indicator of smartphone popularity—in particular, what devices are favored among your audience.

Mobile opens now represent over 50% of total email opens. The majority of these mobile opens occur on the iPhone, which represents 26% of total opens, and Android, which holds 7% of total opens.

Why the discrepancy between sales and email opens? While iOS displays images by default, many Android apps do not. Since determining where an email is opened requires images to load, data for some apps and programs are over- or under-represented due to automatic image blocking.

Like smartphone sales, looking at email open data as a whole is great for identifying trends. What’s more important is understanding where your subscribers are opening your emails. Tracking and analyzing which apps and programs your subscribers are using is one of the best ways to optimize your campaigns for your audience.

EA-analytics

You can use Litmus Email Analytics data to get this information.

Embrace email as an app

With 60% of adults owning smartphones, it’s clear that people like consuming content whenever and wherever they want. Their favorite type of content? Email, of course!

Activity chart

With so many people using smartphones—and email being the most popular activity on those devices—it’s important to assess how your emails display on those small screens.

There’s a lot to consider when it comes to mobile email design. On top of the multitude of smartphones, users have dozens of different email apps to choose from—each with their own set of rendering quirks. An email in the native Android email app can display very differently from the same email in the Gmail app.

AndroidNative-Responsive

Android 4.x Native Email App (Responsive)

AndroidGmailApp-NonResponsive

Android Gmail App (Non-responsive)

Understanding where your audience is opens emails is crucial, especially considering that 71% of people will delete an email if it doesn’t look good on their mobile device—and 16% will unsubscribe!

Know the limits

When it comes to optimizing for your iOS and Android subscribers, it’s important to remember that not all mobile email apps have the same HTML and CSS support. That would make email creation too easy, now wouldn’t it?

Media Queries

Image Blocking

ALT Text

Styled ALT Text

Preview Text

Android 4.x (native email client)

check-green check-green check-green check-green check-green

Android Gmail App

check-X check-green check-X check-X check-green

Android Yahoo! Mail App

check-X check-green check-X check-X check-green

iOS Mail app (native email client)

check-green check-X
check-green
*
check-green
*
check-green

iOS Gmail app

check-X check-X
check-X
*
check-X
*
check-green

iOS Yahoo! Mail app

check-X check-green check-green check-green check-green

*Images are enabled by default in iOS, but were manually disabled for testing purposes. iOS Gmail app does not have an option to disable images.

For example, iOS and Android email apps have mixed support for responsive design, which aims to provide subscribers with the best email experience possible—regardless of whether they’re reading on mobile or desktop.

Responsive email uses a media query, which is a special set of CSS styles that act like conditional statements. They respond to the screen size of a device, applying different sets of rules based on that screen size.

While responsive design allows for an optimal email experience across environments, media queries aren’t supported everywhere (see chart above). To further complicate things, while media queries are supported in the Android native email app, they are not supported on Samsung Android devices—even in the native client. This is a result of Samsung replacing the native Android email app with an email app of their own. You can use a hybrid coding approach to make your emails responsive in this client.

In addition, since media queries aren’t universally supported, consider using these mobile friendly elements as a backup for when media queries aren’t supported:

Simplify content and design

People look at their phone an average of 150 times a day. These brief interactions mean you must get your point across quickly. Focus on relevant information in your campaigns, allowing subscribers to scan your email quickly.

In addition, consider using a one-column design for increased legibility. Two or more columns crowd the small screen of a mobile device, making it difficult for subscribers to read and interact with your email.

Make everything bigger

To further increase legibility and scanability, use large fonts. Subscribers shouldn’t have to zoom in on their mobile devices to read your email—make your fonts big enough so that even the worst eyes can easily read your message.

We recommend using a minimum size of 14px for body copy and 22px for headlines. Keeping text at least 14px will avoid broken navigation bars and other layout elements on iOS, which automatically resizes small copy to a minimum of 13px.

In addition, use buttons that are touch-friendly. We recommend using a 44x44px minimum button size. Be sure to surround it with plenty of white space! You want to ensure that your CTAs are easy for subscribers to tap, so don’t surround them with text or other links.

Design defensively

Many Android and iOS email apps block images by default. As a result, it’s crucial to optimize your emails and plan for this scenario. You’ll still want your subscribers to be able to read and interact with the majority of your message regardless of whether images are on or off.

Use a proper balance of HTML text and imagery (HTML text will still display in an images-off environment) to ensure that pertinent information will still be present even if images are not.

In addition, alternative text (ALT text), which renders in place of an image in most image-blocking scenarios, is one of the best ways to get around apps that block images. You can even used styled ALT text to make your descriptions pop!

ALT text

Optimize for the inbox

Since subscribers first interact with your email in the inbox, it’s crucial to optimize for this view. Always use a trustworthy from name that your subscribers will recognize. In addition, use a subject line that describes what’s in the email and entices your subscribers to open it.

All of the iOS and Android email apps referenced above support preview text. Use this extra few lines of text—paired with the subject line—to further encourage your subscribers to open! Preview text is pulled from the first few lines of text in your HTML, so be sure text like “view as webpage” or “having trouble seeing this?” aren’t showing up.

Inbox view

Test, test, test!

In order to produce the best-performing campaigns—on not only Android and iOS email apps, but in every inbox—you should constantly test your campaigns. Support for email apps is always changing—so testing before every send ensures that your campaigns will look and work as they should.

In addition, use A/B testing to see what resonates with your audience. There are countless things to test, including headlines, preview text, from names, and design elements. It’s one of the most effective (and easy!) ways to make measurable improvements to your campaigns.

DISCOVER + OPTIMIZE FOR YOUR MOBILE AUDIENCE

Are your emails mobile-optimized? Should they be? Looking at sales data only paints a partial picture—it’s important to look at your subscribers’ behavior. After all, they’re the ones you’re sending to, not the general population.

With Litmus’ Email Analytics you can see who is opening on iPhone and Android. Then, use Email Previews to get screenshots of your email in popular apps and programs.

Try Litmus free for 7 days.

Start a free trial →

]]>
https://litmus.com/blog/iphone-vs-android-how-to-get-your-email-looking-great-on-both-platforms/feed 5
Episode 11: CSS Shapes and Load Time Optimization for Email https://litmus.com/blog/episode-11-css-shapes-and-load-time-optimization-for-email https://litmus.com/blog/episode-11-css-shapes-and-load-time-optimization-for-email#comments Fri, 03 Apr 2015 15:35:57 +0000 https://litmus.com/blog/?p=9631 In the eleventh episode of The Email Design Podcast, hosts Kevin Mandeville and Jason Rodriguez talk CSS shapes in email and how to keep your emails loading quickly. 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-11-css-shapes-and-load-time-optimization-for-email/feed 3
Engagement Analytics Give Curated Users Unrivaled Email Reporting https://litmus.com/blog/engagement-analytics-give-curated-users-unrivaled-email-reporting https://litmus.com/blog/engagement-analytics-give-curated-users-unrivaled-email-reporting#comments Thu, 02 Apr 2015 15:49:00 +0000 https://litmus.com/blog/?p=9579 Newsletters featuring a roundup of hand-selected articles from a variety of sources—also known as ‘digest’ emails—are growing in popularity. You might even be familiar with Litmus’ own digest, Email Design Monthly.

The team behind Curated have streamlined the process of collecting, curating, and publishing these digest newsletters. In addition to sending digest emails powered by Mandrill, Curated offers the ability to engage with content via Safari push notifications—and offline access to both the digest content and the linked articles via an iOS app is coming soon, too.

Managing subscriptions, reporting, and analytics across these two distinct platforms presents a unique challenge. For a Curated subscriber, having control over their preferred content delivery methods (email or push notifications) is a huge benefit. However, it posed an issue for the reporting inside the tool. Curated founder, Dave Verwer, explained that utilizing standard open tracking and ESP analytics wasn’t an option—they’d be missing out on crucial push notification website data.

CREATING A UNIFIED REPORTING SOLUTION

The Curated team was faced with the option of creating their own email tracking platform, or integrating with an existing solution. After looking into the options, our very own Litmus Email Analytics API seemed like the best solution.

Integrating Litmus within their infrastructure was seamless. Dave stated,

Integration was easy and we had open tracking up and running in a few days. Using Litmus took away a the headache of having to implement the feature, but we also don’t need to worry about scaling it as we grow.

When a new issue of a Curated publication is created, two Litmus Email Analytics tracking codes are also created via the Litmus API. One tracking code is used for the email, while the second is used for tracking Safari Push Notifications. All of this happens automatically. The process lets Curated users focus on creating great content, knowing that the tracking is taken care of.

Behind the scenes, Curated receives open data for their users’ campaigns and subscribes to API callbacks from Litmus to store open, engagement, and other key email analytics.

curated-opens-metrics

REPORTING ON EMAIL ENGAGEMENT

The Curated team quickly noticed that digest newsletters have high open, click, and engagement rates—often higher than other types of email communications. Engaged email subscribers are valuable assets, and less likely to unsubscribe or contribute to deliverability problems.

Curated also utilizes engagement data from the Email Analytics API to report on read rates for publications, showing how many subscribers glance, skim, or read messages.

curated-engagement-metrics

Verwer explained,

The Litmus open data is integrated with our own click data and the other information we have about the subscriber, for example which issues they were sent. This gives us individual level analytics that rivals, or even beats what is available from some of the big ESPs.

This individual-level engagement and click data gives Curated users a clear picture of how truly engaged a subscriber is, leading to opportunities to further optimize their messages based on subscriber behavior.

ACCESS POWERFUL EMAIL MARKETING TOOLS

Robust reporting and analytics tools are key features in any online marketing software. Companies like Curated, HubSpot, and Silverpop offer powerful email engagement, analytics, and preview tools to their customers through the Litmus API.

The Litmus API is optimized for high volume testing and analytics, providing you with a direct connection to our testing grid. Learn how you can seamlessly integrate Litmus tools into your own products, services, and applications to deliver value to your customers.

Get started with the Litmus API →

]]>
https://litmus.com/blog/engagement-analytics-give-curated-users-unrivaled-email-reporting/feed 0
Best Practices for Optimizing Order Confirmation Emails https://litmus.com/blog/best-practices-for-optimizing-order-confirmation-emails https://litmus.com/blog/best-practices-for-optimizing-order-confirmation-emails#comments Tue, 31 Mar 2015 22:02:41 +0000 https://litmus.com/blog/?p=9603 Marketers and email designers typically focus the majority of their efforts on optimizing their newsletters and promotional emails. The primary goals of these communications are usually new sales, leads, and conversions. However, there is a missed opportunity in engaging and retaining users with order confirmation emails.

It typically costs between six and seven times more to acquire a new customer than to retain existing customers. In addition, repeat customers tend to purchase as much as 67% more than new customers. The folks over at Silverpop stated

Many businesses are leaving money on the table by neglecting current customers in favor of creating new businesses…consider shifting some of your focus to moving customers from the…first purchase…to repeat purchases and brand loyalty.

While it’s crucial to send and optimize promotional emails aimed at gaining new customers, take a look at what happens after a purchase is made. What do your order confirmation emails look like? What type of information do they include?

THE VALUE OF CONFIRMATION EMAILS

Transactional emails, like email receipts, are frequently neglected. However, 64% of consumers consider transaction confirmations the most valuable messages in their inbox. In addition, they have significantly higher open, click, and conversion rates than bulk mailings.

Order Confirmation Emails

Bulk Emails

Open Rate

114.30% 14.40%

Click Rate

12.50% 3.10%

Transaction Rate

0.76% 0.09%

In addition, Experian found that order confirmation emails generate about $0.75 per email, while bulk mailings typically generate around $0.13 per email—that’s nearly a 6-fold increase in ROI!

Order confirmation emails also have high engagement rates. The folks over at Receiptful, a tool that helps store owners and marketers send supercharged email receipts, analyzed over 100,000 email receipts that were sent. Through Litmus Email Analytics data, they discovered that subscribers are spending 14.8 seconds on their order confirmation emails—185% higher than the typical 8 second average attention span of humans! Not only are subscribers more likely to open and click confirmation emails, but they also spend more time reading them.

Why do these emails perform so much better than regular bulk mailings? Receiptful founder Adii Pienaar explains,

Purchasing something and receiving a receipt is an age-old interaction…it’s become a habitual thing that we don’t even think about. When someone buys something online, they still expect to receive a receipt.

In addition, people want to double-check their purchases. Did I order the correct item? Was I overcharged? Did I misspell my street name? Adii explains that “receipts also act as a verification mechanism.”

Furthermore, receipts are frequently required for warranties, potential returns, reimbursement, and other scenarios. Subscribers will open and archive order confirmation emails to make them easy to find in the future.

OPTIMIZE YOUR CONFIRMATION EMAILS

With significantly higher transaction rates, revenue per email, open rates, and click rates than bulk mailings, order confirmation emails should be given more attention. Here are some tips for getting the most out of these valuable emails.

Keep them on brand

In many instances, engineers or developers—rather than marketers—have control over transactional emails. In addition, Adii explained that “most online vendor’s transactional emails are either hard-coded or limited to the functionality of their eCommerce platform and/or a third party SaaS provider. As a result, these emails are often plain text, poorly designed, and not on-brand.”

Take this example from a local florist:

flower-example

The email is almost entirely plain text, and doesn’t include any order details within the content of the email itself. Instead, subscribers need to open the attached PDF to view their order details—not an ideal experience.

Adii explained,

You want your transactional emails to be an extensive of your company and your brand…We know that customers are engaging with your receipts and transactional emails, so make it a good experience for them and use them to nurture your relationship.

Use HTML and design elements to create a visually appealing email, adding warmth and emphasizing brand personality. We recommend keeping your design sleek and simple to allow for easy skimming of transactional details.

While not necessary, imagery of the products ordered can help make your email more engaging. You can also include images of related products as part of an upsell or cross-sell strategy (more on this later!). As a minimum, we recommend including your logo so subscribers will be able to easily identify you as the sender. However, be sure that transactional information isn’t part of an image—you’ll want that information readily accessible even if images are disabled. Your subscribers shouldn’t have to download images in order to view their purchase details.

Adii uses Etsy as a great example of this approach:

Etsy

He explains, “Etsy has a main design challenge—to represent both Etsy and the individual seller—but they do so effortlessly. I love how it humanizes the vendor by including their profile picture in the email. It helps create a more natural connection between the buyer and seller.”

Make sure it’s mobile friendly

In terms of design, making your emails mobile friendly is non-negotiable. Receiptful found 39.2% of receipt emails were opened on a mobile device. The majority of these mobile opens occurred on an iPhone, which represented 30% of total opens.

iphone-opens

We recommend using mobile-friendly elements, like large text, touch-friendly buttons, and a single column design to optimize readability on small screens. Responsive design is another great option for ensuring your emails are mobile-friendly.

It’s also crucial to preview transactional and receipt emails to ensure they look great in desktop and webmail applications, too. You can test your emails in over 40 desktop, webmail, and mobile inboxes with Litmus.

Adii and the team at Receiptful understand the importance of email preview testing:

We use Litmus’ Email Previews extensively to ensure that our receipts work well on all devices and email clients. This is also one of our main value propositions: Receiptful users can send beautiful email receipts without having to worry about cross-client compatibility. It goes without saying that we would simply not be able to do this without Litmus helping us out.

Optimize your inbox view

Optimizing the inbox view for order confirmation emails is also important. Use a recognizable from name so your subscribers will be able to easily identify who the email is coming from.

In addition, make sure your subject line makes it clear that the nature of the email is transactional. Under the CAN-SPAM Act, subject lines in transactional emails, like order confirmation emails, must directly state that the nature of the email is transactional. For example, something like “Your Litmus Order Details,” would be appropriate.

venmo-example

In this email from Venmo, the from name and subject line clearly state the sender and content of the message—details about a recent payment.

Lastly, don’t use a “no-reply” address in the reply-to field. Order confirmations are a perfect place encourage communication between you and your customers. By using a “no-reply” address, you’re not only discouraging communication, but missing out on an opportunity to send positive deliverability signals to web-based email providers.

Subscribers may have questions about their order, or perhaps they want to reach out about making another purchase. Use a reply-to address that will encourage customer engagement—and ensure that someone is monitoring that inbox.

Be timely

Subscribers expect to receive confirmation emails almost immediately after purchasing. Make sure that you have the proper technology in place to send your receipt emails while your company and the purchase is still top of mind.

Include value-added content

Since receipt emails perform so well—and you’re more likely to generate additional revenue from existing customers—it makes order confirmation emails the perfect venue to encourage upsells and cross-sells. The folks over at Receiptful found that the average value of a receipt is $0.25.

receipt-value

However, under the CAN-SPAM act, the content of transactional emails must be “primarily transactional.” Though, there is no set rules on the percentage of your email’s content that must be transactional, compared to marketing.

As Adii explained, you should follow the “various spam-related best practice and legislation. However, it’s a bit of a grey area. The key is that the primary purpose of a transactional email should always be functional and never marketing.” We recommend following the 80/20 rule—80% of the email’s content should be transactional, while 20% can be promotional.

walmart-example

While the majority of the content in this email from Walmart focuses on the computer desk purchase, there is an upsell in the right column for a related product—computer chairs. The upsell is relevant and doesn’t overwhelm the transactional nature of the email.

Receiptful found that providing a discount or coupon redeemable on a future purchase is the best performing transactional email marketing technique. Subscribers receiving receipt emails have already purchased from you, so why not encourage them making a future purchase with a coupon?

Since subscribers are so engaged with transactional emails, they are also a great place to invite subscribers to sign up for promotional emails and newsletters.

PREVIEW YOUR RECEIPTS BEFORE SENDING

Transactional emails, like receipts, are frequently considered among the emails we “set and forget”. However, if there is anything that the 2015 State of Email Report taught us, it’s that the email world is constantly changing—new email apps and launched and clients drop support for HTML and CSS attributes without notice.

Consistently test your transactional emails to ensure that you’re putting your best email foot forward. Don’t neglect your highest performing emails—test your receipt emails today with a 7-day free trial of Litmus.

Start a free trial →

]]>
https://litmus.com/blog/best-practices-for-optimizing-order-confirmation-emails/feed 4
This Month in Community: Contests, Accessibility, and Favicons https://litmus.com/blog/this-month-in-community-contests-accessibility-and-favicons https://litmus.com/blog/this-month-in-community-contests-accessibility-and-favicons#comments Tue, 31 Mar 2015 19:53:09 +0000 https://litmus.com/blog/?p=9588 There’s a lot going on over in the Litmus Community. Between coding contests, breaking news, and helping each other troubleshoot email problems, Community members are hard at work building a better industry.

So, what exactly has been going on in the Litmus Community? We’ll take a look in this first post in our new monthly series cleverly titled, “This Month in Community.”

Community Contest

We wrapped up our second Community Contest this past month. We challenged Community members to show off interesting and creative concepts for email navigation. Along with our friends from Code School, we awarded the prizes to Justin Khoo for his amazing Reader Mode email concept.

reader-anim

You can learn more about Justin’s email in the blog post announcing his winning entry or you can hop over to the Community thread and check out all of the amazing entries.

Paragraphs and Outlook

Community member BD posed a question about using paragraph tags in Outlook and the ensuing madness of Outlook’s rendering of margins. While a few solutions to the problem surfaced, the more interesting takeaway is this comment from Peter Brown:

Do you have a use case that requires using paragraph tags?

Although BD mentions that paragraph tags are uncommon in most emails, and they were finally removed from the template in question, Peter brings up a great point. When are paragraph tags, or any other semantic elements, required for an email campaign?

While accessibility is a vital component of the web, the realities of designing email campaigns that work well across dozens of email clients means that accessibility is an afterthought for most designers (if it’s considered at all).

What are your thoughts on semantic markup and accessibility in email design? Join the discussion and let us know.

Favicons in Email

Finally, an interesting question from Chris Goldson: Does anyone use favicons in email campaigns?

fav

While not a huge concern for most, favicons can add a nice visual touch for subscribers that like to view campaigns in the browser. As an added benefit, it can make finding your email amidst a sea of browser tabs that much easier.

So, are you using favicons? Have you seen any solid results from incorporating them into a campaign? Let Chris and the rest of the Community know!

Join the Community Today

There is a ton more happening in the Community than what’s described here. Keep up with the latest news, techniques, and tools by joining the Litmus Community today. It’s free to join and filled with the best minds in email marketing.

Join the Community →

]]>
https://litmus.com/blog/this-month-in-community-contests-accessibility-and-favicons/feed 0
6 Design Tips for Building Successful Emails in 2015 https://litmus.com/blog/6-design-tips-for-building-successful-emails-in-2015 https://litmus.com/blog/6-design-tips-for-building-successful-emails-in-2015#comments Mon, 30 Mar 2015 17:19:48 +0000 https://litmus.com/blog/?p=9568 Email design is more than just an art—it’s a craft that drives results and revenue. As an email designer, you understand the importance of keeping up with the latest changes in the email world, especially when those changes—like new apps and updates to HTML and CSS support—can affect your carefully designed campaigns.

Unfortunately, that’s not always an easy task, which is why we released our 2015 State of Email Report. In it, we take a look at all of the latest email updates—and their potential effects on your designs.

Download the free report →

Here’s a sneak peak at some of the tips and takeaways you’ll find in the report.

Adjust your media queries

Due to the popularity of previous iPhone models, 320px became the standard breakpoint for media queries. With the introduction of the iPhone 6 and iPhone 6 Plus, there is no longer one media query that works for all iPhones.

iPhone 5

iPhone 6

iPhone 6 Plus

Display

4 in. 4.7 in. 5.5 in.

Dimensions

1136 x 640 px 1334 x 750 px 1920 x 1080 px

PPI

326 326 401

Device-Pixel-Ratio

2 2 3

Media Query Breakpoint

320px 375px 414px

The new screen sizes mean that designers will have to update their media queries when targeting iPhones (and other mobile devices) in responsive emails.

Use mobile-friendly elements

With over 50% of email opens happening on mobile devices, it’s more crucial than ever to have a mobile email strategy in place.

We love seeing the rise in responsive email design. Unfortunately, not all mobile email apps support media queries—most notably heavyweights like the Gmail app and Inbox by Gmail. As a result, designers need to incorporate mobile-friendly elements like large text, touch-friendly buttons, and simplified layouts into their designs.

Updates to image blocking

Similar to its predecessors, the new Outlook for Mac 2015 blocks images by default. Email designers should use defensive design techniques like ALT text, styled ALT text, and background colors—all of which are supported in this client—to combat image blocking.

On the flip side, Gmail began automatically displaying images in late 2014. While you should still use ALT text, you can rest easy knowing that your design will display as intended in Gmail.

A more visual inbox

Gmail’s Promotion tab grid view

Google has made massive strides creating a visually enticing inbox for subscribers. Gmail’s Promotions tab grid view—which is currently available for users that have opted in and are using the Gmail web interface—is Pinterest-esque with its large graphics and infinite scrolling.

gmail-promo-tabs

Source: Official Gmail Blog

To define which image will be pulled into your grid view, you’ll need to implement specific markup—called schema—into the HTML of your email. We’ve developed a handy (and free!) Gmail Promotion Tab Code Generator to help you create the code that you’ll need to add to your HTML.

If this schema isn’t included, Gmail uses an algorithm to determine which image should be featured. The sender name and subject line comes from your actual subject line, while the sender image is pulled from your company’s verified Google+ profile. If you don’t have a verified Google+ profile, the logo will be the first letter of your sender name.

Inbox by Gmail Highlights

Inbox by Gmail also takes the concept of a visual inbox to a whole new level with Highlights. With Highlights, information from an email is showcased in the inbox view under the sender image, from name, subject line, and preview text.

inbox-highlights

Similar to the Promotions tab grid view, you can implement a schema to include these visual elements in the inbox view. With schemas you can add images and reservation information directly within your subscriber’s inbox. Talk about creating an engaging email experience for your subscribers!

Use open data to make design decisions

While looking at industry-wide email open trends is a great indicator of adoption of certain email clients, it’s your audience that matters. It’s more important than ever to look at where your audience is opening their email and adjust your designs accordingly.

For example, we saw a 7% increase in Apple Mail opens in 2014, which now accounts for 8% of total email opens. If you’re seeing something similar in your own audience, you can use that data to inform your design decisions. We know that Apple Mail has excellent support for HTML and CSS, so we can safely use advanced techniques like HTML5 video backgrounds in our campaigns.

The key is understanding your audience. With Email Analytics, you’ll get the data you need to optimize your designs. Sign up for a free 7-day trial today.

The first code editor built for email designers

Email designers have long been stuck using tools created for web design. With the community’s help, we launched the first code editor built for email designers by email designers: Litmus Builder.

Litmus Builder has a ton of features tailored specifically to email design, including real-time mobile and desktop previews, template and snippet support, images on/off views, and direct integration with Email Preview testing. It is made to let you build, test, and share campaigns faster and better than ever before.

Builder access is included in all Litmus subscriptions, or you can sign up for a free Builder-only account. Get started with Litmus Builder →

GET THE 2015 STATE OF EMAIL REPORT

Want even more information and actionable takeaways? Stay up-to-date on the latest email updates and advances by downloading the free report today!

Download the 2015 State of Email Report →

]]>
https://litmus.com/blog/6-design-tips-for-building-successful-emails-in-2015/feed 0
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 2
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 4