Your SlideShare is downloading. ×
Designing Email for Smartphones
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing Email for Smartphones


Published on

With smartphone and tablets quickly outselling computers, the rush is on to optimize Email Marketing campaigns for all the different screen sizes. …

With smartphone and tablets quickly outselling computers, the rush is on to optimize Email Marketing campaigns for all the different screen sizes.

Watch this brief presentation to learn what you can do to help make your Email Marketing look great on smartphone screens.

As always, we welcome your feedback so please get in touch with us via email at

Published in: Business, Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Agenda Who Is Real Email Consulting? The Right Message at the Right Place Do Smartphone Numbers Justify the Extra Effort? 9 Tips for Smartphone Email Design. In Summary
  • 2. Who is Real Email Consulting?We help clients understand how well their emails perform. Internal and Industry Benchmarks Email Program Audit Program Strategy and Program Development Real Estate Analysis Email Score CardWe help clients learn more about their database. Database Reporting Identify groups that over/under perform within the larger database Discover which groups are not responding, and take action to spur interest
  • 3. Who is Real Email Consulting?We help clients optimize their Email Marketing. How to Structure Your Email Campaigns Does the Creative work for all readers of email? Images off? Subject Line Testing Creative Testing Time/Day Testing Redeployment strategiesWe help clients decide what emails to send. The Importance of the Welcome newsletter Are there other programs that should be sent? What do competitors deploy? Automated campaigns for consideration
  • 4. Organizations we’ve worked with
  • 5. Email Design for Smartphones
  • 6. The Right Message at the Right PlaceSmartphones have changed how Email is delivered.Early innovators in Mobile Email Marketing typically included a link to “View on aMobile Device” but those efforts are not effective or practical as more email moves tosmaller screens.
  • 7. Do Smartphone Numbers Justify the Extra Effort? The short answer is Yes! Nielsen reports that 31% of US mobile phone owners have a smartphone as of December 2010, and expect smartphones to become the majority by the end of 2011 . Figures for 2010 released by Gartner, show that smartphone sales increased 72.1% from 2009. Gartner expects US sales of smartphones to become the highest-selling consumer electronic device category . Morgan Stanley estimates sales of smartphones will exceed those of PCs in 2012. Nearly half (45%) of smartphone users check their email “constantly” throughout the day versus a quarter (28%) of non-smartphone users.
  • 8. View on Mobile • Most email today includes a “view on mobile” link in the pre-header of the email that links to a text or an HTML “light” version. • Typically includes an image of the marketer’s logo and maybe a small hero image, but minimizes other image elements. • At a minimum, this is essential for accommodating mobile users. • The experience is less than exceptional.
  • 9. Get The Skinny 320 px 480 px • Reduce the overall width of an email; for iPhones, the maximum width is 320 pixels when held up-right, and most smartphones range between 320 and 480 pixels. • To strike a balance between mobile and computer readers of email, try to build emails that are 640 pixels or less. • At 640 pixels, a mobile user can zoom out at 25% and get a good feel for what the email covers.
  • 10. Be Flexible • Email can be designed to adapt to the width of the viewers screen. • This method works best for email layouts that are simplified both in structure (basic layouts) and in design (limited graphics). • By adding the following code, you can set a custom device width: <meta name = “viewport” content = “width = 650″>. • Try to create variable templates; consider the following variable image code: <IMG style="width:90%; max-width:550px">. • If images must be hardcoded, use as small an image as possible.
  • 11. Be Reasonable• Text, link and button sizes need to be increased to accommodate for small screens and fat fingers.• In Apple’s Human Interface Guidelines (HIG) a “View Online” link/button should be “about 44 x 44 points” so touchscreen users can click it.• The image to the right shows what a typical finger looks like on a touchscreen. It becomes difficult to click a “view on mobile” link.• When a user clicks the “wrong” link, it can produce frustration.
  • 12. Keep To The Left • Referencing the iPhone once more, remember that blocks of text over 320px wide can be difficult to read, as they force users to pan back and forth. • If you click to “Show content” in Hotmail on an iPhone via the web, only a 320px wide section is displayed, so left justify the mobile link. • Out of sight, out of mind. If it’s out of sight on the first screen, users won’t look for it.
  • 13. Title Goes Here• Hotmail has taken the lead with mobile viewing by displaying the coded Title in an email preview.• By displaying the HTML title within the preview text, Hotmail has allowed senders to provide context of the email independent of the layout of the email content.• Using the title allows much more text without crowding the preheader space.
  • 14. Keep It Short and Simple • Follow the (slightly modified) KISS rule, and Keep it Short and Simple. • Avoid long subject lines, which can push content further down an already-small mobile screen. • If a mobile reader doesn’t understand what a marketer is trying to communicate in the shortened subject line, they may not engage with the content.
  • 15. Just Ask!• The easiest way to determine the impact of mobile is to simply ask, or to measure.• Consider asking about smartphone usage and email when customers sign-up, and you may have subscribers that self-identify.• Measure how many subscribers click on the “mobile” or “online” versions to see if and how this metric is trending up.• You can determine the necessity and the effectiveness of your mobile modifications.
  • 16. In Summary Mobile email is taking a larger role in marketing as consumers move their email habits to smartphones. With the huge rise in smartphone usage, the increased frequency of checking of email, and smaller screen sizes, marketers must take new approaches to ensure their subscribers engage with email. 1. Create a “mobile version” for every email and host online. 2. Reduce the overall width of the email. 3. Use variable sizing code for images and template width. 4. Use as small an image as possible if the image must be hardcoded.
  • 17. In Summary 5. Links to a “mobile version” should be a minimum of 44 pixels X 44 pixels. 6. Left-justify the “mobile version” links. 7. Use the “Title” tag to provide additional email detail. 8. Keep Subject Lines short. 9. Measure how many subscribers request a mobile version, through sign- up or through clicks on the mobile email link.
  • 18. Thank you!Visit