Mobile Email Guide


Published on

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.

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile Email Guide

  1. 1. Mobile Email GuideDesign strategies to help youcapture mobile clicks.
  2. 2. Getting startedOn average, we’re seeing about 40% of email opens coming from mobiledevices and tablets. Unfortunately, all the work we do to ensure our emailsrender flawlessly on the desktop doesn’t take into account the subscriberstrying to read our emails on a tiny screen. Often times the mobileexperience is disappointing, forcing the subscriber to wait for images todownload, scroll endlessly to read a sentence, zoom in to click a link, thendropping them on a website with a similar experience.Mobile subscribers are less engaged because they are being forced throughan experience that was not optimized to help them take the action we’reasking them to.It’s daunting, as a marketer, to figure out how to address this growingchallenge. In this guide, we’ll walk you through where to begin and a coupledesign strategies to help you capture those clicks.
  3. 3. Getting startedUnderstanding yourmobile audience.Where your subscribers Understanding operatingare opening. systems and devices.Before starting any mobile optimization While we’re seeing Android taking up theprocess, it’s vital to drop a pixel from largest market share, most of our clientsReturn Path or Litmus to figure out the are seeing predominantly iPhone andbreakdown of your mobile audience. You other Apple iOS devices contributing tomay be surprised to find more opens the largest share of mobile opens. Thiscoming from tablets than phones, or is great news because iOS devices haveiOS instead of Android. Optimizing for the least amount of trouble renderingmobile presents a challenge because email. The Android operating system iswe’ve now added phone operating being used on a variety of devices fromsystems, mail clients and browsers to our Samsung, HTC, Google and Motorola,current landscape of email landmines, meaning inconsistent support across alleach rendering HTML very differently. It’s those devices and the email clients onimportant to spend your time and energy each handset.on the largest audience you can reach.
  4. 4. Getting startedWhich mobile design isright for you? yes Mobile yes Mobile opens no Can support yes opens more mostly IOS? additional Know mobile open rate? than 30%? versions? Responsive no no yes no Return path/ Mobile litmus report optimized Ready to invest in customer experience?
  5. 5. Mobile design strategies / Three tips for mobile optimizationMobile optimized email.What is it? Highlights and Considerations.HTML email designed specifically to — Hybrid approach provides goodbe viewed on a modern smartphone experience for most subscribers.(screen width: 320–480 px). — Easier to phase into existing program.When is it used? — More flexible design constraints.When majority of subscribers open — Renders at reduced size (zooms out).emails on a modern smartphone. — Still reduces space for content, copy.
  6. 6. Mobile design strategies / Three tips for mobile optimizationMake 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 tobe multi-tasking. Messages that are clear,simple, and uncluttered will be mosteffective in getting them to act.
  7. 7. Mobile design strategies / Three tips for mobile optimizationMake it easyto 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 andattention is a challenge. Layouts can beorganized to encourage rapid scanningwhile also gathering key information.
  8. 8. Mobile design strategies / Three tips for mobile optimizationMake it easyto 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, thehuman finger requires more space to clickaccurately than a mouse does. Designersmust allow enough room to clickaccurately, even when zoomed out.
  9. 9. Mobile design strategies / Four responsive design optionsResponsive design.What is it? Highlights and ConsiderationsOne HTML file that uses media queries to — More difficult to the layout based on screen size. — Default messaging is sent to subscribers using gmail or yahoo app.When is it used?For subscribers viewing email in their — Time needs to be spent determining content priority for mobile audience.native mail app on smartphones/tablets. — Ability to hide most graphics and images, but not introduce new ones.
  10. 10. Mobile design strategies / Four responsive design optionsWrap it.You’ve been there. You get an email onyour phone and you’re trying to readit, but you have to keep scrolling every A B C Dwhich way and it’s frustrating, right? Well,there’s an easy solution. Wrap it. A BWrapping elements lets your emaildesign reflow within a mobile screenmaking it easier for the user to read andget through. Simply consider the grid C Dstructure on both desktop and email.The Apple iPhone has a screen widthof 320 pixels, so if you designed thedesktop version to be 640 pixels thiswould provide a good two-column gridstructure—perfect for wrapping elementswithout the need to scale. Stick to one ortwo columns for easier readability.
  11. 11. Mobile design strategies / Four responsive design optionsSwap it.If you’ve ever wondered why an imagedoesn’t fit or looks odd when you’ve Lorem Loremopened an email, the first thing toremember is that not all desktop hero Aimages work in a mobile format. Here’san example: while the landscape desktopimage looks great in this format, it doesn’twork as well on a smart phone. However, Ait’s easy to swap the image to a portraitlayout that is specifically designed for a320-pixel-width. Also, if the image looksblurry, you can ‘Sharpen It’ by doublingthe size of the original image. Forexample: the original image is 100%. Youcan resize and save to a magnification of200%. Problem solved.
  12. 12. Mobile design strategies / Four responsive design optionsHide it.Have you tried to open an email latelythat takes forever to load or there Lorem Loremare x’s instead of images? Here’s thereason and how you can optimize your A B Ccustomer’s experience to avoid this kindof frustration. AWhile you may want your customers tosee some great branded images, oftenthey may take too long to load, make youremail unnecessarily long or may not be Crelevant for your mobile customers. Withsmart, responsive design you can hidethem, making the mobile email marketingexperience more relevant and seamless.You may also choose to add a link thatsays “view images,” giving your customersthe option of what they want to see.
  13. 13. Mobile design strategies / Four responsive design optionsDesign options.Here are some other design options you Imagescan incorporate with responsive email Regular images provide more options fordesign. manipulation than background images. In most cases, they’re the best option to use.Text With regular images you can:With system text you can: — Resize an image by scaling it.— Change font size, color, family, weight, decoration, style or variant. — Chop an image by hiding slices.— Change line height. — Hide an image.— Change margin and padding on a — Move an image to previous or next text block. 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. — Crop a background image.— Wrap text. — Hide a background image.
  14. 14. We can help.We understand how complicated it can be to get started optimizing yourprogram for the mobile audience, and we plan to continue producingmaterials to make the process easier. Give us a call or send us an emailwith ideas and suggestions.If you’d like further assistance, we provide many in-house and onlinetraining solutions. We also offer full creative services and can write,design and execute your email marketing
  15. 15. About ResponsysResponsys is a leading provider of email and cross-channel marketing solutions thatenable companies to engage in relationship marketing across the interactive channelscustomers are embracing today—email, mobile, social, the web and display. WithResponsys solutions, marketers can create, execute, and automate highly dynamiccampaigns 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 ofautomation and fast time-to-value. Founded in 1998, Responsys is headquartered inSan Bruno, California and has offices throughout the world. Responsys serves world-classbrands such as: American Family Mutual Insurance Company, Avis Europe, DeutscheLufthansa, Dollar Thrifty, LEGO, LinkedIn, Newegg, Orbitz, Qantas, Southwest Airlines,United Airlines and UnitedHealthcare. For more information about Responsys,