Responsys mobile email_guide_2012


Published on

Published in: Technology, Business
  • 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

No notes for slide

Responsys mobile email_guide_2012

  1. 1. Mobile Email Guide Design strategies to help you capture mobile clicks.
  2. 2. Getting started On average, we’re seeing about 40% of email opens coming from mobile devices and tablets. Unfortunately, all the work we do to ensure our emails render flawlessly on the desktop doesn’t take into account the subscribers trying to read our emails on a tiny screen. Often times the mobile experience is disappointing, forcing the subscriber to wait for images to download, scroll endlessly to read a sentence, zoom in to click a link, then dropping them on a website with a similar experience. Mobile subscribers are less engaged because they are being forced through an experience that was not optimized to help them take the action we’re asking them to. It’s daunting, as a marketer, to figure out how to address this growing challenge. In this guide, we’ll walk you through where to begin and a couple design strategies to help you capture those clicks.
  3. 3. Getting started Understanding your mobile audience. Where your subscribers are opening. Understanding operating systems and devices. Before starting any mobile optimization process, it’s vital to drop a pixel from Return Path or Litmus to figure out the breakdown of your mobile audience. You may be surprised to find more opens coming from tablets than phones, or iOS instead of Android. Optimizing for mobile presents a challenge because we’ve now added phone operating systems, mail clients and browsers to our current landscape of email landmines, each rendering HTML very differently. It’s important to spend your time and energy on the largest audience you can reach. While we’re seeing Android taking up the largest market share, most of our clients are seeing predominantly iPhone and other Apple iOS devices contributing to the largest share of mobile opens. This is great news because iOS devices have the least amount of trouble rendering email. The Android operating system is being used on a variety of devices from Samsung, HTC, Google and Motorola, meaning inconsistent support across all those devices and the email clients on each handset.
  4. 4. Getting started Which mobile design is right for you? yes Know mobile open rate? no Return path/ litmus report Mobile opens more than 30%? no yes Mobile opens mostly IOS? yes no Can support additional versions? no Mobile optimized Ready to invest in customer experience? yes Responsive
  5. 5. Mobile design strategies / Three tips for mobile optimization Mobile optimized email. What is it? Highlights and Considerations. HTML email designed specifically to be viewed on a modern smartphone (screen width: 320–480 px). — Hybrid approach provides good experience for most subscribers. When is it used? — More flexible design constraints. When majority of subscribers open emails on a modern smartphone. — Renders at reduced size (zooms out). — Easier to phase into existing program. — Still reduces space for content, copy.
  6. 6. Mobile design strategies / Three tips for mobile optimization Make it simple. What to do. — Make the message clear and simple. — Use graphics to help explain messages. — Remove non-essential elements. Why it’s important. Mobile users are on the go, and likely to be multi-tasking. Messages that are clear, simple, and uncluttered will be most effective in getting them to act.
  7. 7. Mobile design strategies / Three tips for mobile optimization Make it easy to scroll. What to do. — Divide messages into clear sections. — Use concise blocks of copy. — Create flow with headers and images. — Create patterns to imply there’s more. — Tease users with content below fold. — Mimic scrolling elements in mobile sites. Why it’s important. Keeping the mobile user’s interest and attention is a challenge. Layouts can be organized to encourage rapid scanning while also gathering key information.
  8. 8. Mobile design strategies / Three tips for mobile optimization Make it easy to click. What to do. – Create larger buttons and links. – Add padding between sections. – Design whole sections to be clickable. Why it’s important. When pressed to a touchscreen, the human finger requires more space to click accurately than a mouse does. Designers must allow enough room to click accurately, even when zoomed out.
  9. 9. Mobile design strategies / Four responsive design options Responsive design. What is it? Highlights and Considerations One HTML file that uses media queries to style the layout based on screen size. — More difficult to produce. When is it used? For subscribers viewing email in their native mail app on smartphones/tablets. — Default messaging is sent to subscribers using gmail or yahoo app. — Time needs to be spent determining content priority for mobile audience. — Ability to hide most graphics and images, but not introduce new ones.
  10. 10. Mobile design strategies / Four responsive design options Wrap it. You’ve been there. You get an email on your phone and you’re trying to read it, but you have to keep scrolling every which way and it’s frustrating, right? Well, there’s an easy solution. Wrap it. Wrapping elements lets your email design reflow within a mobile screen making it easier for the user to read and get through. Simply consider the grid structure on both desktop and email. The Apple iPhone has a screen width of 320 pixels, so if you designed the desktop version to be 640 pixels this would provide a good two-column grid structure—perfect for wrapping elements without the need to scale. Stick to one or two columns for easier readability. A A B C D B C D
  11. 11. Mobile design strategies / Four responsive design options Swap it. If you’ve ever wondered why an image doesn’t fit or looks odd when you’ve opened an email, the first thing to remember is that not all desktop hero images work in a mobile format. Here’s an example: while the landscape desktop image looks great in this format, it doesn’t work as well on a smart phone. However, it’s easy to swap the image to a portrait layout that is specifically designed for a 320-pixel-width. Also, if the image looks blurry, you can ‘Sharpen It’ by doubling the size of the original image. For example: the original image is 100%. You can resize and save to a magnification of 200%. Problem solved. Lorem A A Lorem
  12. 12. Mobile design strategies / Four responsive design options Hide it. Have you tried to open an email lately that takes forever to load or there are x’s instead of images? Here’s the reason and how you can optimize your customer’s experience to avoid this kind of frustration. While you may want your customers to see some great branded images, often they may take too long to load, make your email unnecessarily long or may not be relevant for your mobile customers. With smart, responsive design you can hide them, making the mobile email marketing experience more relevant and seamless. You may also choose to add a link that says “view images,” giving your customers the option of what they want to see. Lorem A A C B Lorem C
  13. 13. Mobile design strategies / Four responsive design options Design options. Here are some other design options you can incorporate with responsive email design. Text With system text you can: — Change font size, color, family, weight, decoration, style or variant. Images Regular images provide more options for manipulation than background images. In most cases, they’re the best option to use. With regular images you can: — Resize an image by scaling it. — Chop an image by hiding slices. — Change line height. — Hide an image. — Change margin and padding on a text block. — Move an image to previous or next row in layout. — Hide an entire text block. With background images you can: — Hide selected text within a block. — Swap a background image by changing img src. — Move a text block to previous or next row in layout. — Wrap text. — Crop a background image. — Hide a background image.
  14. 14. We can help. We understand how complicated it can be to get started optimizing your program for the mobile audience, and we plan to continue producing materials to make the process easier. Give us a call or send us an email with ideas and suggestions. If you’d like further assistance, we provide many in-house and online training solutions. We also offer full creative services and can write, design and execute your email marketing program.
  15. 15. About Responsys Responsys is a leading provider of email and cross-channel marketing solutions that enable companies to engage in relationship marketing across the interactive channels customers are embracing today—email, mobile, social, the web and display. With Responsys solutions, marketers can create, execute, and automate highly dynamic campaigns and lifecycle marketing programs that are designed to grow revenue, increase marketing efficiency, and strengthen customer loyalty. Responsys’ New School Marketing vision, flexible on-demand application suite, and customer success-focused services aim to deliver high ROI, increased levels of automation and fast time-to-value. Founded in 1998, Responsys is headquartered in San Bruno, California and has offices throughout the world. Responsys serves world-class brands such as: American Family Mutual Insurance Company, Avis Europe, Deutsche Lufthansa, Dollar Thrifty, LEGO, LinkedIn, Newegg, Orbitz, Qantas, Southwest Airlines, United Airlines and UnitedHealthcare. For more information about Responsys, visit