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 are1.

According to comScore, out of 234 million Americans with mobile devices, more than half—119.3 million—own smartphones2. 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 forecast3.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 192

Introduction

1.877.937.6246 | [email protected] | 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 desktops4.

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 device6.

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 UnitedTM

company respondents: 423agency 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 experience7.

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 ownersJune 2012

% of respondents

Note: *always use a smartphone/tablet instead of any other internet-capable deviceSource: 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

All

42%

18-3

4

36%

35-5

4

28%

55+

89

%

All

29%

18-3

4

45%

35-5

4

28%

55+

11

%

All

27%

18-3

4

36%

35-5

4

32%

55+

0

%

All

18%

18-3

4

9%

35-5

4

20%

55+

22

%

All

18%

18-3

4

18%

35-5

4

12%

55+

33

%

All

13%

18-3

4

9%

35-5

4

16%

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 below8.

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 messages9. 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

FONTBIG

ButtonsBIG

White Space

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 follows10.

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 SwitchThe 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 columnThe 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 3Clean 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


http://www.yesmail.com/contact

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 device11.

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.

Is your email mobile–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 [email protected].

About Yesmail Creative & Agency TeamYesmail 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



http://www.yesmail.com/our-company

Date post:	20-Aug-2015
Category:	Technology
Upload:	yesmail-interactive
View:	752 times
Download:	0 times

Mobile Email Design: Marketing Fit for the Small Screen

Technology