HubSpot COS FAQ: Are My Marketing Emails Using Responsive Email Design?

This is another in our series of  HubSpot COS FAQ’s based on questions we get asked a lot by HubSpot customers who are interested in migrating their website and blog to the Content Optimization System (COS).

Are my emails using responsive design? Do my emails look different on different platforms?

If you read your email regularly using an Internet-enabled phone, you probably know that it’s an experience that can swing from awesome to awful. While an email newsletter can look superb in the inbox, when squeezed onto a small screen, it can become absolutely unusable, with small fonts, narrow columns and broken layouts being common issues.

A few years ago, it was rare to find someone with a phone that could access email — now it’s the norm. Not only do many people now own smartphones, but many of are using these devices to check our email.

43% of all email is opened on smartphones

In March 2013, 43 percent of all email was opened on a mobile device, according to Litmus. But that number alone doesn’t tell the whole story. For some comparison, mobile opens were at just 10 percent in 2011 — that’s an incredible 330 percent change! And while mobile opens are skyrocketing, desktop opens are going in the exact opposite direction — down 44 percent over the same time period.

This means that instead of designing emails for large screens, marketers will need to design emails for fingers and thumbs. You need to create emails that look great no matter where they will be read — on a desktop, a laptop, a tablet or a smartphone. In the email marketing world, we call these mobile-friendly emails.

7 tips for mobile-friendly emails

1. Be as concise as possible. This is a good rule for any email, but it’s essential when designing for mobile. Screen real estate is limited, so keep the design clean and simple — focus on the essentials.
2. Use a single column template. Often with layouts of 2 or more columns, your readers will have to zoom or scroll to see everything. This can make it difficult for them to navigate to the call to action in your email. Using a single column template will make your content much more flexible for all screen sizes.
3. Give up the tables. Don’t use tables in your email anymore. They simply don’t display consistently on all smartphones. And you really shouldn’t need them if you’re using a single column layout.
4. Keep your text as text. Too many times we see emails that have taken good text and turned it into an image. Don’t do this! Many people have images turned off in their email software, which makes for faster mobile downloads. Use text for your message, and an image to highlight the message or showcase a product or idea.
5. Use a single, clear call to action. Make sure to include a call to action and put it near the top of your email. Tell your readers what you want them to do, and make it really easy for them to do so. You want them to take one specific action, right? Make sure you’re very clear in telling them what to do (and the benefit in doing it!). And remember — with mobile, the finger is the new mouse, so make sure it’s really easy to click.
6. Avoid teeny tiny fonts. Make sure your text can be read easily. Use a minimum of size 11pt font for body text and 22pt for headlines.  We also recommend using a strong contrast of colors, like dark text on a light background. Many people turn down the brightness level on the mobile device to help conserve battery — and they are often reading on the go outside in the sunlight — so a strong contrast of colors will be easier to read.
7. Limit the use of images. Only use the images that are essential to your email. You can’t assume that your images will be displayed — many Android devices turn off images by default. Be sure to include image descriptions (alt text) for every image to let people know what the image is even when it’s not being displayed. A good tip is to always preview your email and make sure it still looks great, even if none of the images are displayed.

How can I see what my email looks like on various devices?

Since you’re reading this post about the HubSpot COS, why not use the built-in email viewer? When you’re creating or editing an email, you’ll see a short menu at the extreme bottom right of your screen:

Click the “Preview in other inboxes” button, and you can select any combination of popular email clients to test. We generally test Android 4.0, iPhone 5, Apple Mail 6, Outlook (from 2003 to 2013), Outlook (Chrome), Gmail (Chrome), and Yahoo! (Chrome) as we write for a generally tech-savvy audience.

The bottom line: Use responsive design and test on various devices

A simple one-column email will look good in most modern email clients. Following the 7 tips above will help you make sure that your email generally works.

Your designer can also use CSS media queries to custom design the look of your email for specific platforms.

Be sure testing is ALWAYS on your mind before you click “Send” so you can be sure your emails look good on all the devices your recipients are likely to use. With built-in testing now available in HubSpot, there’s no reason not to use it!