Here’s a summary of what you’ll find:

Designing for (Almost) Every Device
Ros Hodgekiss discusses what’s pushing the demand for mobile-friendly newsletters and shares her comprehensive 4-step planning process to design emails for (almost) every device.

Five Tips for Better Mobile Emails
Five tips in under five minutes! If you’re strapped for time, Elliot Ross shares some “quick wins” for making your email experience great for mobile users without the need for media queries and responsive design.

Easy Ways to Implement Mobile Email
In this live coding session, Elliot covers how to easily create responsive emails with with just three CSS classes.

Big Picture Email Development
An expert in the noble art of “good enough,” Fabio Carneiro shares insights learned after creating robust, flexible and forgiving mobile friendly templates for over 2.5 million users.

Pushing the Limits of Email
Jonathan Kim will encourage you to break free from practicing defensive email design and start innovating with with CSS3, SVG animation, email heatmaps and other #nsfo (not safe for Outlook) techniques.

Email at Twitter
A fascinating look at how Twitter builds their amazing responsive emails, including Mircea Pașoi‘s tips for Internationalization, secrets to data-driven A/B testing and plenty of innovative messaging techniques you’ve never heard before.

Between taping the workshop and one-on-one time with each speaker, there is some fabulous content in these recordings. You’ll learn about responsive techniques and mobile email design straight from world-recognized experts.

WHERE TO FIND THE VIDEOS

Videos are available to anyone with an active Litmus subscription—you can find them at the top of the Extras tab inside your account.

Don’t have a Litmus subscription? Sign up today for over three hours of exclusive footage.

ADDITIONAL MOBILE RESOURCES

• Your email on mobile: check out how each mobile OS displays your email [infographic].
• “Mobile Email: Why, What, How” [webinar recording].
• Responsive & Scalable Email Design — what’s the difference?

Not surprisingly, iPhone, Outlook, and iPad continue to top the charts; however, we’ve seen some major changes in the bottom half of the top ten:

• Yahoo! Mail moved from #7 to #6
• Yahoo! Mail Classic fell off the bottom of the list
• Windows Mail is now in the #10 spot

The biggest change was the sudden appearance of Outlook.com in the top ten. In July last year, Microsoft announced that Outlook.com would eventually replace Hotmail. While Hotmail users were encouraged to try Outlook.com, we didn’t see a lot of change until last month, when we noticed the two providers swapping out share.

RENDERING QUIRKS IN OUTLOOK.COM

With Outlook.com now firmly placed in the top ten, it’s important to watch out for some rendering quirks with this client:

• No support for CSS background images
• No support for CSS floats
• No support for the margin property
• Image blocking
• No support for ALT text
• Irritating defaults for standard header tags

The good news is that Outlook.com email testing is included on all Litmus subscriptions.

THE LATEST ON MOBILE GROWTH

There has been little change in desktop, webmail and mobile opens:

A small increase in desktop opens was accompanied by decreases in mobile and webmail opens. Desktop opens now represent 34% of total opens, while mobile remains head of the line at 42%. For the first time, webmail opens dropped below 25%.

The trends clearly show desktop and mobile email clients favored over webmail clients. While consumers may continue to use free webmail services such as Gmail and Yahoo!, there’s an indication that they may utilizing IMAP services for these accounts to read email on smartphones and desktop email clients like Outlook or Apple Mail.

ADDITIONAL RESOURCES

• Microsoft upgrades Hotmail users to Outlook.com
• Overview of Outlook.com: Observations & rendering quirks
• Hotmail & Outlook.com drop support for margin

Knowing we weren’t the only email geeks facing this issue, we created Scope:

DESKTOP, MOBILE, HTML AND TEXT VIEWS

Scope creates a clean, shareable version of any email — complete with desktop and mobile previews — in a single click. Easily show off your new responsive design techniques, or just double check that your text version is formatted correctly.

CHECK OUT THE CODE

Scope’s sleek code inspector decodes and cleans up HTML, making it crystal clear to view.

FREE TO USE FOR EVERYONE

Scope is free! No signup or subscription required. Just add the bookmarklet to your browser, and start scoping! Currently, Scope works with Gmail, and desktop apps for Mac and PC are also coming soon.

FREE LITMUS SERVICE FOR A YEAR

We’re giving away an annual subscription to our Plus plan in what may be the easiest contest ever. To win, Scope an email and share the link on Twitter, make sure to the include the hashtag  #emailinspiration in the tweet:

