shutterstock_82818058Responsive email design is the new normal and how anyone sending email today should approach the design of their marketing and transactional communications. Used properly it enables you to overcome the complications of distributing email in a landscape with multiple generations of iPhones, an ever-growing variety of Android devices, tablets, laptops and desktops. Beyond devices, each email client has its particular rendering quirks such as how Gmail only renders CSS inline and will strip, or not render, stylesheets in the <head>.

When email doesn’t render properly, it is a strike against your brand. If a competitor’s email renders well across multiple devices and yours does not, that’s a problem. Smart responsive design that renders consistently and seamlessly across devices eliminates a hurdle to your brand’s visibility.

About half of all email is opened on mobile devices, so SparkPost recommends that you think about the design of your emails with a mobile first mentality. As with many things, it is far easier to scale complexity up than it is to try and shrink complexity down. If we focus on what works for mobile such as top to bottom flow instead of multiple columns, buttons (clickable areas) designed for thumbs rather than a mouse pointer and recognizing that we don’t have enough physical space to pack in an excess of content, we end up with useful creative restraints within which we are free to craft more effective email.

Taking a mobile-first approach provides assurance of a good user experience. We’ve all experienced the frustration of the errant tap that leads you to the wrong place. More thoughtful, responsive design removes barriers to our email content achieving the right response, leading the reader to your landing page, exciting offer, or valuable content and putting them on the path to conversion.

Responsive design is not only better for engagement; it reduces the overhead of your email workflow. A good responsive template allows you to easily maintain any flavor of content because you are no longer occupied with repeated testing and manipulation of your content. Start with the assumption of smaller screens about 600 pixels wide and use tools like CSS3 media query to adjust your content dynamically based on the device or email client rendering your emails. Once you’ve found a format that works well across the widest swath of displays, you’re free to focus on content that works.

If you’d like to learn more about responsive email design, including media query usage, I recommend Litmus’s resources on this topic.

I wrote a post like this (with more cursing) to help explain why everyone’s emails look different to my non-HTML-knowing colleagues. Some of them found it informative and some merely found my pain entertaining. Either way, the value must be shared! The challenges of coding responsive email templates are being felt by more developers every day. Recently we decided to completely overhaul our email templates to ensure that they were optimized for viewing on mobile devices. That decision was fueled by several key statistics that were brought to light by recent studies:

  • 47% of all email is opened on mobile devices
  • Emails that aren’t optimized for mobile have an 80% higher chance of being deleted

The horror of having our emails immediately deleted after all the blood, sweat and tears that went into creating them was too terrible for our marketing team to stomach. Thus, my foray into coding responsive email templates began…

Quick Aside: Marketo

Marketo email templates are awesome. They make it so that we don’t have to write every single individual email we send out in HTML code, which means I only have to code them once! This is a vast improvement over the old days. Because we use Marketo, you may see some code you wouldn’t normally see on non-Marketo templates. None of this code is affecting the styling or any of the stuff I’m going to complain about shortly.

How Browsers Show It

Below is what the coded template looks like in Chrome and in the Marketo preview. These are environments where the code is rendered accurately and consistently. Browsers are updated all the time to allow newer, cooler, more powerful coding practices over time.
Responsive Email Template in a Browser
Marketo does a good job telling you if you have certain tags or styles that don’t work well in emails (like floats, padding). It doesn’t magically know what your email is supposed to look like though, so spacing, alignment, colors, hover states, etc. can be WAY off in some email clients and Marketo wouldn’t know to tell you. You have to keep testing and decide on a happy medium in many cases. Here’s a sample of our code from one of the templates: (you can skip this section and look at the take-aways below if you can’t read HTML)

Take-aways for people who can’t read HTML:

  • The text formatting I’m using here includes headers (h1, h2, h3), paragraph tags (p), and Unordered Lists (ul, li). All of these tags are supported by Marketo’s email editor, and are standard HTML tags that have always existed in the language for 20+ years.
  • The in-line style tags you see here are the best way to FORCE those objects to be displayed a certain way. If these don’t work, nothing will. style=”font-family:arial,helvetica,sans-serif; font-size: 1.1rem; line-height: normal; [etc.]” is defining the characteristics of that block of text for example.
  • I’ve placed a couple ‘reminders’ (using the class “editor-notes”) within the template for email writers and editors. These reminders should be deleted before sending, but are hidden with CSS in case they forget.
  • Like all things, lorem ipsum is better with bacon.

Now, take a look at the email’s appearance, and its code after it’s gone into Outlook Web Access: responsive email templates On the visual side (the email preview pane in the middle) :

  • Most of the text has been reduced so small that it appears as dots.
  • All the images are at their maximum size and not aligned or spaced correctly.

On the code side (the code inspector on the right) :

  • All of my header and paragraph tags have been removed and replaced by generic DIVs.
  • Most of my highly specific inline style code has just been almost completely removed. The same is happening for the images (hence their huge size and lack of spacing).
  • Unwanted tags have been added (<span style=”font-size: xx-small;”> and <font-size=”1″> in particular) that are shrinking the text down to practically nothing. These tags are nowhere in my template.

