Mobile Email Design: Marketing Fit for the Small Screen

Mobile Email Design:
Marketing Fit for the Small Screen

GO! GO! GO!
We live in an always on, always connected world.
And there is no turning back.
GO! GO! GO!
We live in an always on, always connected world.
And there is no turning back.
Mobile devices, which have become perfect accomplices to our increasingly fast-paced lives, provide
on-demand access to people, information and entertainment. The fact that more than a quarter of
mobile phone users, 29%, say their device is the first and last thing they look at each day reveals just how
attached to our mobile devices we really are
1
.
According to comScore, out of 234 million Americans with mobile devices, more than half—119.3
million—own smartphones
2
. What’s more, an IHS report shows that smartphones will account for half of
the phone market in 2013, two years earlier than the firm had previously forecast
3
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 192
Introduction
1.877.937.6246 | sales@yesmail.com | www.yesmail.com

Thanks to the proliferation of smartphones, many consumers have resorted to mobile email. Interestingly,
there is an inverse relationship between emails read on mobile devices versus computers: as more emails
are opened on-the-go, fewer are opened on desktops
4
.
Email activity will soon reach a tipping point where more email opens will take place on mobile devices
than on computers.
1st half of 2012
2nd half of 2011
1st half of 2011
36%
27%
20%
64%
73%
80%
Percent of emails opened on mobile and desktop
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 193
Mobile Tipping Point

Despite the increasing rate of email opens on mobile devices, research from Econsultancy shows that 39
percent of companies lack a strategy for optimizing emails for mobile devices. If they do have a strategy in
place, 37 percent say it’s “basic.”
5
Companies that are not yet optimizing their email campaigns for mobile devices are missing out on a
significant opportunity: 41% of mobile owners have made a purchase as a result of an email viewed on a
mobile device
6
.
Company Agency
Very Advanced 2%
Quite advanced 6%
Moderate 16%
Basic 37%
Non-Existent 39%
Very Advanced 1%
Quite advanced 5%
Moderate 20%
Basic 48%
Non-Existent 27%
Econsultancy Digital Marketers United
TM
company respondents: 423
agency respondents: 177
How would you describe the extent to which your compay has (or clients have) a
strategy for optimizing email marketing for mobile devices?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 194
Mobile Tipping Point

Although more than half of all smartphone users manage email solely via their mobile devices, a substantial portion of
emails provide a less-than-optimal mobile viewing experience
7
.
51.1% Email
45.3% Internet Search
42.3% Facebook
34.4% IM
29.6% Online Banking
25.4% Online shopping
14.8% Twitter
6.9% Pinterest
31.7% None of the above
Online activities conducted only via mobile* according to US smartphone/tablet owners
June 2012
% of respondents
Note: *always use a smartphone/tablet instead of any other internet-capable device
Source: Prosper Mobile Insights, July 3, 2012
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 195
The Case for Mobile Email

Too much
scrolling
Layout is wrong
for mobiles
Too much
content
Links aren’t
easy to use
Images don’t
automatically
download
Can’t read
text
All42%
18-3436%
35-5428%
55+89%
All29%
18-3445%
35-5428%
55+11%
All27%
18-3436%
35-5432%
55+0%
All18%
18-349%
35-5420%
55+22%
All18%
18-3418%
35-5412%
55+33%
All13%
18-349%
35-5416%
55+11%
1 2 3 4 5 6
The highest area of consumer frustration with mobile marketing emails is too much scrolling (42%). 29% of consumers
say the layout of messages is wrong for their mobile device and 27% state there is too much content. These stats are for the
general population. Detailed figures for specific age demographics are below
8
.
Why are mobile emails difficult to read?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 196
The Case for Mobile Email

It is in a company’s best interest to design emails with mobile viewership in mind. If consumers are frustrated by emails
that are not mobile-friendly, 63% of them will close and forget about or simply delete the messages
9
. This opens a window of
opportunity for marketers to capture business from competitors by providing a memorable mobile email experience that is
designed to cater to customers’ on-the-go lifestyle.
Fit on the Small Screen
There are two tactics that brands can employ to evolve their email campaigns to be in-line with consumers’ growing affinity
for mobile devices: scalable design and responsive design. Read on to learn the difference between the two and how each
technique makes for a great mobile user experience, thus increasing the likelihood that your marketing emails are read and
clicked.
Scalable Design Responsive Design
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 197
Whip Your Email Marketing Into Shape

