By Josh Hecht in Design on April 23rd, 2013
With more and more emails being opened on mobile devices, responsive design has become a priority for many marketers. But not everyone is ready for the time and investment costs needed to create a truly responsive email marketing design.
There’s no shame in having a stop-gap. Here are some ideas on how you can quickly (and, more importantly, easily) optimize your email marketing templates for mobile marketing campaigns.
1) Subject and Pre-Header Length
Limit your subject lines to 35 characters and your pre-headers to 80 characters. Several studies have shown that shorter subject lines dramatically outperform longer ones. This will also ensure that your message can be fully viewed when opened on a mobile device. Make sure that when your email is opened, your pre-header is linked and located above the “view this message as a webpage” option.
2) Keep your Preview Pane in Mind
Here’s some hard numbers: about 53% of B2C email subscribers and around 80% of B2B subscribers view emails in a preview pane. So, by moving your offer up and having copy and CTA on the left, this ensures that Android users don’t just see a background or partial image. If you’re optimizing your email templates properly, these few inches of space can entice viewers to move from preview to open.
3) Font and Button Size
Assume your audience has bad eyesight and large thumbs: using 16px font size and 48px wide buttons are a good place to start. Sure, your desktop version’s fonts could end up being a bit larger than your readers might be used to, but that’s OK – your mobile users will be happy.
4) Consider Your Content
Evaluate the content of your emails: What links garner the most clicks and what are your best converters? Not everything deserves the same real estate, and some of your content might not deserve any at all. Include the top 3 or 4 navigation links and lose the rest. You can always test links back in later.
5) Fake It ‘til You Make It
Initially, you can create an optimized email marketing template without going anywhere near the media queries required to fully adapt your email. Plus, you can do it without sacrificing the desktop experience. Think of your email as a single column of stacked rectangles:
Then just fill in your content! This works because it’s simple, easy to scan, and clickable.
By making these relatively painless changes to the user-experience, content, and structure of your email template, it will make the transition over to a truly optimized template easier in the future.