So Outlook is effectively ignoring every attempt I make to steer the visuals of this message. Awesome.


If I double-click the message to open it in a new window… responsive email templates It looks mostly correct! My headers and paragraph tags are still intact! It didn’t strip out all my style code! This all seems great, but how often do you look at your emails fully opened in Outlook? I almost always only look at them in the preview pane.

This raises the questions:

  • Why does Outlook Web Access sterilize (and pretty much sabotage) my code in the preview window but not in the opened version?
  • How can I possibly optimize our emails to look right when the email client is ignoring and overriding my code?
  • Why does Outlook Web Access look completely different than the software version of Outlook?

Email clients are not standardized as well as browsers are (and browsers aren’t perfect either). Each one decides how to interpret the same code in its own ways. For example, Gmail is the only major email client that still doesn’t allow <style> tags. Outlook doesn’t allow CSS to define a background image for some reason. Major differences like these between high market share email clients are what cause the differences in output. When the ones lagging behind in each aspect finally decide to catch up, coding email templates will be a breeze. On top of all this, these emails can look different on each individual person’s screen. My Outlook is different from my co-workers’. Even my Marketo preview looks different from one of them (and we’re both using the same OS and browser). It can be infuriating!

But I take solace…

Because our emails now look awesome on all our iPhones and Android devices. Responsive Email Templates for Mobile Now we’re really walking the walk of mobile customer engagement, and not just talking the talk!

5 Responsive Email Template Tips

Luckily, I’m not a pioneer in this venture. There are tons of developers writing articles about responsive design all over the ‘net already. Some of the tips they gave me that really helped out included:

  • Keep it simple. Complex layouts WILL die the moment they hit Gmail or Outlook. It’s better to keep things looking simple across the board and have them all look “good enough” on the more challenging browsers. The alternative is having your emails look amazing on one or two clients and be a massive failure elsewhere.
  • Consider your viewable area while designing and writing. You may have a few paragraphs in your email, but long blocks of flat <p> text get skipped or scanned if you don’t break them up. When you view the email on an iPhone 5 for example, you don’t want to scroll too far without something pretty. An image, a quote, a header, etc.
  • Don’t be too specific with your design specs. Emails in general are rarely going to end up pixel-perfect. Add in the multi-device functionality and the simplistic responsive breakpoints you’re using and nothing will ever line up perfectly. Focus on visual hierarchy and scale each element to their neighboring elements.
  • Have a clear sense of the minimum and maximum specs you want to support. We opted for the iPhone 4 as our minimum spec, and a 1024 width browser window for our max. You can go lower and higher, but just make sure you don’t start designing or coding until that decision has been made.
  • Use your thumb for usability testing. If your call to action is too small for your thumb to hit with precision and ease, then it needs to be bigger. The entire purpose of your email is that call to action, so if people can’t tap/click it you may lose that hit.

And that’s pretty much what you need to know when designing for responsive email templates.

Want to get started on your first mobile marketing campaign? Check out our Go-to Guide for Mobile Engagement, a webinar presented by Forrester Principal Analyst & VP, Julie Ask!


Weekly Email Marketing News Digest

We are taking a look at the relationship between optimizing for mobile and responsive design this week with the key challenge being the smaller screen size. Designing for the mobile age has become a particularly important topic due to studies that reveal statistics such as 69% of email opens on the mobile.

We’ve also snuck in Chris Penn’s take on the confirmation opt-in debate for readers who are still following that news thread.

Mobile Marketing And Email: 4 Ways To Use Them Together

Here are 4 ways to ensure the integration of mobile and email marketing.

  • Mobile Email: Make sure messages are readable on a smaller screen.
  • Mobile Sites and Apps: Ensure that you either have a mobile site or app that is easily accessible for visitors reading off smaller screens.
  • Location-Based Check-Ins: Tie email campaigns to check-in deals.
  • Geo-Targeted Ads: Consider sponsored search with keywords related to your brand.


Responsive Email Design: The Ins And Outs (article removed from original site)

Here are some mobile design best practices:

  • Design using large fonts (14px for body copy and 22px for headlines)
  • Clear call to action
  • Consider a single column
  • De-clutter the screen and provide minimal options for links
  • Have mobile-friendly landing pages


Optimizing for mobile? Don’t forget your subject line.

While you may be busy coding a new email template that is mobile-friendly, it’s important to keep subject line lengths in mind. Due to the smaller screen size, it’s best to keep your subject lines to 20-30 characters. Here are a couple of examples.


Mailbag: Single or Double Opt-In For Email?

Christopher Penn outlines the three different types of opt-ins used for email lists and gives his take on which works best for him. The choices?

  1. Single opt-in: Fill in a form and you’re subscribed to the list.
  2. Notified single opt-in: Fill in the form, you’re subscribed to the list and you get an email confirmation with an opt-out link.
  3. Double opt-in: Fill in the form, you get an email requesting confirmation by clicking on a link