BIG
FONT
BIG
Buttons
BIG
WhiteSpace
Use size 14 text or larger. Call-to-action buttons should be
large enough for a 44 pixel-
sized fingertip to click.
There should be ample negative
space so as not to clutter
the limited size of the screen.
What is scalable email design? “It’s an email layout that, when reduced to half its size—on a mobile device—is still 100%
readable and 100% fingertip clickable,” says Matt Caldwell, Vice President of Creative & Agency Services at Yesmail Interactive.
Scalable design utilizes:
• One layout compatible on both regular-sized computer monitors and small mobile screens
• A grid system to ensure all objects within the layout are aligned properly and proportional to one another
• A single-column stacked layout (usually) to streamline text
The number one tactic to keep in mind when creating scalable emails for the small screen is to... THINK BIG.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 198
Scalable Email Design

Example:
Yesmail’s Creative & Agency team followed
these best practices to create the HP Shopping
email. Headlines were typeset to 36 points
while body copy was 14, and the call-to-action
(“Shop HP now”) was clear. These combined
elements, which were readable and easy to click
on, worked together to make the HP campaign
translatable to the small screen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 199
Scalable Email Design

@media only screen and (max-device-width: 480px) {
[define your mobile-friendly CSS style here]
}
Basic Query
Utilizing responsive design is another approach marketers can take to ‘mobilize’ their email campaigns. Responsive design
adapts your email to the device it is rendered on and creates a layout that is proportional to the screen and subsequently,
more visually-appealing. The design, which is not “automatically” done by your mailing system, uses the CSS3 @media query
to render two different layouts depending on what type of device the message is opened—PC or mobile. The basic @media
query coding stucture is as follows
10
.
How responsive email design works can be summed up in an If, then statement: If your screen is 480 pixels wide or less,
then CSS code loads a different email style on your device.
The primary responsive email has a larger layout and is meant for desktops, though it can be employed on tablets since they
have large screens as well (768 x 1024 pixels). Developers would then review this desktop layout to create a second responsive
email design using style sheets as guides to adjust campaign elements—resize page widths and images, reformat copy (font,
color, size, alignment), completely turn off areas of code containing images or copy of lesser importance, or all of these
options combined.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1910
Responsive Email Design

1 row becomes 2 rows
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1911
Navigation: Part 1

3 columns become 1 column
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1912
Navigation: Part 2

Image Switch
The image can be turned off
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1913
Navigation: Part 3

2 columns become 1 column
The image is also resized and the font color changed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1914
Navigation: Part 4

Since responsive email design is a relatively new—and rapidly evolving—practice, it is not yet supported
in all mobile environments. As mobile operating systems evolve, so will their ability to render responsive
design techniques. iPhone capabilities are currently ahead of the curve; however, responsive design has
mixed results in Android inboxes. For instance, it does not work in the Gmail application on Android
phones. Also notable, neither Windows Mobile nor Blackberry devices support responsive design. In
these cases, the full-sized, PC version of emails render instead, which makes for a poor mobile experience
for users—cluttered design and a page laden with content.
Note: Regardless of whether your email campaigns are mobile-ready or not, they should always adhere to
the 3 C’s.
While some marketers may consider complex coding requirements another caveat of responsive design,
others deem them a one-time, upfront cost. After developers code the responsive design template, they
only have to troubleshoot and conduct quality assurance tests.
1 3
Clean Concise Clear
Calls-to-action
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1915
Current Limitations

The following email from Domino’s highlights
the capabilities of responsive design. For the
campaign, Yesmail developers turned off
chunks of code (display = none) to remove
non-critical, extraneous items like the social
sharing Facebook and Twitter buttons at the
top. Double-stacked columns draw attention to
just the following buttons: “order”, “coupons”,
“menu”, and “español”. This two-row navigation
system leaves plenty of space for a fingertip to
tap the header items.
In the body of the email, you can see that the
designers resized images and made copy larger
before stacking them into a single column. As
email marketers rarely capture the full attention
of subscribers, these practices bring the most
important campaign elements to focus and
establish a clear path to the desired customer
action: “ORDER THIS DEAL”. The call-to-action
button spans the width of the screen, making it
hard for customers to miss.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1916
Example

