redesigning for mobile

REDESIGNING FOR MOBILE
What Email Marketers Need to Know
realmagnet.com
realmagnet.com
Getting Ready for Canada’s Anti-Spam Law | 1
Redesigning for Mobile - What Email Marketers Need To Know |
1
REDESIGNING FOR MOBILE
What Email Marketers Need to Know
A threshold has been crossed, and it’s a significant
one for email marketers: more emails are opened
on mobile devices than on desktop computers.
You read that correctly – MOST emails are read on
mobile devices, not computers.
The staggering popularity of mobile devices for email
viewing, and the dramatic differences in how a given
email might look when opened on a computer vs.
on an Android phone vs. on an iPhone, makes email
design more important to the overall success of email
marketing campaigns than at any point in recent
memory.
As email marketers, we all have to understand what
our messages look like, how easy they are to read,
and how easy it will be for recipients using different
devices to accept our calls to action, download our
white papers, register for our webinars, etc.
This primer provides an overview of how your
messages can be optimized for mobile devices. The
first part discusses a “Mobile-Aware” approach for
organizations with basic web design resources. The
second part explores Responsive Design, a more
advanced approach to mobile optimization that
requires more advanced skills.
Desktop
Webmail
Mobile
Jan. 2014
The percentage of emails opened on a Mobile device crossed the 50%
threshold in late 2013. As of August 2014, 51% of emails are opened on a
Mobile device. Source: Litmus –”Email Analytics” (September 2012 - April
2014)
iPhone
Gmail
iPad
Outlook
Apple Mail
Android
Outlook.com
Yahoo! Mail
Windows Live! Mail
AOL Mail
Email client usage worldwide, collected from 927 million email opens. Two
of the top three email programs are mobile-only, and the third, Gmail, is
PC and Mobile. Source: http://emailclientmarketshare.com
realmagnet.com
Redesigning for Mobile - What Email Marketers Need To Know |
1
First Step: Understand Your Audience’s Mobile Usage
Understanding YOUR recipients’ mobile behavior is a vital first step in tailoring content to optimize their mobile
experiences. More precisely:
“
Mobile email will account for 15 – 70% of your email opens, depending on your
target audience, product and email type.
”
EmailMonday, Ultimate Mobile Email Stats (2014)
Many Email Service Providers (such as Real Magnet) offer
behavioral tracking functionality that helps marketers better
understand how their messages are being consumed. These are
some of the important data points to consider:
•
Open Percentages – Mobile vs. PC
•
Opens by Email Program
•
Opens – PC vs. Mobile by Day of Week
•
Opens – PC vs. Mobile by Time of Day
This type of data allows you to answer important questions
like how many recipients are viewing my messages on a mobile
device? How many on a PC? What type of Mobile devices
are they using and which are the most popular ones? How
prominent are Outlook users? Non-Outlook users? Etc.
With these questions answered, you can now focus on deciding
how much influence mobile should have on your design
strategy.
1,783 recipients opened the email. 1,396 opened it on a PC and
387 opened on a mobile device. Source: Real Magnet Message
Tracking.
The Mobile Challenge: One Message, Many Devices
Mobile design wouldn’t be such a big deal but for one intractable fact: your messages render differently on
different mobile devices and email clients. The examples below show the same email message as seen on the
native email clients of four different devices.
Samsung Galaxy S4
Apple iPhone 6
HTC - One (Windows)
Blackberry Q10
So how, then, do we go about optimizing our emails for Mobile? How do we improve the recipient’s experience?
realmagnet.com
Redesigning for Mobile - What Email Marketers Need To Know |
2
Start with a Mobile-Aware Strategy
Use of a few key Mobile-Aware tactics can help you design messages that will improve the experience for the
vast majority of your mobile recipients.
In this section, we will walk you through seven different Mobile-Aware design concepts – each illustrated with
examples of both the recommended design concept and the less-desirable alternative.
Use a One Column
Layout
Use Article Excerpts
Rather Than Entire
Articles
Use Flat
(not realistic) Design
Avoid the overuse of images,
shadows, textures, etc.
realmagnet.com
Redesigning for Mobile - What Email Marketers Need To Know |
3
Use Stylized Text
Rather Than Images
Use Buttons for Links
Provide Easily-Tappable
Calls To Action
Use Background
Colors Rather Than
Borders
Provide Distinction Between
Content Segments
realmagnet.com
Redesigning for Mobile - What Email Marketers Need To Know |
4
Use High Contrast Text
and Background Colors
Use Pre-header Text
Many email programs display
a small portion of the message
body in the in-box near the
From Field and subject line.
Use it wisely to encourage
more opens.
The Mobile-Aware approach can be accomplished with an internal or external team that possesses basic design
skills.
You have likely, however, heard of another option that many marketers are using to optimize their messages.
This option, Responsive Design, expands upon the basic principles of Mobile-Aware design and requires resources
that have a strong understanding of CSS and HTML code.
realmagnet.com
Redesigning for Mobile - What Email Marketers Need To Know |
5
Using Responsive Design
The Responsive Design concept originated in 2010 and was intended for, and limited to, websites (not email).
Today, it is used to make both websites and emails more visually appealing on PCs, Tablets, and Mobile devices.
Essentially, Responsive Design relates to the use of flexible and fluid layouts that adapt to the screen on which
the content is being viewed. So if a message is opened on a PC, the content is optimized for that PC. If the
same message is viewed on a mobile device, it will be optimized for mobile. The idea is one message, many
renderings.
What is possible with Responsive Design?
Responsive Design’s power is demonstrated in the examples that follow. We show you a variety of ways in which
it can alter how the content of a given message is rendered. We provide examples of how the same content can
appear on a large (computer) and a small (Mobile device) screen.
Scale: On Mobile devices the content of the message will scale to the screen size. This means that images
and text will be easily read on smaller screens without requiring the recipient to zoom or scroll horizontally.
Email on Desktop:
650px wide
Email on Mobile:
311 - 650px wide
Stack: On Mobile devices multiple columns can stack one on top of another in order to provide a more
streamlined, one-column view.
realmagnet.com
Redesigning for Mobile - What Email Marketers Need To Know |
6
Switch: In certain situations, designers can override the normal stacking pattern of left column over the
right column and switch the layout to display the right column above the left.
Hide: Since the mobile view provides less screenspace than the desktop view, you may want to hide certain
items that don’t contribute to the meaning of your message. The example below hides navigation items four
and five.
Expand: This is a more advanced technique (based on CSS) that requires coding knowledge. On Mobile
devices lenghty text sections can be hidden behind a “read more” link.
realmagnet.com
Redesigning for Mobile - What Email Marketers Need To Know |
7
Image Swap: On Mobile devices a certain width will trigger the default image to be swapped out for a
mobile-friendly image. This technique is great for increasing the readability of text in your images.
Image Crop: On Mobile devices the image will be cropped in order to focus in on the main action in the
image. Images can be cropped from the center (shown below), left, right, top or bottom.
Responsive Design Limitations/Considerations
It’s important to note that at present, Responsive Design techniques are compatible with only some devices or
email clients. The most notable exclusions include applications like Outlook, Gmail, and Yahoo.
Responsive Design also requires a careful evaluation of your content. You’ll want to plan for every possible layout
scenario to ensure that your content displays correctly on all devices and email clients.
realmagnet.com
Redesigning for Mobile - What Email Marketers Need To Know |
8
Final Email Marketing Takeaway
Acknowledging that mobile is now AS important as PCs for email viewing, Matt Byrd of Litmus, in his September
2014 keynote address to the Real Magnet user conference, advocated taking an “Any Inbox, Any Device” email
marketing strategy. This means truly understanding the viewing behavior of recipients, employing better design
practices like Mobile-Aware and Responsive Design, and taking fuller advantage of non-design capabilities
such as the use of Pre-header Text. While some organizations may not have the resources to exploit the full
capabilities of Responsive Design, you’re like to have (or should acquire) design resources to execute on a
Mobile-Aware approach. As competition for inbox attention intensifies and becomes fiercer, providing a positive,
no-friction experience to mobile viewers is no longer an option. It’s a requirement.
REAL MAGNET
Founded in 2000, Real Magnet is a leading Email Marketing and Marketing Automation
service provider. Its SaaS-application fully integrates email, social, and mobile messaging
with marketing automation, event registration and survey capabilities – all in a single,
comprehensive digital marketing platform. Real Magnet is a privately held company based
in Bethesda, MD with over 1000 customers worldwide, including NASDAQ, the National
Association of Home Builders, Viacom (MTV/BET Networks), Accor Hotels, the American
Hospital Association and ComScore.
In December, Real Magnet is adding Marketing Automation to its platform. Ease of use
is what distinguishes its version of Marketing Automation from others. Real Magnet has
taken the common campaigns used by marketers - welcome campaigns, event promotions,
renewals, etc - and created templates for them. Simply answer a few questions (e.g.
Whose in the campaign? How many messages, etc.) click submit, and your campaigns are
up, running, and automated!
You don’t have to be a Fortune 500 company to benefit from Marketing Automation. Learn
more about the Real Magnet digital marketing application by calling
240-743-2941 or email [email protected].
www.realmagnet.com
realmagnet.com
Redesigning for Mobile - What Email Marketers Need To Know |
9