Tag Archives: design

Mastering Mobile Email: Part 1- Template and Design

Mobile use can no longer be described as a consumer trend—it’s now a mainstay of modern media consumption. Email use on mobile devices is no exception, as we recently reported that over 69% of emails from leading B2C brands were opened on a smartphone or tablet.

However, the concept of “mobile optimization” represents much more than making your email fit a specific pixel width. In this “Mastering Mobile Email” three-part series, we’ll feature a total of 15 tips to help you fully optimize your mobile email campaigns. Let’s get started with 5 tips for making the most of your email template and design:

Template and Design
1.     Edit your content. Simplify your mobile template to include your highest-priority content. When it comes to mobile, less can mean more.
2.     Use a single-column layout. A single-column layout that stacks content vertically enables scrolling and avoids forcing your readers to zoom in and navigate around the email.
3.     Mobile-friendly fonts. Increase font sizes and place text on high-contrast backgrounds.
4.     Put primary calls-to-action “above-the-fold.” Follow a vertical hierarchy, and place your most important call-to-action above-the-fold – i.e., the part of the email template that is immediately viewable when opened on a mobile screen. For a one-stop guide to mobile screen sizes, check out this list from screensiz.es.
5.     Think “all thumbs.” Enlarged buttons allow for easier click-through. Apple guidelines suggest using at least 44 x 44 pixels for any tappable elements. Incorporate ample white space between the elements of an email to help each piece stand out and make it easy to click-through on links. Bare Necessities does an excellent job of optimizing mobile call-to-action links (see example).

Ready for more mobile tips? Check out how to fully optimize your emails for the mobile inbox using cross-channel integration.

[slideshow_deploy id=’217′]