Mobile-Friendly Email Design Recommendations

    Mobile adoption among businesses and consumers has skyrocketed over the past few years, and it's only going to continue to rise as smartphones deliver increasingly stellar experiences. Driven by the adoption of iPhones and Android-powered phones, smartphones outsold PCs for the first time ever in February, according to IDC. And since reading email is the No. 1 activity on smartphones, it’s only a matter of time before your emails need to be more mobile-friendly. Depending on your subscriber base, you may already be well past that point. A good first step is to check with your ESP to find out what your subscribers use to read their email.  This slideshow highlights recommendations from Responsys on making your email design more mobile-friendly.

    Mobile-Friendly Email Design Recommendations - slide 1

    Click through for mobile-friendly email best practices from Responsys.

    Mobile-Friendly Email Design Recommendations - slide 2

    Consider including a “view on mobile” link in the preheader of your emails that links to the text version of your email or an HTML “lite” version. The latter typically includes an image of your logo and maybe a small hero image, but otherwise minimizes image elements.

    Mobile-Friendly Email Design Recommendations - slide 3

    Rather than minimizing your mobile subscribers' email experience, make intentional choices to "mobilize" it.

    • Avoid using long subject lines, which will push the email content even farther down an already small mobile screen.
    • Reduce the width of your emails to 640 pixels or less. While the newest smartphones can zoom out on wider emails to give users an overview, mobile-friendly widths have been shown to increase a user's interaction and click through rate. Held in vertical orientation, most smartphones have screens between 320 and 480 pixels wide, so if your email is 640 pixels wide, it can be seen on a mobile device zoomed out 25 to 50 percent, so a subscriber can get a somewhat legible look at it prior to zooming in.

    Mobile-Friendly Email Design Recommendations - slide 4

    • Lighten your email file sizes. Mobile Internet speeds are slower than desktop connections, so try to keep your emails light. Some mobile email clients will require an additional button press to download the rest of the email when file weight is too big. The optimal email weight for mobile is 20K or less, and while that may not be a realistic goal for most marketers, the more you can slim down the file weight, the better.
    • Increase the size and padding of text link and button calls-to-action. When pressed against a screen, a finger covers 45 pixels. During a light, precise tap, it can target a 30 pixel area accurately, but most mobile email readers are on the go as they read. Make sure that your calls-to-action are padded at least 10 to 15 pixels to avoid frustrating tap errors. Your subscribers who are checking email as they walk down the street or step onto a bus will be grateful for the wiggle room. Be sure to factor in that your email may be zoomed out 25 to 50 percent depending on the width of your emails.

    Mobile-Friendly Email Design Recommendations - slide 5

    Mobile-friendly emails need mobile-friendly landing pages; otherwise, subscribers will be discouraged from clicking through.

    • Along with narrowing the width of your emails, optimize your landing page widths to be more mobile-friendly.
    • Keep landing page copy brief. Save the more expansive details for another page, deeper on your site. Mobile users who need to get the full scoop will visit when they get back to a computer.
    • Remove Flash from landing pages. Replace it with HTML5, CSS3 or JavaScript. The iPhone and iPod Touch, which still represent the largest portion of mobile Web traffic, don't support Flash yet, and neither does the still-prevalent BlackBerry. (Flash is supported for Web pages on Android, but often has long load times and can be difficult for users to interact with by touch.)
    • Remember that for touchscreen users, there is no hover-state for links; if they touch, they click.

    Mobile-Friendly Email Design Recommendations - slide 6

    • Include a link to download your mobile apps in your emails. These links are generally placed at the end of the body copy and typically grouped with community links, SMS subscriptions, blog and other links.
    • Consider sending an email dedicated to encouraging mobile users to download your mobile app.
    • Consider promoting your mobile app in your preference center, on your email opt-in confirmation page, in your welcome email series, and on your unsubscribe confirmation page.

    As you peruse these guidelines, keep in mind that the move toward mobile doesn't have to signal the death of feature-rich emails (at least not yet). Creating mobilized email versions is really a balancing act, where your shorter message should be comfortably consumable on a small screen if a user wants to see them while out and about — and possibly even hop into the store right after reading. Longer messages can be saved for when subscribers get home. That said, mobile users will remember which brands consistently deliver solid experiences — and that's a list your brand wants to be on.

    Get the Free Newsletter!

    Subscribe to Daily Tech Insider for top news, trends, and analysis.

    Latest Articles