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...
Thanks to the proliferation of smartphones, many consumers have resorted to mobile email. Interestingly,there is an invers...
Despite the increasing rate of email opens on mobile devices, research from Econsultancy shows that 39percent of companies...
Although more than half of all smartphone users manage email solely via their mobile devices, a substantial portion ofemai...
Too muchscrollingLayout is wrongfor mobilesToo muchcontentLinks aren’teasy to useImages don’tautomaticallydownloadCan’t re...
It is in a company’s best interest to design emails with mobile viewership in mind. If consumers are frustrated by emailst...
BIGFONTBIGButtonsBIGWhiteSpaceUse size 14 text or larger. Call-to-action buttons should belarge enough for a 44 pixel-size...
Example:Yesmail’s Creative & Agency team followedthese best practices to create the HP Shoppingemail. Headlines were types...
@media only screen and (max-device-width: 480px) {[define your mobile-friendly CSS style here]}Basic QueryUtilizing respon...
1 row becomes 2 rows1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1911Navigation: Part 11.877.937.6246 | sales@yesmail.com ...
3 columns become 1 column1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1912Navigation: Part 21.877.937.6246 | sales@yesmail...
Image SwitchThe image can be turned off1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1913Navigation: Part 31.877.937.6246 |...
2 columns become 1 columnThe image is also resized and the font color changed1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ...
Since responsive email design is a relatively new—and rapidly evolving—practice, it is not yet supportedin all mobile envi...
The following email from Domino’s highlightsthe capabilities of responsive design. For thecampaign, Yesmail developers tur...
When weighing mobile design options, email marketers should not feel compelled to choose eitherscalable or responsive, as ...
When deciding whether mobile email design is right for their brand or not, there are several misconceptions that marketers...
Contact Us:If you’d like to communicate your brand’s distinct identity through attention-getting, mobile-readyvisuals and ...
Upcoming SlideShare
Loading in...5
×

Mobile Email Design: Marketing Fit for the Small Screen

760

Published on

Did you know 29% of mobile users say their device is the first and last thing they look at each day? With nearly half of emails opened on a mobile device, marketing must cater to always-on consumers.

