Mobile Email Design 101

Depending on when you send and who makes up your audience, mobile devices will account for 10 – 30% of all email opens (source). Let me repeat that: 10 – 30% of your emails are being read on a mobile device.

Have you even looked at your company’s marketing emails on an iPhone?

Esquire eNews email design

What is important here? What is all that tiny, blurry stuff at the top? Is Gisele with Eli Manning now, I thought she was married to Tom Brady?

It might not be pretty. That could mean that those emails you think are going to be big hits are instead big duds with around one out of every five of your customers, regardless of how well thought out your messaging, imagery, or marketing plan is. Your emails could be broken, hard to read, overly complicated, or just plain ugly. If you didn’t design your email with mobile in mind then there’s a good chance you’re leaving conversions on the table with your email marketing campaigns.

The same email will be displayed on all HTML-based email clients including smartphones, so take the time to make sure you’re communicating as effectively as possible to all of those in your email lists. Some basic design changes to your emails can make a huge difference in the usability and success of your emails.

Sure, iPhones and Android phones in general do a great job rendering even complicated email designs. The default clients on modern smartphones actually do a much better job of displaying CSS (including CSS3) emails than the most popular desktop and webmail clients. That doesn’t mean, however, that they display emails in a way that is going to make your subscribers want to read your content or click the links you want them to click. Depending on your text size, layout, and image selection, there is a chance that subscribers won’t even see the most important parts of your email.

As with webpages, the email clients simply either zoom out to fit the entire width of an HTML email design into 320 pixels or with simpler emails arbitrarily increase all the font sizes. There is more that you can and should be doing to make your emails successful on mobile devices.

The first steps to a successful mobile email strategy include following some general mobile best practices and focusing on the readability, impact, and primary conversion of your email. By implementing these tips you can make your emails more effective regardless of where your subscribers check their email.

Best Practices for Mobile Email Design

Whether it’s for a mobile website, an app, or mobile email, there are some basic principles that should guide design decisions for mobile projects. Always keep in mind, “one finger, one eye.” This is the easy to remember idea that the typical mobile user is only giving your email one eye’s worth of attention and one finger of interaction. They’re distracted. Whether it is because they’re actually on the go walking down the sidewalk or because they’re reading your email on the couch while watching Mad Men, when designing for mobile it is critical that you acknowledge and design to the fact that your user will not be giving you their full attention.

In addition to distracted users, the other constraint introduced when designing for mobile is the limited screen real estate of the devices. While most desktop websites are built for 1,024 pixel wide and larger monitors, the standard for emails has been 600 pixels to account for the two and three column layouts of the typical email application. In portrait mode your typical smartphone is only 320 pixels wide and 480 pixels tall. This is half the size you’re used to working with. If your most important content isn’t easily seen in that initial real estate then there is a good chance it’s never seen at all, even if your subject line convinced them to open the email.

With these constraints in mind, here are three tips for making your next email campaign successful on mobile.

1. Design for Impact

MarketNet's email newsletter designed with mobile in mind.

The MarketNet Insights newsletter was designed with mobile in mind. The desktop design looks pretty good on mobile (left), even before the mobile-specific CSS was added (right).

You’ve got limited time and real estate to grab more of your users’ attention. What’s the most important message in your email? What’s the most effective imagery? Lead with that.

Refrain from being too text heavy at the top of your emails and avoid putting tons of common header elements at the top of every single email you send. Both on the desktop and on mobile phones, excessive branding, taglines, website navigation, giant social media icons, and long disclaimers are largely ignored and only serve to push the actual important content further down and often off the screen. Reduce these elements as much as possible on emails and where possible use CSS media queries to hide these elements for users viewing the email on a small screen.

The easiest, most effective way to optimize your email design for both desktop and mobile is to stick to a one column layout. Due to the HTML tables required for layout by email programs such as Outlook, shifting or reordering of columns for better display on mobile is difficult. Content such as a secondary column can be hidden for mobile, but moving it around is not an option. Sticking with a single column means all your content is accessible and also makes it relatively straightforward for the person coding your email to scale down images and content from 600 pixels to a mobile-friendly width.

2. Design for Readability

One of the primary reasons emails are ineffective on mobile is tiny font sizes. If the device has to scale your email to fit in the restricted width it will also make your text sizes much smaller than is actually legible. A user can pinch and zoom to see the text at a larger size but you’ve lost control of the conversation and are now reliant on hoping the user zooms into the text you most need them to read.

Font sizes don’t necessarily need to be adjusted proportionately. The important thing is to make it readable and reinforce the content hierarchy on mobile devices, not to exactly make a scaled version of the desktop version of your email.

For mobile-friendly emails no text should be smaller than 12 pixels and if possible use even larger sizes to make sure the text is easily seen at a glance in addition to being easy to scan. That doesn’t mean make every bit of text the same size; the reader will not know what content is more important than others. Make important callouts a little larger to stand out and your headings should be at sizes of at least 16-17 pixels. Keeping the hierarchy logical and clear will make your email easier to follow and allow you to place emphasis on the elements that are most important to your messaging.

3. Design for Conversion

MarketNet's big ol' Learn More button

The already large Learn More button is 20% bigger proportionally for mobile (right).

One of the biggest hurdles you’ll face creating mobile-friendly emails is making the important calls to action pop when displayed on that tiny screen. If your scaled down email allows the reader to see 18 different pieces of information at once then they’re being forced to guess and choose the one they think they might be interested in. In addition to a simplified layout and properly scaled images and text, mobile email design should also focus on highlighting those key conversions.

While other email images will get much smaller (about 50%) to fit in the limited width of mobile screens, your primary call to action should still occupy as much space as possible. Inserting these buttons separately from product images allows you to downscale them at a different percentage. This means the buttons can be proportionally larger and more eye catching for mobile users. This also means the button text will be easier to read. Creating larger, more obvious calls to action in your desktop version of the email is also a good idea and makes doing the same for mobile even easier.

Making your buttons and links larger doesn’t just help the user see them, it helps them actually click them. Research shows that 44 pixels square is the smallest size that users can consistently interact with on touch devices without making frequent errant taps. That doesn’t mean every button has to be 44 pixels tall, but the clickable area around it should be. Make your links as big as possible and give them room to breathe from other page elements to avoid frustrating users, especially with your base design elements and the most important calls to action.

Improving open rates will also increase conversions. You already know subject lines are huge for reaching high open rates on your campaigns, but with mobile they’re not your only tool to inform and encourage your subscribers to click and read your emails. Many mobile clients (and web clients such as Gmail) grab the first bit of text content and preview that to the user before they even open your message. Often that bit of text is something exhilarating such as, “To ensure delivery please add someone@someplace.com to your list of safe senders.”

While that delivery and hidden image text is important, you can add a special promotion or some compelling copy on the first line and safely push that instructional text down just one line. Using an effective preheader you should see immediate boosts to your open rates in email clients that display those short previews. Good preheader copy can also be successful at increasing conversions in traditional email clients so add them and get the added bonus on mobile too.

Brian Behrend

About Brian Behrend

Brian's title at MarketNet is Director of Interactive Strategy but he has his hands (and his brain) in every part of the process of creating solutions for clients. From the discovery phase to website launch, he uses his background in business, marketing, and web programming to make sure projects succeed. View all posts by Brian Behrend
blog comments powered by Disqus