How to Use Responsive Email Design to Optimize Your ROI

Do you know how many of your subscribers use mobile devices to read your emails? Probably a significant portion of your email list, given the trends among mobile users today. If your email design isn’t optimized for mobile, the poor user experience is likely having a negative impact on your response rates and return on investment (ROI). In this month’s feature, we talk about responsive email design and how it can be used to improve your subscribers’ mobile user experience.

What Is Responsive Design?

Responsive design is an email or web landing page that is optimized for the screen or platform it’s being viewed on. In other words, whether you’re viewing an email on a 27-inch desktop computer or on a smartphone, you’ll have an optimal viewing experience and comparable functionality.

More and more people are using mobile devices to check their email and browse the Internet. Today more than four in 10 adults in the United States own a smartphone, for example, while about one in five owns a tablet. Here are some recent mobile statistics that support why designing email campaigns with your mobile subscribers in mind is vital for your ROI:

7 Mobile-Friendly Design Tips

There are some simple steps you can take to help make your emails easy to read and respond to for your mobile subscribers. Here are seven top mobile-friendly design tips:

  1. Design for touch screens. Keep in mind that mobile subscribers are using their thumbs and fingers to select links, rather than a mouse. In addition to spacing out links so they’re not accidently tapped, be sure the calls to action are large — a minimum of 44 by 44 pixels. Plus, navigation bars and advanced search bars are typically not effective in emails designed for mobile devices.
  2. Make the message clear, as well as quick and easy to read. Many of your subscribers using mobile devices are “on the go.” So be sure your copy gets to the point in as few words as possible. Plus, keep the key information of your message — including the call to action — near the top and to the left, so mobile users don’t need to scroll down or over to see it.
  3. Keep the important subject line content within the first 35 characters for mobile displays, while preheaders should take fewer than 80 characters to convey the main marketing message.
  4. Create single-column designs. Plus, primary content should be contained in widths between 320 to 500 pixels for mobile devices.
  5. Keep headline text at a minimum of 22 pixels and body copy at 16 pixels to help ensure readability of emails on mobile devices.
  6. Reduce the number and size of images. Images can take a long time to download — or not download at all — and their quality is often degraded for many mobile users. So if an image isn’t integral to your marketing message, don’t include it.
  7. Don’t forget the landing page. Once mobile users click through the email to your website, be sure your landing page is optimized for mobile, as well, to help drive more conversions.

Coding for Responsive Email Design

In addition to these design tips, the coding of the email or landing page is also critical to delivering a customized experience for mobile subscribers. The use of CSS Media Queries (an extension of the @media rule) in the coding lets the layout of the email or web page adapt to the device and screen size it’s being viewed on. In basic terms, this type of coding sets the page element sizing in relative units, such as percentages, rather than pixels. This means grids and images are “fluid” and won’t display beyond the width of the browser and screen that the code is being read on.

It’s important to keep in mind that not all mobile devices support responsive design techniques in the same way. That’s why you should test your email and landing page designs across a variety of platforms. The iPhone and other Apple iOS devices support media queries, for example, while Gmail and Yahoo! mobile applications don’t. For a good source of information about responsive design coding, check out software company Campaign Monitor’s Responsive Email Design Guide.

Although responsive email design may end up adding a little extra time to your design budget, you’ll see that the greatly improved user experience for your mobile subscribers will drive more conversions and ultimately increase your overall ROI.

Are your email campaigns achieving the best results for all your prospects and customers regardless of whether they’re reading your emails on desktops or mobile devices? The experts FulcrumTech can help you use responsive email design to get the most of your email-marketing campaigns. Email us or give us a call at 215-489-9336 and get started today!

4 Comments

  1. Reply Bob
    Posted

    This is a great article! Thanks for posting.

  2. Reply Rick Steele
    Posted

    Relevant and timely article. Thx Mitch!

  3. Reply Nadja von Massow
    Posted

    Would love to get your take on the challenges that these new Gmail and Yahoo (etc.) apps bring in terms of cross client compatibility.

    The lack of media query support and the inability to serve different email builds depending on viewing client (one of the major differences between responsive email and responsive websites) is making true responsive email distribution impossible at the moment. selective image display and 100% measurements for a fluid design not only fail, but also generate breaking layouts in independent email apps.

    That’s the status quo. Layout responsive B2C emails are currently not recommended.

    • Reply Mitch
      Posted

      Thanks for writing in. You raised some great points here. I’ll address your points in parts below.

      “The lack of media query support”
      Yes, many popular email clients do not support media queries at this time. However, we’re not concerned with whether webmail clients (such as Gmail) or desktop clients (such as Outlook 2010) support media queries. We’re only concerned with whether mobile email clients support media queries. Fortunately, many mobile email clients now support media queries including iOS, Android 2.2+, BlackBerry 6+, and Windows Phone 7.5+. Media queries work by overriding “default” styles. Many websites now take a “mobile-first” approach where media queries override the mobile styles for desktops or other larger screens. With emails, however, you should always take the opposite approach: optimize for desktop first, and override those styles for mobile. This way, if an email client does not support media queries (such as the Gmail mobile app), the email still looks great; it just may not be “optimized” for the screen size being used (i.e. the “desktop” version is displayed).

      “the inability to serve different email builds depending on viewing client (one of the major differences between responsive email and responsive websites)”
      I assume what’s meant here is on websites, it’s possible for the server to return different data depending on what device is making the HTTP request. With emails, however, it’s impossible to do that because the HTML and CSS is, essentially, pushed to an email account without any request. So there’s an inherent limitation in email in that we can’t know what device the user is going to use before we send an email. We don’t view this as a major issue, however. In order to have the strongest caching set up on a website, you can’t return different data depending on information from the HTTP request, so we generally avoid this technique if possible on websites, anyway.

      “selective image display and 100% measurements for a fluid design not only fail”
      I assume by “selective image display,” you mean adaptive images where a server returns an image that has already been resized for the display of the device that is requesting a webpage. The reason to use such a technique is not related to website rendering – it decreases server load because it’s now serving smaller images instead of all large images. It also makes a webpage load faster on smaller devices, which is good because, in general, smaller devices are less powerful and tend to load things slower to begin with. You should, however, avoid using large images in emails to begin with, so this issue seems a little irrelevant to me when it comes to email.

      I assume by “100% measurements for a fluid design,” you mean specifying images’ widths to 100% in a fluid design. Here I’ll admit I’m a bit unclear because I’m not sure why that would fail or why you would be interested in doing such a thing in an email, anyway.

      Essentially, you can’t expect responsive emails to work like responsive websites. They’re actually very different types of media and although they use some of the same technologies to function, they should really be considered separately. We now have very powerful mobile email clients that are very popular. At this point, responsive email design is essentially optimizing emails for these mobile email clients. It’s debatable how important it is to make an email responsive for mobile, but it’s not debatable that the technology is here, right now in 2013, to make it happen.

Leave a Comment

  • (will not be published)

Sign Up for NewsLever

Our free, monthly email newsletter

NewsLever is our free, monthly e-newsletter for B2B and B2C professionals who want to develop and implement powerful email-marketing campaigns that build relationships with prospects and customers.

  • This field is for validation purposes and should be left unchanged.

Privacy Policy|Learn More|Current Issue