To do so, marketers need to optimize their campaigns for the small screen via scalable and responsive design techniques. In this whitepaper, Yesmail explains:
-The pros and cons of each design practice
-The how-to of readable messages on mobile devices
-The myths of mobile email

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
760
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile Email Design: Marketing Fit for the Small Screen

  1. 1. Mobile Email Design:Marketing Fit for the Small Screen
  2. 2. 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, provideon-demand access to people, information and entertainment. The fact that more than a quarter ofmobile phone users, 29%, say their device is the first and last thing they look at each day reveals just howattached to our mobile devices we really are1.According to comScore, out of 234 million Americans with mobile devices, more than half—119.3million—own smartphones2. What’s more, an IHS report shows that smartphones will account for half ofthe 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 192Introduction1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  3. 3. 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 emailsare 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 devicesthan on computers.1st half of 20122nd half of 20111st half of 201136%27%20%64%73%80%Percent of emails opened on mobile and desktop1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 193Mobile Tipping Point1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  4. 4. Despite the increasing rate of email opens on mobile devices, research from Econsultancy shows that 39percent of companies lack a strategy for optimizing emails for mobile devices. If they do have a strategy inplace, 37 percent say it’s “basic.”5Companies that are not yet optimizing their email campaigns for mobile devices are missing out on asignificant opportunity: 41% of mobile owners have made a purchase as a result of an email viewed on amobile device6.Company AgencyVery 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 UnitedTMcompany respondents: 423agency respondents: 177How would you describe the extent to which your compay has (or clients have) astrategy 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 194Mobile Tipping Point1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  5. 5. Although more than half of all smartphone users manage email solely via their mobile devices, a substantial portion ofemails provide a less-than-optimal mobile viewing experience7.51.1% Email45.3% Internet Search42.3% Facebook34.4% IM29.6% Online Banking25.4% Online shopping14.8% Twitter6.9% Pinterest31.7% None of the aboveOnline activities conducted only via mobile* according to US smartphone/tablet ownersJune 2012% of respondentsNote: *always use a smartphone/tablet instead of any other internet-capable deviceSource: Prosper Mobile Insights, July 3, 20121 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 195The Case for Mobile Email1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  6. 6. Too muchscrollingLayout is wrongfor mobilesToo muchcontentLinks aren’teasy to useImages don’tautomaticallydownloadCan’t readtextAll42%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 6The highest area of consumer frustration with mobile marketing emails is too much scrolling (42%). 29% of consumerssay the layout of messages is wrong for their mobile device and 27% state there is too much content. These stats are for thegeneral 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 196The Case for Mobile Email1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  7. 7. It is in a company’s best interest to design emails with mobile viewership in mind. If consumers are frustrated by emailsthat are not mobile-friendly, 63% of them will close and forget about or simply delete the messages9. This opens a window ofopportunity for marketers to capture business from competitors by providing a memorable mobile email experience that isdesigned to cater to customers’ on-the-go lifestyle.Fit on the Small ScreenThere are two tactics that brands can employ to evolve their email campaigns to be in-line with consumers’ growing affinityfor mobile devices: scalable design and responsive design. Read on to learn the difference between the two and how eachtechnique makes for a great mobile user experience, thus increasing the likelihood that your marketing emails are read andclicked.Scalable Design Responsive Design1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 197Whip Your Email Marketing Into Shape1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  8. 8. BIGFONTBIGButtonsBIGWhiteSpaceUse size 14 text or larger. Call-to-action buttons should belarge enough for a 44 pixel-sized fingertip to click.There should be ample negativespace so as not to clutterthe 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 textThe 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 198Scalable Email Design1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  9. 9. Example:Yesmail’s Creative & Agency team followedthese best practices to create the HP Shoppingemail. Headlines were typeset to 36 pointswhile body copy was 14, and the call-to-action(“Shop HP now”) was clear. These combinedelements, which were readable and easy to clickon, worked together to make the HP campaigntranslatable to the small screen.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 199Scalable Email Design1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  10. 10. @media only screen and (max-device-width: 480px) {[define your mobile-friendly CSS style here]}Basic QueryUtilizing responsive design is another approach marketers can take to ‘mobilize’ their email campaigns. Responsive designadapts 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 queryto render two different layouts depending on what type of device the message is opened—PC or mobile. The basic @mediaquery 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 theyhave large screens as well (768 x 1024 pixels). Developers would then review this desktop layout to create a second responsiveemail 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 theseoptions combined.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1910Responsive Email Design1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  11. 11. 1 row becomes 2 rows1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1911Navigation: Part 11.877.937.6246 | sales@yesmail.com | www.yesmail.com
  12. 12. 3 columns become 1 column1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1912Navigation: Part 21.877.937.6246 | sales@yesmail.com | www.yesmail.com
  13. 13. Image SwitchThe image can be turned off1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1913Navigation: Part 31.877.937.6246 | sales@yesmail.com | www.yesmail.com
  14. 14. 2 columns become 1 columnThe image is also resized and the font color changed1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1914Navigation: Part 41.877.937.6246 | sales@yesmail.com | www.yesmail.com
  15. 15. Since responsive email design is a relatively new—and rapidly evolving—practice, it is not yet supportedin all mobile environments. As mobile operating systems evolve, so will their ability to render responsivedesign techniques. iPhone capabilities are currently ahead of the curve; however, responsive design hasmixed results in Android inboxes. For instance, it does not work in the Gmail application on Androidphones. Also notable, neither Windows Mobile nor Blackberry devices support responsive design. Inthese cases, the full-sized, PC version of emails render instead, which makes for a poor mobile experiencefor 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 tothe 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, theyonly have to troubleshoot and conduct quality assurance tests.1 3Clean Concise ClearCalls-to-action1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1915Current Limitations1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  16. 16. The following email from Domino’s highlightsthe capabilities of responsive design. For thecampaign, Yesmail developers turned offchunks of code (display = none) to removenon-critical, extraneous items like the socialsharing Facebook and Twitter buttons at thetop. Double-stacked columns draw attention tojust the following buttons: “order”, “coupons”,“menu”, and “español”. This two-row navigationsystem leaves plenty of space for a fingertip totap the header items.In the body of the email, you can see that thedesigners resized images and made copy largerbefore stacking them into a single column. Asemail marketers rarely capture the full attentionof subscribers, these practices bring the mostimportant campaign elements to focus andestablish a clear path to the desired customeraction: “ORDER THIS DEAL”. The call-to-actionbutton spans the width of the screen, making ithard for customers to miss.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1916Example1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  17. 17. When weighing mobile design options, email marketers should not feel compelled to choose eitherscalable 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 responsivedesign 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 ColumnsHTML CopyLarge ButtonsScalable Design Best PracticesScalableDesignResponsiveDesign1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1917Scalable vs. Responsive: Which One to Use1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  18. 18. When deciding whether mobile email design is right for their brand or not, there are several misconceptions that marketersshould 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 sentrecipients to landing pages that weren’t mobile-optimized. If your mobile email CTA is “enter our contest/sweepstake” orsomething 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 thechanging times if they want to maintain their edge in the increasingly competitive marketing landscape. As mobile designis now an essential component of any successful email marketing strategy, it is crucial for brands to have a knowledgeableteam 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 1918Mobile Email Myths – Debunked1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  19. 19. Contact Us:If you’d like to communicate your brand’s distinct identity through attention-getting, mobile-readyvisuals and copy, contact Yesmail’s Creative & Agency team at 1-877-YESMAIL or marketing@yesmail.com.About Yesmail Creative & Agency TeamYesmail has the longest-running full-service design agency in the industry. Established in 1999 with adistinct focus on email, registration pages and landing pages, we have developed expertise from years ofmaking design decisions by analyzing results. Being connected to real-time metrics provides the YesmailCreative & Agency team with informed designs that lead to more successful email campaigns. Ourexperience and client diversity give a unique perspective in enterprise email marketing, and our creativeservices 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_Share3 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.pdf5 27% of emails are opened on mobile devices: stats http://econsultancy.com/us/blog/9591-27-of-emails-are-opened-on-mobile-devices-stats6 Consumer Online Behavior Report: Developing Informed Digital Marketing Strategies for Holiday Success www.yesmail.com/surveyreport7 Consumer Digital Touchpoints—Email and Beyond http://www.emarketer.com/Webinar.aspx?R=40000578 Are your emails ready for mobile devices? http://www.steellondon.com/brochures/steel_mobile_marketing.pdf9 Globe-trotting with eDialog http://visual.ly/globe-trotting-e-dialog10 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-ready11 Mobile Email Opens Report http://www.knotice.com/reports/Knotice_Mobile_Email_Opens_Report_FirstHalf2012.pdf1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1919Contact Us and About Yesmail1.877.937.6246 | sales@yesmail.com | www.yesmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×