When weighing mobile design options, email marketers should not feel compelled to choose either
scalable or responsive, as they’re not independent of one another.
Stackable columns, HTML copy and large buttons can be modified and can make the extensive responsive
design process that much simpler. At the end of the day, mobile design—both scalable and responsive—
makes marketing emails easier to read and easier to be absorbed, thus driving more engagement.
Stackable Columns
HTML Copy
Large Buttons
Scalable Design Best Practices
Scalable
Design
Responsive
Design
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1917
Scalable vs. Responsive: Which One to Use

When deciding whether mobile email design is right for their brand or not, there are several misconceptions that marketers
should recognize.
1. Consumers use their mobile email inbox as a filter and save emails to revisit on their
computer later.
Consumers generally notice subject lines first. If they open the email and are interested,
they act upon the call-to-action almost immediately. If they don’t act then and there,
data from Knotice shows that only 2% of consumers will reopen the same email on a
different device. 98% of email opens occur on the same device
11
.
2. It’s enough for marketers to create emails that are easy-to-read via mobile.
Email marketers should provide an easy way for recipients to act upon their message.
This could be something as simple as a mobile coupon to redeem in-store, thus
preventing the “showrooming effect”.
Results from a Yesmail report revealed that one-third of all mobile-enabled emails deployed by 20 tracked brands sent
recipients to landing pages that weren’t mobile-optimized. If your mobile email CTA is “enter our contest/sweepstake” or
something of the like, ensure you direct people to a page that is fit for the small screen. Don’t defeat the purpose of mobile-
ready email.
Unless the Earth stands still and so do people, mobile device usage isn’t slowing down. Companies have to keep up with the
changing times if they want to maintain their edge in the increasingly competitive marketing landscape. As mobile design
is now an essential component of any successful email marketing strategy, it is crucial for brands to have a knowledgeable
team dedicated to tailoring their campaigns for the small screen.
Isyouremailmobile–ready?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1918
Mobile Email Myths – Debunked

Contact Us:
If you’d like to communicate your brand’s distinct identity through attention-getting, mobile-ready
visuals and copy, contact Yesmail’s Creative & Agency team at 1-877-YESMAIL or marketing@yesmail.com.
About Yesmail Creative & Agency Team
Yesmail has the longest-running full-service design agency in the industry. Established in 1999 with a
distinct focus on email, registration pages and landing pages, we have developed expertise from years of
making design decisions by analyzing results. Being connected to real-time metrics provides the Yesmail
Creative & Agency team with informed designs that lead to more successful email campaigns. Our
experience and client diversity give a unique perspective in enterprise email marketing, and our creative
services optimize your campaigns for mobile viewership, social integration and maximum conversion.
1 Mobile Device/Cell Phone Statistics http://www.statisticbrain.com/mobile-device-cell-phone-statistics/
2 comScore Reports September 2012 U.S. Mobile Subscriber Market Share http://www.comscore.com/Insights/Press_Releases/2012/11/comScore_Reports_
September_2012_U.S._Mobile_Subscriber_Market_Share
3 Half of All Mobile Phones Will Be Smartphones by 2013, Two Years Earlier Than Forecast http://allthingsd.com/20120828/half-of-all-mobile-phones-will-be-smartphones-
by-2013-two-years-earlier-than-forecast/
4 Mobile Email Opens Report http://www.knotice.com/reports/Knotice_Mobile_Email_Opens_Report_FirstHalf2012.pdf
5 27% of emails are opened on mobile devices: stats http://econsultancy.com/us/blog/9591-27-of-emails-are-opened-on-mobile-devices-stats
6 Consumer Online Behavior Report: Developing Informed Digital Marketing Strategies for Holiday Success www.yesmail.com/surveyreport
7 Consumer Digital Touchpoints—Email and Beyond http://www.emarketer.com/Webinar.aspx?R=4000057
8 Are your emails ready for mobile devices? http://www.steellondon.com/brochures/steel_mobile_marketing.pdf
9 Globe-trotting with eDialog http://visual.ly/globe-trotting-e-dialog
10 The Age of Mobile Email Has Arrived. Are You Ready? http://www.nten.org/articles/2012/the-age-of-mobile-email-has-arrived-are-you-ready
11 Mobile Email Opens Report http://www.knotice.com/reports/Knotice_Mobile_Email_Opens_Report_FirstHalf2012.pdf
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1919
Contact Us and About Yesmail

Mobile Email Design: Marketing Fit for the Small Screen

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (6)

Más de Yes Lifecycle Marketing

Más de Yes Lifecycle Marketing (17)

Último

Último (20)

Mobile Email Design: Marketing Fit for the Small Screen