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. Mobile Email Guide
Design strategies to help you
capture mobile clicks.

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. Getting started
Understanding your
mobile audience.
Where your subscribers Understanding operating
are opening. systems and devices.
Before starting any mobile optimization While we’re seeing Android taking up the
process, it’s vital to drop a pixel from largest market share, most of our clients
Return Path or Litmus to figure out the are seeing predominantly iPhone and
breakdown of your mobile audience. You other Apple iOS devices contributing to
may be surprised to find more opens the largest share of mobile opens. This
coming from tablets than phones, or is great news because iOS devices have
iOS instead of Android. Optimizing for the least amount of trouble rendering
mobile presents a challenge because email. The Android operating system is
we’ve now added phone operating being used on a variety of devices from
systems, mail clients and browsers to our Samsung, HTC, Google and Motorola,
current landscape of email landmines, meaning inconsistent support across all
each rendering HTML very differently. It’s those devices and the email clients on
important to spend your time and energy each handset.
on the largest audience you can reach.

4. Getting started
Which mobile design is
right 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. Mobile design strategies / Three tips for mobile optimization
Mobile optimized email.
What is it? Highlights and Considerations.
HTML email designed specifically to — Hybrid approach provides good
be 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. 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. 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. 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. Mobile design strategies / Four responsive design options
Responsive design.
What is it? Highlights and Considerations
One HTML file that uses media queries to — More difficult to produce.
style 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. 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
A B C D
which way and it’s frustrating, right? Well,
there’s an easy solution. Wrap it.
A B
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 C D
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.

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
Lorem Lorem
opened an email, the first thing to
remember is that not all desktop hero
A
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,
A
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.

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
Lorem Lorem
are x’s instead of images? Here’s the
reason and how you can optimize your A B C
customer’s experience to avoid this kind
of frustration. A
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
C
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.

13. Mobile design strategies / Four responsive design options
Design options.
Here are some other design options you Images
can incorporate with responsive email Regular images provide more options for
design. 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. 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.
www.responsys.com/contact

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
responsys.com.