For more information on the list confirmation debate, do check out The Debate on Confirmation Opt-Ins: Are they always necessary?

Responsive Web Design Infographic

Here’s a great infographic that explains the key features of responsive design.


Interested in finding out more about engaging your customers through mobile? Check out The New Communications Standard!

The New Communications Standard whitepaper

Weekly Email Marketing News Digest

Don’t you just love the holiday season? There’s always something new to celebrate. Now that Christmas is over, we’re all gearing up to ring in the new year in just four days!

And as always, at the beginning of a new year, it seems apt to reflect upon your hits and misses and overall individual or company performance. In line with that sentiment, here are a couple of tools to measure your annual email usage statistics.

Know Your Gmail Stats using Gmail Meter

With over 425 million active Gmail users in June 2012, Gmail is arguably one of the leading providers (if not THE leading provider) of free webmail. The Gmail Meter, developed by Romain Vialard, a Google Apps Script Top Contributor, provides users with basic email statistics to better understand their email usage. These include:

  • Volume Statistics
  • Daily Traffic
  • Traffic Pattern
  • Email Categories
  • Time Before First Response
  • Word Count
  • Thread Lengths
  • Top Senders & Recipients

Contactually Launches A Year-End Email Report Card That Goes Deeper Than Google’s Gmail Meter Report

The title says it all.

For a deeper more insightful look at your email usage statistics, get a personalised email report card from Contactually. Interesting metrics include:

  • Email Mood
  • Popular Subject Lines
  • Popular Words
  • Subject Line Length

With the amount of spam and direct marketing messages that one receives every day, it’s hard to see how someone can get a good grade on metrics such as unresponded emails and email totals. Nevertheless, it’s an entertaining and beautifully rendered report card for one’s own amusement – as well as an excellent way to gain brand awareness in the marketplace.

What Marketers Can Learn From a Gaming Company’s Email Tactics

When it comes to gaming, email is key to gamer retention, increasing customer lifetime value as well as brand recall. MarketingProf’s advice to gaming companies is to provide disclosure and value for gamers when requesting for their email. Here are the recommended guidelines for lead nurturing and enhanced customer service:

  • Request for an email early in the gaming process together with details on what players can expect to receive through email – tip & tricks, tutorials, discounts.
  • Provide players with a value-add of some kind immediately after they sign up through their email address. For example, when I signed up for Blizzard Entertainment’s popular MMORPG game World of Warcraft, I was immediately provided with a free downloadable online guide to the game through email.
  • Use of event triggered emails for more effective brand engagement instead of weekly updates. Has the player just conquered Diablo III? Invite them to start playing Starcraft with a free trial.
  • Use analytics to determine the playing habits of individual subscribers, followed by appropriate tailoring of the messages. For example, gamers who play frequently probably wouldn’t mind receiving weekly email updates from your company, but not those who have not played in a while. For these players, reactivation messages with gifts when they resume game play would be more effective.
  • Give players control of the messages they receive – let them set the terms and grounds for communication with a preference center. If they opted in to certain types of communication, they’ll be more likely to appreciate those emails from your brand.

The article also calls for branding consistency by ensuring players who have signed up for a specific game are getting emails from the game they signed up for and not the parent company. I have to say, I’m not sure I entirely agree with this one though. While I am a huge fan of brand consistency, I’ll admit that email cross-selling under the parent company’s name has worked on me. If I am interested in Dragons of Altantis from Kabam for example, I’m also likely to be interested in a 50% offer on Kingdoms of Camelot.

Now? Really? Spamhaus Blacklists Retailers for Typos

Major retailers like Gap and Gilt have found themselves on email blacklists this year – simply for typing errors in subscriber’s email addresses. Such errors typically occur during point-of-sale where customers opt for paperless receipts to be sent to their inbox. Up to 60% of a sender’s email may not make it into inboxes when placed on such blacklists. With the festive season being a prime opportunity for retailers to increase their sales and maximize customer lifetime value, the timing couldn’t be worse.  Its impact on these retailers could be akin to Google’s Florida algorithm update in 2003 right before the holiday season, which left many holiday retailers scrambling.

Why mobile email templates need to disappear

We’ve been highlighting stories about designing for the mobile recently, and with good reason. Consider the incredible escalation in the adoption of mobile devices as seen in John Pinson’s The Internet’s Growing Faster Than You Thought and the fact that 35% of all emails are now viewed on mobile devices.

It’s no longer possible for designers to design specifically for each and every new mobile device that is launched, yet it is imperative to ensure that a companies emails are optimized for the mobile. Hence, here are three tips for mobile design:

  • Use a one column design
  • Simplify call to actions due to lack of screen real estate
  • Use media queries

 Gaming emails aside, there’s plenty you can do with your transactional email to keep subscribers coming back for more. Optimize your transactional email today with the help of the Transactional Messaging Best Practices eBook.

Transactional Messaging Best Practices