Simple media query, relevant content, subtle CSS3 magic, tappable button, clear CTA: litmus.com/scope/mzk70fjs… #emailinspiration @litmusapp

— Justine Jordan (@meladorri) April 30, 2013

The winner will be chosen at random and will receive an annual Plus subscription to Litmus worth $990! The contest will run for a week: from Tuesday, April 30th through Tuesday, May 7th, with the winner being announced on Wednesday, May 8th. You’ll also want to be sure you’re following us so we can send you a direct message when you win.

HAVE ANY QUESTIONS?

Do you have any questions about Litmus Scope? Check out our help article, or feel free to email us at hello@litmus.com.

An example of Pardot’s email client/device report

“Knowing what devices or email clients your prospects use can clue you in to where to spend your design time. If you know that almost none of your prospects use a certain client, you know that you don’t need to beat your head into your desk trying to make your email pretty for it. On the flip side, if you see that a significant portion of your recipients open their emails on a mobile device, make sure to have a simple template, use responsive design, or include a link to a mobile version of your content, ” says Adam Blitzer, COO and co-founder of Pardot. We couldn’t agree more!

Pardot’s new reports also show detailed engagement stats, including the percentage of email openers who read, skim, or glanced at messages. Also included is forward or print statistics.

“Open rate can be a useful metric but don’t you want to go beyond that and see if your email was actually read? Now you can.”

To learn more about this integration, check out Pardot’s announcement, “New email reports: skims, reads, glances, and forwards and recipient device type.”

Have any questions? Don’t hesitate to reach out to us at hello@litmus.com.

To make matters more confusing, each mobile device will likely run one of four popular operating systems, each with its own ecosystem of downloadable applications for reading email. These applications offer differing support for HTML and CSS—meaning that emails opened on the same device might display differently from program to program and app to app. It’s worthwhile to note that the concept of pixel density also plays a part (see callout below).

While we can’t cover every conceivable option, the graphic below begins to communicate the wide variety of mobile screen sizes out there, and shows how a standard 600px-wide email without responsive elements will display on several popular devices and the default mail applications in each of their operating systems. You can also see a hands-on review (and video!) of how BlackBerry’s new Z10 smartphone displays email in a separate post.

Click on the graphic for an enlarged view. The entire text of the graphic is also available below.

Infographic design: Brandon Cooper

With 43% of all email opens occurring on a mobile device, it’s important to understand how your email will look when opened on one. Factor in ever-increasing screen sizes to the various mobile operating systems and email programs available, and you are left with a dizzying array of combinations to consider.

We’ve taken some of the guesswork away by visualizing how the same email will appear in five common devices and operating systems available.

Apple iPhone 5

With 47.8 million iPhones sold in the last quarter of 2012, Apple ranks as the #1 smartphone manufacturer and #2 smartphone platform in the US with 36.3% market share.

• 4” display
• 1136 x 640 resolution at 326 ppi
• iOS 6

All iPhone and iOS versions zoom into emails to fit the message to the width of the screen.

Samsung Galaxy Note II

The Note runs Android, the #1 smartphone platform in the US with 53.4% market share. Samsung was the #2 device manufacturer in 2012, taking 21% of the market.

• 5.55” display
• 1280 x 720 resolution at 267 ppi
• Android 4.1 Jelly Bean

Android displays the upper left-hand corner of your email, leaving users to scroll left-and-right in addition to up-and-down to view your entire message. The exact dimensions of this “preview pane” vary.

LG Nexus 4

While LG ranks as the #5 smartphone platform, their Nexus 4 phone runs Android, the #1 operating system. This popular phone has been frequently sold out, especially in the weeks leading into the 2012 holiday season.

• 4.7” display
• 1280 x 768 resolution at 320 ppi
• Android 4.2 Jelly Bean

Android users may choose to view emails with the platform’s popular Gmail application or the manufacturer-provided native email application. The Gmail app (like its desktop counterpart) lacks support for embedded CSS, essentially ignoring any responsive elements in your email. However, the native email app has built-in media query support, displaying responsive messages in their full glory.

Nokia Lumia 920

With just 2.9% of smartphone platform share, Microsoft has managed to generate a lot of buzz surrounding its latest operating system, Windows Phone 8. More popular outside the US, Nokia reports sales of 4.4 million Lumia devices in Q4 2012

• 4.5” display
• 1280 x 768 resolution at 332 ppi
• Windows Phone 8

The from name and subject line dominates the inbox view on Windows Phone 7+. The email is also “zoomed in” to fit the entire width on the screen, although less so than on iOS.

