Post navigation

Mobile Email Design

Sign up for Marketer's Blog Emails

In the blog post, “Email Marketing in 2012” we discussed the growth in email consumption on mobile devices. It’s estimated that nearly 40% of mobile users in the U.S. read their email on a mobile device. For many of us, the hand-held device is the first and last place we check our emails, from the moment we open our eyes in the morning to right before we shut of the lamp on the nightstand before going to sleep. Not to mention, in line at the bank, or in the middle of a long and boring meeting.

Mobile email on smartphone

This means that going forward, many of the people we are marketing to might conceivably see our emails only on their mobile devices.

With this new reality, here are a few quick tips for email design to increase the likelihood that your emails are viewed and acted upon.

Design for the small screen.

We’ve gleaned a few handy blog posts online to bring you the following tips (sources are listed at the end of this post).

  • Design for the iPhone (currently 320 pixels wide in portrait mode). That doesn’t necessarily mean your emails have to be 320 pixels wide! (That would look funny on a PC screen). Instead, for the more technical among us, insert a meta tag into your html code to define the “viewport” size. This little line of code can look like this: “ <meta name=”viewport” content=”width=640px, initial-scale=1.0; minimum-scale=1.0, user-scalable=yes”/>
  • Use bigger fonts. The iPhone likes to scale up text that is under 12px (pixels), which could break your layout. Apple recommends using a minimum font size of 17px; other sources quote as low as 14px for text and 30px for headings. The point is, you want text that is not only large enough to read without having to “pinch to zoom” but also large enough for large fingers to tap on in a link.
  • Design for fat fingers. Apple suggests that clickable buttons should be at least 29 x 44 pixels. Not only that, you want to include padding around the button so that buttons (and other clickable graphics) aren’t too close to each other, otherwise, many people may accidentally click on the wrong button. The minimum suggested “white space” around a button is 88 pixels.
  • Put content elements one on top of the other, not side by side. This will ensure that everything is visible in one screen without having to scroll to the right as well as down. Put the most important elements on top, but make all content compelling to entice the viewer to continue scrolling down.
  • Use “Preheaders.” What is a preheader? It’s the text you see in an email just above the graphic header at the top. Preheaders look like this:Using a pre-header allows the viewer checking email on a smartphone to see part of your message before opening the email, providing extra enticement to open the email. (As you can see in the example above, in this case the pre-header is used simply to provide instructions if the reader can’t view the html email – but this was also an opportunity to provide a longer marketing message.). Combine this with a winning subject line, and you could significantly increase open rates.

    Preheader on the desktop

    Sample desktop email preheader

    Sample smartphone email preheader

    Sample smartphone email preheader

  • Shorten and sharpen your copy. You’ve got very little real estate in which to gain attention and action. Make headlines and copy short and punchy. Make a compelling offer. Make it super obvious what to do next, such as “click here for instant savings.”
  • Use high contrast. On small screens, subtly contrasting colors and images aren’t as visible. The goal is ultimate readability so use strong contrast to help the eye.
  • Test, test, test and yes, test. Sure, lots of people have iPhones with 320 px wide screens. Then again, just as many people have Android phones of varying pixels widths and screen sizes, not to mention different web clients. Make sure to test how your emails will look on numerous types of smartphones before you blast them out.
  • Don’t forget your web page!What good is an email perfectly designed for the small screen if it takes your reader to a web page designed only for the big screen? Make sure your landing pages scale to fit nicely in a small window. The elements of design described above apply to web page design too. As an example, scan the QR code below to see what the mobile version of this blog post looks like on your smartphone:

    QR Code to ZUZA blog post "Mobile Email Design"


These are general guiding principles for mobile email design. If you’ve got a savvy internal development team creating your emails and web pages, great. Otherwise, we recommend hiring a web programmer to help you put your campaigns together and test them for view-ability on multiple mobile platforms.

Here’s to the Marketing Champion in all of us. See you in the next post.




Comments are closed.