Easy Tips for Mobile-Friendly Emails

email iconImage by dragonessilverwingWith publishers and retailers increasingly relying on email communications as a critical part of the way they reach consumers, and with more and more Canadians using computers, tablets, and phones interchangeably to access their email, mobile-friendly email design is no longer an afterthought.

Email marketing layouts used to be a lot like PDF ebooks: you’d do painstaking work on the layout, get everything placed just right, and then send the finished product out into the world, only to discover that it’s clunky or downright unreadable when it’s opened on a small screen.

I attended the ExactTarget Connect Global Tour conference in Toronto yesterday, where Melinda Krueger, a senior marketing consultant for the digital marketing provider, spoke about some of the common issues she sees in email campaigns that aren’t designed with device flexibility in mind.

I pulled out a few quick pointers to share with you—these are all quick, relatively painless ways to tweak your email campaigns to give mobile readers a better experience, without making any major changes to the design you already have.

1. Go With the Flow

Your readers are switching screens, changing the size of browser windows, and reading your emails on devices as small as a credit card or as big as a television. And chances are, your text and images are reflowing in all kinds of ways to fill the space.

The good news is the old adage that you should keep your key content “above the fold” is intended for web pages, not mobile emails. So there’s no need to obsess over items that extend beyond the bounds of the screen.

Do, however, try to reserve the upper left corner of your email for important elements. That’s the one spot that you know everyone opening your message will see, regardless of device, so fill it with content that will entice people to keep reading.

2. Make the Most of Your Preheader

Your preheader is valuable real estate, so use it to make an impact! It may be a tiny element when you’re setting up your email, but most email clients display this text in the inbox, so together with your subject line it forms the all-important first impression that makes or breaks your campaign’s open rate.

If you’re currently skipping the preheader text, or using it for housekeeping details like the date, an image, or the “view this message as a website” link, you’re missing out on a great chance to tell readers more about why this email is the one they should be opening next.

3. Design Details

Readable text sizes, contrasting colours (no patterned background!), finger-friendly links, and textured buttons that invite tapping. It’s the little things that count.

And give some thought to what your email looks like when images are off. On iPhones, images are on by default, but on Android devices they’re off by default. If your reader has actually opened the email, but needs to show images to get any sense of the email’s content, you’re just creating one more reason for somebody to abandon the email before they get your message.

4. Testing, Testing…

There’s no substitute for actually testing your email format on different devices. Ever get emails where the preheader says “Enter your preheader text here,” or where the sidebar is only 3 characters wide when you view it on your phone? These are just a couple of the disasters that can befall you if you don’t test.

If possible, find out what devices/browsers are most prevalent among your users, so you can at least be sure that you’re looking good for the majority of your users. You don’t have to make your friend with IE9 open every campaign you send out, but do try out your newsletter on a variety of browsers and devices every now and then. You don’t want people unsubscribing because of easily fixed formatting issues, now do you?