BlackBerry Bold 9900

BlackBerry has maintained a spot as the #3 smartphone platform, but continues to lose market share, declining from 8.4% in Q3 2012 to 6.4% in Q4 2012. BlackBerry devotees love the physical keyboard while enterprises appreciate the built-in security features.

• 2.44” display
• 480 x 360 resolution at 244 ppi
• BlackBerry OS 6

Similar to Android, BlackBerry phones running OS 6 will display the top-left corner of emails.

ADDITIONAL RESOURCES

• Email design tips and examples for Windows Phone and Android
• A downloadable file of various Android preview panes
• More information on pixel density, including common pixel-device-ratios
• Worldwide mobile phone sales, top smartphone platforms, details on Nokia sales, and a summary of growth
• Distribution of screen sizes/densities across Android devices
• Responsive design and media query support for email

While BirchBox may not have been been selling anything “real” in one of their latest emails, they definitely showed their personality and humor! And, better yet — they did it style! Let’s take a look.

USING EMAIL TO SHOW BRAND PERSONALITY (AND HUMOR!)…

If you aren’t familiar with Birchbox, it’s a monthly beauty subscription that sends deluxe samples based on the subscriber’s preferences. So when they launched a “new subscription service,” on April 1st (aka April Fools’ Day), I’m sure their subscribers were very excited!

Upon opening the email, subscribers were welcomed with the headline, “You asked, we delivered: New! Birchbox for Boxes.” For a mere $20 a month, subscribers can receive deliveries of gorgeous boxes of all shapes, sizes and color — what’s better than that?! With the simple click of a button, you can “start stockpiling now.”

I’m sure some subscribers were confused at first, but after clicking into the email for more information, they were brought to an “April Fools” page, which shed light on the purpose of the email. Regardless of whether subscribers realized it was a joke from the get-go or not, once they figured it out, I’m sure they really enjoyed the thought and effort put into the email.

How nice is it to receive an email from a company that isn’t strictly promotional? It’s a nice way to show your subscribers that you care about them and would like to put a smile on their face. It also shows them that you actually have a personality and aren’t just a robot! Between the humorous language of the email and landing page, this email is a win in my book!

…AND DOING IT IN STYLE!

One of my favorite aspects of this email is the fact that Birchbox still took the time to carefully craft a “joke” email. Their branding is still present and it’s a sleek, attractive email. The email has plenty of white space for easy viewing, as well as limited text and a clear CTA. Regardless of the content or purpose, it’s on-brand and beautifully designed!

The animated GIF shows off numerous of the “Birchbox boxes” and makes them look really cute and appealing (who knew you could make boxes look cute?!). The best part about animated GIFs is that while video and CSS3 animation have mixed support across email clients, animated GIFs have generally good support, especially across common consumer email programs.

Birchbox also gets bonus points for using styled ALT text on their logo image.

OPTIMIZE FOR VIEWING IN ALL ENVIRONMENTS

Birchbox uses a similar template for their emails, including this one-off email for April Fool’s Day. I’m don’t know if Birchbox has a high mobile open rate, they could make simple changes that would make their emails easier to view on small screens. For example, in its current state, the navigation bar, social sharing links, and text are hard to read on an iPhone.

To make the social sharing links and navigation bar more mobile-friendly, BirchBox could consider removing these items, making them larger, or using responsive elements to “hide” them when viewed on a mobile device. In addition, while the body copy in the email is 15px, since the email is 600px wide, the whole email scales down—including the text. The wider your email, the bigger your fonts need to be in order to scale appropriately on an iPhone. Also, since the preheader is 10px and the footer 12px, they are really hard to read on a mobile device. We recommend using a body copy minimum of 16px and 22px for headlines.

SCOPE IT!

Take a peek at the HTML to see how this email was built, and how it looks on a mobile device.

SUBMIT YOUR EMAILS TO BE FEATURED

Do you have an email that you’re especially proud of that you’d like to be featured in our inspiration series (don’t worry, it doesn’t have to be April Fools themed!). Send them to us at inspiration@litmus.com.

I covered a lot of ground in an hour:

• Various mobile email design approaches: responsive, fluid, scalable and aware
• Implications of various screen sizes and operating systems
• How to find out who is opening your emails on mobile (hint: Litmus’ Email Analytics!)
• Foundations for mobile-friendly emails
• Support for media queries
• Lots of examples, and much more!

Keep reading for links to our favorite mobile email resources, including all the example emails used in the presentation.

RECORDED WEBINAR

Missed the webinar? Want to watch it again? Be our guest:

PRESENTATION SLIDES

You can view all the slides, too:

EXAMPLE EMAILS

Most of the emails I used during the examples section are linked to below:

We used Scope to capture these emails from our own inboxes: it’s perfect for sharing emails and inspecting their HTML.

MOBILE EMAIL RESOURCES

Here’s a comprehensive list of all the 3rd party stats and resources I mention in the webinar:

Email Analytics: to find out who is opening emails on mobile devices

MarketingSherpa’s mobile email open rate survey

Mobile phone sales stats from Gartner and ComScore

Email client market share stats

The Android developer dashboard

BlueHornet’s Consumer Views of Email Marketing

Research on how users hold their devices

Comprehensive guide to media query support

Device targeting examples

Android preview pane and design tips

iOS user experience guidelines

Responsive email design guide and tutorial on building responsive emails

Responsive email templates from Antwort and Zurb

Responsive email success stories & stats

• DEG’s Crocs case study
• Rewards Network (available to those with an ExactTarget 3sixty login)
• Anna Yeaman’s SavvyMom redesign
• Deckers’ 10% increase in click rates

HAVE ADDITIONAL QUESTIONS?

Do you have any additional questions that weren’t answered during the webinar? Feel free to leave your questions in the comments section and we’ll get back to you!

While mobile opens are holding steady around 43% in Q1 this year, two years ago (in Q1 of 2011), mobile opens were just a blip at barely 10%. That’s an incredible 330% change over two years! And that massive growth had to come from somewhere: desktop clients have seen a 44% decrease and webmail share has shrunk about 22%.

This means that both business and consumer audiences are reading more email on their phones and tablets—and using their fingers and thumbs to navigate.

So what does this explosive growth of mobile mean for your email designs? Design for “one thumb and one eyeball” — increase font and button sizes, give designs breathing room, and focus on valuable content.

MORE MOBILE EMAIL TIPS AND EXAMPLES

Don’t miss “Mobile Email: Why, What and How” for a full hour of mobile email stats, examples and strategies.

Not only can an error-ridden email result in unsubscribes, but it can affect your reputation as well. So, while you may have an excellent, well-thought out strategy, if it isn’t executed and tested properly, all of your hard work may be overlooked.

When we recently received an email from Smashing Magazine, we were really impressed with its fun imagery and design.

A peek at the HTML revealed a media query, so I eagerly opened the email on my iPhone to view the responsive version. However, I was surprised by what I saw. Let’s take a closer look!

GETTING THE OPEN

Optimizing your from name, from address, subject line and preheader are crucial — a subscriber’s experience with your email starts long before they open your email.

Let’s take a look at these aspects in Smashing Magazine’s email:

• From name: Smashing Magazine
• Reply-to address: marketing@smashingmagazine.com
• Subject line: Smashing News: Latest eBook Releases and Upcoming Smashing Workshops
• Preheader: Sorry, but why am I receiving this? If this email is not displayed properly, view the online version.

While the preheader could use some work (we’ll get to this later), the from name, from address and subject line are definitely a success in my book! The from name is simple — Smashing Magazine. Since it’s likely the first thing that subscribers will see, the simple, straightforward from name is recognizable and trustworthy. Smashing Magazine also uses a friendly reply address, which increases the trust factor. While “marketing” seems a bit promotional, it’s nice that it isn’t a “no-reply” address. The subject line of this email is straightforward and fun. It simply states what it inside the email — eBook releases and upcoming workshops — and uses “smashing” language which adds a little fun to it.

While I like the permission reminder at the top of the email (it links to an explanation of the emails they send), I wish it was located after a more informative preheader. Since some email clients (Gmail, Outlook, iPhone, Windows Mobile 7) will display the first few lines of text in your email as “preview” or “snippet” text, this portion of the email can be optimized to follow up on the subject line or display other useful information.

ATTRACTIVE IMAGERY & LAYOUT

What immediately attracted me to this email was the playful imagery and S-curve design. The graphics are bright and inviting, yet not obnoxious or obtrusive. While the top of the email is filled with colorful images, as you scroll down the email they become a bit more muted which prevents it from being overwhelming. In addition, the little “book people” are adorable and I love the S-shaped bookcase — nice branding for Smashing Magazine!

I’m also a big fan of the layout: by alternating text and image between the left and right sides of the email, Smashing Magazine follows the natural reading pattern of most users and encourages scrolling. The hierarchy of the email is also clearly defined by sub-headers and visual differentiation between the subscription sign up, latest additions, and upcoming workshops sections. However, the workshop headlines and “read more” CTAs at the bottom of the email are the same font, text size, and link style — a better defined hierarchy between these elements may have helped differentiate the content and get more clicks.

RESPONSIVE EMAIL DESIGN

Now it’s time to get to the responsive design of this email!

In the email on the left, you can definitely see the responsive elements — the “S” bookcase is removed, the library books are smaller, text has scaled, columns have scaled and more — yet, something’s not quite right… the email is rendering very strangely. It’s obvious that a lot of time was spent on the responsive elements of this email design but, unfortunately, two full-width images in the email don’t scale appropriately. When these two images are removed, the email renders as intended (and looks great!).

Left: The original responsive email with images at desktop scale.
Right: The altered email with responsive design restored

The designers over at Smashing Magazine deserve a lot of credit for incorporating several elements in their responsive email design. The bookcase near the top of the email is hidden, enabling the text to spread across the screen in a more readable format. In addition images and text scale in the “latest additions” section. Another impressive aspect of the design is how they deal with a three column layout in the “workshops” section. You really have two options here: either shift the three columns into rows (which also alters the content hierarchy), or scale the columns to fit a smaller screen. Smashing Magazine chose the latter: scaling the columns to fit on a narrow screen. While this approach preserves the content hierarchy, it does break the text into 1-2 words per line, which can be a little awkward to read.

Original desktop version and altered responsive/mobile version

ADDITIONAL FEEDBACK

Remove Blue Links on iPhone and iPad
Phone numbers, addresses, and dates frequently turn blue and underlined on iOS devices. These links can be handy: they help users by automatically linking to other iOS applications to assist with making a call, launching a map, or creating a calendar event. They can also detract from a carefully planned color scheme or branding palette. Luckily, restyling or removing the links is easy with a bit of embedded CSS, allowing users to save the webinar dates while staying in sync with the other link colors in the email.

Use of Embedded CSS
Speaking of embedded CSS, its use in email can be tricky. Since Gmail strips out the <head> tag in emails, any <style> blocks will come right along with it. So while it’s perfectly okay to use embedded CSS to fix an issue on iPhone and iPad (these devices leave the styles intact), all the styles will be removed in Gmail. In this case, I noticed that some of the text styles displayed in a different font and color in Gmail. It’s always best to move your CSS inline for consistent results across email clients.

Images-Off Optimization
Due to heavy use of live text, the email remains completely legible and hierarchy is maintained in an images-off environment. This is a major positive — about half of email clients block images by default (and many subscribers don’t change these settings!).

Further images-off optimization efforts may have included ALT text. Styled ALT text in the banner at the top of the email and for the CTA button would have been a great addition. To take it even a step further — a bulletproof button would have been amazing!

THE IMPORTANCE OF TESTING

While it’s hard to say exactly where and why the testing process went wrong (we’d love to hear more details from Smashing Magazine!), this carefully crafted message didn’t render properly. It’s especially unfortunate that the images that were causing the issue weren’t crucial to the design or message. The content was just as valuable (and easier to read!) when the images were removed and the responsive design was restored. The moral of the story? Test, test, TEST!

All the hard work and planning that Smashing Magazine invested into their responsive email design was almost overlooked since it didn’t render properly. Using a preview tool to see how your email renders in different email programs and mobile devices will ensure that investments made into mobile email strategy are flawlessly executed and visible to users.

WELCOME ED, SENIOR DEVELOPER

Ed is a software developer who has lived in the Boston area his entire life. While he graduated from U-Mass Lowell, he prefers to think that most of his education as a software developer came from his time at a handful of local companies doing web, desktop and mobile development.

Ed is excited to join the Litmus team not only because he’s a former customer, but also because he’s good friends with another Litmus developer, Eddie. Ed is a huge fan of Microsoft’s development tools (including the .NET platform), and is excited to hone his skills while expanding his programming knowledge at Litmus. He has already started working on some features with Brendan and is looking forward to his first “ship it” moment when he releases something he’s crafted to the Litmus community.

When he’s not working, Ed tends to bounce between interests. Last year, it was the creative sandbox-style PC game “Minecraft.” This year, he’s taken a shine to arcade collecting and repair. He’s owned  and refurbished three pinball machines so far and plays weekly in a local league.

When he’s not gaming, Ed can be found spending time with his fiancée, cycling around Boston, and listening to bands that you swore broke up years ago. You can follow Ed on Twitter @richthofen.