Welcome to Mobile Email Marketing. My name is Karen Talavera, President of Synchronicity Marketing and for the next 30 minutes or so I’ll be teaching you about strategy and design approaches for small screen email marketing success.
Today you’ll learn (read slide)
Before we get started, I’d like to tell you a little about who I am and why I’m an OMI instructor. Since 1999 I’ve been the industry’s leading professional educator and have designed and taught live and online email and digital marketing training and certification programs for many associations such as the DMA, ANA, and MarketingProfs, as well as for major corporations. A few years later in 2003 I founded Synchronicity Marketing, which specializes in email marketing strategy, training, consulting and coaching and advisory services. I’ve been a member of the Email Experience Council and the Florida Direct Marketing Association since 2007 where I’ve had active leadership roles. In 2012 I was recognized as one of the top 100 women in e-commerce. Synchronicity Marketing is based near Palm Beach Florida, about an hour north of Miami, where I enjoy the sun and surf as well as other interests you see here every chance I get.
Here is our agenda for this session. We’ll begin with an explanation of the mobile email landscape. It’s important for you to understand how big a user population we’re talking about, why email in a mobile environment is even something you have to consider in your email marketing, and how the typical user experience of email on the go differs from interaction with commercial email in traditional computing environments. Next, as I break down the mobile email design mindset, you’ll understand approaches for designing email messages for successful mobile engagement. Then we’ll get into specific design best practices, and finally, we’ll conclude with a few thoughts on email conversion and response in the mobile context. So sit forward, have something to take notes with, and let’s dive in!
Here’s a thought-provoking quote by a relevant visionary in the mobile space, author Michael Saylor, CEO of MicroStrategy whose latest book “The Mobile Wave” is a must-read for anyone interested in how mobile devices are transforming our lives. On the massive adoption and growth of smartphones and tablets, he commented “whenever teenage girls and corporate CEOs covet the same new technology, something elaborate is happening” and he’s right. Mobile computing is NOT going away, it’s not diminishing, and in fact, it IS transforming marketing and e-commerce on a daily basis. Think of what Michael Saylor says here as a “wake up call” to pay greater attention to mobile as a marketing channel if you are not already doing so.
So, what does the mobile email landscape look like? According to recent estimates, more people are reading emails on mobile devices than ever before. In December 2013 both Litmus and Return Path report the majority of all email opens now occurring on mobile devices. Other data shown here illustrates a head-to-head comparison of emails being opened on a mobile device (each lefthand column) vs. emails being opened on a desktop, on average and by industry in the B2B space. And overall, the number of mobile email users is predicted to STILL grow – by double digits in 2014 and 2015.
In fact, this is no surprise when you consider the worldwide growth of smartphones, which are also exploding in quantity. In fact, the US now ranks 13th in smartphone penetration compared to nations like Australia, Singapore and Saudi Arabia to name a few. Within the United States, smart phones now make up over 56% of all mobile phones. Of course, we’re interested in understanding smart phone adoption and penetration rates since email is really only truly usable on smart phones vs. more simple, older mobile phones.
But of course smartphones aren’t the only email-friendly mobile devices – laptop PCs and to a much greater extent, tablets account for the huge growth in mobile email engagement. This data from phone manufacturer Ericsson shows the projected growth in mobile broadband Internet subscriptions over the next several years, and it is intended to skyrocket as mobile device adoption continues to expand.
So what about mobile devices – which smartphones are dominating the market? Since 2012 and continuing into 2015, it has pretty much been dominated by Apple and Android, with Android edging out Apple in market share by about 10-12%.
Interestingly, when it comes to the email software (known as the email client) being used on mobile devices to read email, Apple is the dominant user interface, followed by Outlook and then the Google or Gmail operating systems.
So, let’s understand the implications of these facts (read slide):
On to our next agenda topic – how does the user experience with email in a mobile environment differ from email user behavior in traditional stationary, desktop environments? Obviously, a basic difference and the one that impacts user behavior and functionality most is screen size. Just examine the chart here and you’ll see how average mobile screen sizes are about half, at best, that of desktop screen sizes. Besides screen size, the fact that an email is actually rendering properly and visible on a mobile device is essential. Assuming it is, then we need to remember that since mobile email can be viewed anywhere and everywhere, environment and context is a major factor and can include serious distractions not usually present in a desktop context.
Just consider how much email receiving environments have changed in a little over a decade. 15 years ago 100% of email was viewed on desktops or laptops. Starting about 7 years ago we had cell phone access to email, but initially it was just plain text we could see. Today devices on which people can send and receive email are more varied than ever and allow for a rich graphic email experience. While the newest email-friendly devices are smart phones and tablets, even cars are now equipped to receive and send email. This evolution has a major impact on changing user attention spans, time frames in which they engage with email, and response behavior to marketing email.
Consider, for example, how a typical email marketing message like this one from Home Depot looks when fully opened on a laptop or desktop. We see all the graphic detail, calls to action, buttons, links, images and copy as well as key navigation links or features.
But the reality is, most people view their email in preview mode like this, where only the upper left-hand portion of the message is actually visible either in a vertical preview pane like what you see here, or horizontally. This is true in both desktop and mobile environments. Notice how in this “preview mode” none of the calls to action or promotional detail of the fully opened message are visible or actionable. Preview mode can drastically reduce both the ability to see and act on an email.
Not to mention, here’s how most email looks on a tablet device – again we’re dealing with preview mode AND now it’s on an even smaller, harder-to read screen.
And finally, we have email on smartphones, like this message from ASUS in which the font size of the copy renders it virtually unreadable without zooming. Now what?
To further complicate things, there are no standard viewing sizes across mobile devices and smartphones. Tablet viewports can range from only 600 pixels wide to as much as 800 wide. Smart phone viewport sizes also range by as much as 10-20% depending on the manufacturer. This information gives you pixel heights and widths for the most common email-friendly mobile devices available, but remember this information can and will change as hardware evolves.
So when it comes to behavior with email on mobile devices, what do we know for sure? First, in either mobile or non-mobile email contexts the first information most people see is the message’s From line and Subject line. These pieces of information are used by people in making judgments about whether to open or delete a message. The preview pane can also play a role if it displays what is known as pre-header text, short snippets of copy which appear at the start of the body of a message, before and separate from any images, and which often summarize the offer and primary call to action of the message. So, even in “preview mode” it’s possible to capture clicks. People can also see headlines in preview mode, but usually can’t get all the way into viewing major calls to action, detail or links to click to landing pages unless they actually open an email. Ultimately, getting an open is necessary for further response.
What else do we know about mobile email user behavior? (read slide)
If you’re interested in even more granular detail of email viewership and response behavior by mobile vs. desktop and by vertical market, check out this information from Marketing Profs trends and benchmarks study. Whenever you see benchmark information like this for your industry, use it as a guide but also realize it’s important to track your own subscriber behavior as it may vary from industry aggregate results.
In fact, when designers and developers work harmoniously to create consistent email designs, companies experience the best success. Let’s move on so I can share more about a successful overall email design mindset and then specific approaches that make email mobile-friendly.
Your first consideration in mobile email design is to create a message that is VISIBLE on mobile devices. Proper message rendering in mobile email environments isn’t just important, it’s crucial! A study by BlueHornet and Forrester research in 2013 found that 70% of email users will immediately delete an email they can’t see on a mobile device. Also interesting to note is the role visibility plays in how people interact with email on mobile, because 69% will sort through or “triage” emails on their mobile devices before coming back later to read them on a desktop computer. So the ability to see what an email is about for this kind of message organization is also critical.
Part of what I want you to leave here with today is knowing which mobile operating systems and native email clients are most email friendly. So far, Apple’s operating system supports email rendering the best, followed by Gmail’s email app for mobile devices. Other environments like Android and Yahoo still have quite a ways to go to be truly email-friendly.
Having a mobile email design mindset means learning how to visualize mobile email rendering and designing email from that visualization as a starting point. Essentially, after understanding mobile viewport size parameters, there are two approaches designers can take: 1) they can design what is commonly referred to as “mobile aware” or “mobile friendly” email, or they can use Responsive Design. Let’s review each one in more detail.
Here are some firm realities about the view from the mobile inbox. In the typical mobile device viewport, you can count on about 20 characters from your email’s From Line and 35 characters of the Subject Line to show up. The good news is the Preheader, if there is one in your emails, will often display up to 70 characters but keep in mind this is a user-controlled setting on most smart phones and tablets.
So, one way to adopt a mobile email design mindset is to visualize your email design on a grid. When designed on a grid, elements are aligned with parts of the grid and scale automatically to fit different screen dimensions. Also, consider mobile apps – and study how they are designed – and you’ll notice a grid-design approach is being applied to them as well. This Pinterest email is a great example of a two-column grid format, but it’s easy to use a one-column format too.
Here’s another example – this one of a single-column grid design. Notice how nicely stacked the content is in this message from Starwood hotels preferred guest program, and how large the buttons and text are to accommodate touch-screen response. (We call this being “fat-finger” friendly in mobile).
So to recap, mobile-aware or mobile friendly email design means you might have to recreate the structure of your emails. That all starts with the foundation. You need a strong communication hierarchy and an equally strong visual framework. The two will eventually combine to become the backbone of your entire email program.
So what is communication hierarchy? In its simplest form, communication hierarchy comes down to just one word: relevancy. Relevant content ensures you’re giving the consumer reasons to open, engage and convert.
You need identify the primary driver of action in your email and then move on to secondary and tertiary content. Later on you’ll create emails with this information in mind and your users will be able to quickly understand what you’re trying to say and what you want them to do in the least amount of time.
Here’s a more detailed look at a mobile-friendly grid layout. It uses a fixed width between 480 and 520 pixels, defines a clear communication hierarchy with a primary message element followed by secondary and tertiary elements, and also includes administrative features like a preheader, headline, nav bar and unsubscribe function. Ideally, you’ll want your primary message area to fall entirely within the viewing area, or at least the first 320 x 300 pixels.
On to the second mobile-optimized email design approach I mentioned: Responsive Design. What is this? Responsive Design is actually both a web page and email design approach which relies on what is known as media queries to sense the type of device on which email or a web page is being viewed, and then optimize the display of the message or page for the specific device. It requires a more extensive knowledge of HTML and is the most resource-intensive approach for email design.
However, the extra effort pays off in that email created with Responsive Design accommodates receiving devices of virtually ALL shapes and sizes. What is cool about responsive design is how, depending on the display environment, certain elements of an email either appear or they don’t. For example, notice how the graphic of the My New Home login page appears in the Chase email on the left, sized for a larger tablet screen, yet is eliminated from the design when it is displayed on a smart phone in the image on the right. Eliminating the graphic narrows the width of the message, optimizing it for a smaller device. Responsive design layouts generally tend to be longer and narrower than wider so that content can be hierarchically organized and stacked.
Here are three suggested responsive design email layouts:
In pattern #1, known as “Shrink Wrap”, message width is adjusted based on device. Text font size scales up where needed, text is wrapped, and other elements scale appropriately. In pattern #2 known as “Column Drop”, multiple columns get shrunk to single columns depending on device width. Multi-column elements shrink whereas single column elements stay the same size. And finally in pattern #3 knowns as “Layout Shifter”, an email’s entire layout reshapes to drop, hide or add alternate content based on viewport size. This pattern employs the most significant content transitions. If there is a nav bar which appears in larger viewports, for example, it might completely disappear when the same email is displayed on devices with small viewports
So what are the pro’s and con’s of each approach? With mobile-aware design, the advantages are (read slide). In fact, one of the biggest advantages is the ability to create mobile-friendly emails with a minimum of additional design effort and technical complexity. For many companies, this will be enough to guarantee mobile email success.
On the other hand,with Responsive Design, the advantages are (read slide).
Still, a strong communication hierarchy and mobile design mindset is nothing without the support of an equally strong visual framework. Remember when we said consistency was a bad thing?
Well, in terms creating a visual framework for your emails, consistency is crucial. You want your emails to possess a consistent look and feel regardless of the message contained within.
We can make this happen with the consistent use of things like colors, fonts, layouts and navigational aids that act as signposts for your users. As a result, they’ll eventually learn how to interact with the various elements in your emails and will be able to do so in a quick and efficient manner.
Better yet, once you put this visual framework into place, you’ll have a template flexible enough to support just about any message your emails need to deliver. So, let’s talk mobile email design best practices regardless of design approach.
First, remember you’re not designing for print – you’re designing for digital media, which means keeping HTML in mind. Most email designs are boxy and need to be for alignment, proportion, and scalability in mobile viewports. If you’re adopting a mobile-aware approach, your “grid” may be a total of one to four columns, with the message body spanning no more than two of these. In responsive design, a message fully opened on a desktop environment might span up to 4 columns, but when opened on mobile will reduce to a maximum of 2 columns.
Think of fitting your content into a grid pattern like you’re familiar with in the game Tetris. Every piece of content should align on left and right with a fixed vertical column width and have a fixed horizontal space as well. And this needs to be able to be coded into HTML, the programming language of email design.
Keep in mind that designing to fit a grid (or using responsive design to do so) doesn’t mean you have to sacrifice good graphic layout and appearance. Your emails can still look appealing! Check out the examples here, in which on the left we see the email opened in a wider viewport than how it displays in a narrower viewport to the right. Even though the top graphic shrinks in the narrower display, the important introductory paragraph copy still survives. And as the email gets narrower because the number of columns decreases, the rows, or length, increase. Realizing this will force you to think through which content is truly vital in the message and which is simply “nice to have” and should be relegated to lower priority status.
When it comes to copy, please stick to web-safe fonts and design with pixels sizes in mind, not font point sizes. In general, when an email message scales down in size, font sizes get nearly cut in half. The guidelines here will help you select font pixels size for both mobile-aware and responsive design email. Other considerations with copy in email are to not put it over images because if may not survive if images don’t render, and because such “graphical text” won’t scale well and will increase your email message file size.
Another design essential in the mobile email context is both the size and usability of buttons and links, our primary call-to-action mechanisms in any email message. (read slide)
When it comes to images, colored backgrounds and graphic contrast, we have several general email design considerations to factor into our mobile layouts. First, images often get blocked in email, so consider crafting your call to action buttons as “bullet-proof” HTML-coded elements vs. pulling them in as images. Also, for all images, make them clickable and include ALT tags behind them which display what is known as “Alt text” if the image isn’t rendering. This “Alt-text” provides the recipient a short description of what should have displayed in the image placeholder area, and can even include a link. Finally, use background shading and colors to make your image and text content stand out more and draw the eye, but check the contrast of text color against a colored background to ensure it’s readable, especially in low light.
And finally, the actual file size of your email message design matters because Gmail will truncate a message after 102 kb of loaded code. Applies’ iOS system will truncate a message at 15K of HTML loaded code when a user is viewing email across the cellular network vs. a WIFI connection. So, your message size can affect download time and view-ability. See the table here to compare how long it takes an email message with a file size of 245 KB to load at different connection speeds and types.
After all the user behavior, design and visibility concerns we’ve discussed with mobile email, your job isn’t done until you have considered the entire response journey to your email. Keep in mind, that “response journey” is now happening more and more entirely in the mobile context, which means YOU need to decide where you want to send someone who clicks on your email in a mobile environment. Is it still best to send them to a web page that loads in a browser? Maybe or maybe not. If your site isn’t mobile-optimized, it might be better to send them to your company’s mobile app, if you have one. In fact, the response path from email to mobile app is becoming more and more popular. Or, consider all your purchase channels and decide what, ultimately, the response action is that you want an email subscriber to take when they’re seeing your messages on the go. Maybe, since they may already be interacting with your email on their smart phone, you want them to call. Or visit a nearby store.
The reality today is that more and more ecommerce is happening entirely in the mobile environment, fueled in no small part by mobile email. According to YesMail, a major email services provider, ecommerce revenues generated via mobile devices were up 52% in 2013 compared with an only 18% rise in desktop-computer generated revenue. In fact, mobile purchases now account for 18% of all orders generated by email marketing messages. And, mobile revenue per click is more than double that of desktop revenue. So, we as marketers MUST think through the mobile path to conversion, make it easy for our email subscribers, and recognize that if they are ready to respond to our emails in the mobile environment we must design our conversion points to accommodate buying in the mobile context.
So, what’s the first thing you should do after watching this class?
Finally, let’s review the key takeaways from this class: (read)
Thank you again for selecting this class on mobile email. This is Karen Talavera saying so long for now, but if you’d like to learn more about email or other digital marketing channels, be sure to check out OMI online at (read URL)
Mobile Email Marketing
Mobile Email Marketing
Strategy and Design Approaches for
Small Screen Email Success
Today You Will Learn
• The lay of the mobile
landscape and how mobile
device users interact with email
• Design approaches and tips for
mobile email rendering,
visibility and usability
• Considerations for increasing
email conversion in the mobile
• President of Synchronicity Marketing
• Nationally-known email marketing
speaker, educator, coach and consultant
• The industry’s premiere email marketing
training instructor since 1999
• Member Email Experience Council
(EEC), Florida DMA, Only Influencers
• Top 100 Women in Ecommerce 2012 by
Women in Ecommerce (WE) magazine
• Passionate about yoga, Zumba, skiing
and international travel
• The Mobile Email Landscape
• User Experience with Mobile Email
• Mobile Email Design Mindset
• Mobile Email Design Best Practices
• The Path to Mobile Email Conversion
Point to Ponder
• “Whenever teenage girls and corporate
CEOs covet the same new technology,
something elaborate is happening”
– Michael Saylor, CEO of MicroStrategy and author of
The Mobile Wave (2012)
THE MOBILE EMAIL LANDSCAPE
• It just keeps growing!
• Over 50% of all commercial email now opened on
mobile devices (as of Nov 2013) – Return Path
• “The number of mobile email users is predicted to grow
28% in 2014 and 23% in 2015” - The Radicati Group
Source: Inbox Marketer, http://web01.inboxmarketer.com/blog/wp-content/uploads/2013/01/Mobile_vs_Desktop_Infographic_reduced.pdf
Worldwide Smartphone Penetration
• Ericsson forecasts 4.5
– Smart phones now make
up over 56% of all mobile
phones in the US (Google)
– United States ranks 13th
worldwide in smart phone
Mobile Internet Subscriptions Rise
• It’s not just smartphones
that are connected, but
also tablets and mobile-
– Mobile broadband will
enable fast access and
interaction with graphic-
rich sites and email
Mobile device landscape
• Q3 2013 Smartphone Platform Market Share
comScore Reports July 2013 U.S. Smartphone Subscriber Market Share:
Mobile Device Landscape
• Email Client Market Share
Litmus blog, http://emailclientmarketshare.com/
Windows Live Mail
• In the next few years, at least 75% of the world
population will have mobile Internet access
• The mobile device will be (in many places in the world it
already is) the sole computer connected to the Internet
• Most activities possible on a laptop or desktop will be
possible from a mobile device if they aren’t already
• Multiple marketing and messaging channels exist in the
mobile context, and some (like SMS) are unique to
USER EXPERIENCE WITH EMAIL:
MOBILE VS. DESKTOP
Consideration Desktop Mobile
Avg. screen size 600 pixels 320 pixels
User interface Mouse/click Finger/tap
Avg. connection speed 8.6Mbps 2.6Mbps
Viewing environment Desk/lap Anywhere
Avg. Connection Speed Source: http://www.akamai.com/stateoftheinternet
• The basic
• How an email
is viewed, i.e.
Email Receiving Environments
15 Years Ago
7 Years Ago
How They See Your Carefully Crafted
• Fully opened on
How They See Your Carefully Crafted
• In email client “preview pane” (horizontal)
How They See Your Carefully Crafted
• On tablet
How They See Your Carefully Crafted
Wide range of viewports
iPhone BB Bold 9000 Galaxy S4 Nexus 7 iPad Kindle Fire 8.9
320px 356px 360px 600px 768px 800px
iPad = A
Nexus 7 = B
Kindle Fire 8.9 = C
W = 320 px - Portrait
W = 360 px - Portrait
C: W = 800 px - Portrait
B: W = 600 px - Portrait
A: W = 768 px - Portrait
How Mobile Email Viewed
CTA / Click
Mobile Email User Behavior
• More email is read mobile than on a desktop email
client or via webmail. 55% of email is now opened on a
mobile device Return Path and Litmus –”Email Analytics” (Dec 2013)
• 90% of smartphone owners access the same email
account on mobile and desktop. ExactTarget – “The 2012 channel
preference survey” (2012)
• Daily we spend 9 minutes on email via a mobile
device, that is 7.6% of the total 119 minutes we use our
phone per day O2 – “Mobile life report” UK (2013)
• 43% of mobile email users check email four or more
times per day - Merkle View from the Mobile Inbox (2011)
Source: Marketing Profs, http://www.marketingprofs.com/charts/2013/11489/mobile-email-benchmarks-and-trends-by-industry
Email Viewership Preference by Industry Email Click-to-Open by Industry
MOBILE EMAIL DESIGN MINDSET
• Best practices will make more sense if
you understand media distinctions
– Email is not the web
• Everything that is possible on a web page isn’t
possible in email
• Don’t try to apply web design to email design
• Different email platforms, clients and browsers
affect the rendering of an email
• If the design doesn’t consider if the email is to be
responsive, it might not work at all
• The solution:
– Designers and Developers must work
harmoniously with a common goal
– Communication is vital to success
You can drink java
while coding, but
you can’t use
3. Image Maps
4. HTML 5
Mobile Email Rendering Matters
• 69% of consumers
sort through email
on a mobile device
before reading on
• 70% of users will
an email that
doesn’t render or
they can’t see
Mobile Device Capabilities
Native Email Client Support iOS Android 2.2+ Windows 8 Blackberry
Images displayed by default
Styled ALT text
Email App Support Gmail Yahoo!
Images displayed by default
Styled ALT text
Mobile Email Design Mindset Means
• Methods of how to visualize mobile design
• Mobile size parameters review
• Choosing between two design approaches:
– Mobile “Aware” aka “Mobile-Friendly”
– Responsive Design
Mobile Inbox View
• Approximate character limits
– From line: 20
– Subject line: 35
– Preheader: 70 characters
Preheader text is a user
showing none or up to 5
lines of HTML text in a
given email client
Visualize the Grid
• Think about mobile
apps and how they
• This Pinterest
example is a two-
column grid format
• Think about a grid
when designing for
NAV NAV NAV NAV
Visualize the Grid
• This Starwood
email shows a
• Notice it’s easy to
read and all
sections are fat-
Mobile Aware Means:
• Mobile email requires a strong
communication hierarchy and visual
• Give your subscribers reasons to open,
engage and convert.
• Fixed width between 480-520 pixels
• Define a communication hierarchy
prioritizing important content at the top
and less important at the bottom
• Primary messaging should fall within
the viewport or the first 320 X 300
NAV NAV NAV NAV
• An email design approach (as an outgrowth of web
design) that relies on media queries to sense the type
of device on which email is being used and optimize
display for that device
• Use of media queries requires using CSS3 (Cascading Style
Sheets 3) in HTML
• The most resource-intensive approach to making email
Responsive Design Accommodates all
Shapes and Sizes
• Proposed responsive
Desktop: 600 pixels
Tablet: 520 pixels
iOS Phone: 320 pixels /
Android Phone: 380 pixels
• Simplify or Hide navigation
• Remove content based on
• Responsive layouts tend to
be longer and narrower
Allows for easy scrolling
Clicks tend to be at the top
and the bottom
Responsive Layout Patterns
•Msg width shrinks
•Text scales up
•Multi to single
elements retain size
to drop, hide or
Single design that works across all email
Provides a one-size-fits-all mobile
Does not require any media query support Slightly compromises most device
May require horizontal scrolling on
Mobile-Aware Design Approach
Pros & Cons
Provides a custom mobile
experience when @media support is
Not fully supported across all devices
Consistent experience across a wide
range of devices
HTML coding requires a greater level of
Rearrange or hide specific content Incremental level of effort (LOE) and
• Planning/Project Management:
• Design: +25%
• Development: +50%
• QA/QC: +100%
Collapse content areas with a finger
Responsive Design Approach
Pros & Cons
DESIGN BEST PRACTICES
• Collaboration between designers and developers is
– Email design plus development equals higher engagement
–Mobile Design + Development has many specific considerations
that must be heeded from both teams
Design with HTML in Mind
• It’s boxy - for alignment,
Body Columns: 1-2
Desktop: 1-4 columns
Mobile: 1-2 columns
It’s Like Tetris
• Content needs to fit
in a pattern that can
be coded into HTML
• As the number of
columns decrease and
rows increase, content
must become simpler
content is muddled
and impossible to
that is truly vital
Need vs “Nice to
Designing To a Grid
Can Still Look Good
• Use web-safe fonts
– Design with pixels and not
• Do not put copy over images
as it creates graphical text
vs. HTML text
– It also increases file size and
disrupts the balance ratio
• iOS + Gmail Android App
scales up or down
– Be sure design can stretch
and allow room for wrapping
SCALING & TEXT SIZE
• 320/email width = scale factor
• 320/600 = .53%
• 12px font views as 6px when
Design Format Text Size
body copy 16+
Responsive 12 + pixels min
optimal body copy
Buttons & Links
• Buttons should be sized at a minimum 44x44 pixels per Apple
guidelines, or 59 pixels diagonal for one-handed thumb users
• All buttons and text links should be spaced apart
• All button CTA’s should render with images off
– Alternative: use stylized alt tags
• Include a CTA button or link in the preview pane
• Establish a CTA hierarchy
More Contact Us>
Images, Color & Contrast
• All text and HTML buttons should
appear when images are blocked
• Make images clickable where
• Be sure to include ALT-tags with
meaningful ALT-text behind images
• Background color can help make
content of the email stand out more
and draw users down the message
• Use contrast to ensure readability
across brightness levels
File Size Matters
• Gmail will truncate message at 102K of loaded code
• iOS will truncate message at 15K HTML of loaded
code when using cellular data
• Download time is variable based on full file and
File Size Connection Low Speed Load Time
Wi-Fi 8.6Mbps .2sec
4G LTE 5Mbps .40sec
4G 3Mbps .65sec
3G 600kbps 3.2sec
THE PATH TO MOBILE CONVERSION
• Where do you really want them to go from within your
– Browser? (Not if your site is mobile-unfriendly)
– In-store (location specific email)?
• Any are valid choices. More and more, email conversion
path links to mobile app
Mobile vs. Desktop Purchases Growing
• Revenues generated via
mobile grew 52% in 2013
compared with only 18%
growth rate for desktop-
• Number of mobile orders
jumped 58% to account for
18% of ALL orders generated
by marketing email messages
• Revenues per click on mobile
marketing emails far exceeded
those on desktop, at $7.14 vs.
Source: Yesmail.com “Email Marketing Compass:
The Subscriber Domain Edition”
Review Your Commercial Emails for
• Test sending your recurring or continuity email programs
(like newsletters) as well as your promotional email to
addresses viewable across a variety of different devices
– How do your messages look on different screen sizes?
– How mobile-aware is your current design approach?
– What needs to be fixed for true mobile-friendliness?
– How can you modify CTAs for better mobile response?
1. More marketing email is now opened and read on mobile
than stationary devices, and growing
2. Mobile-aware, if not fully mobile-optimized, email design
is essential to subscriber engagement and conversion
3. Device screen size, usability and ergonomics all influence
and change subscriber mobile vs. desktop-device email
and purchase behavior
4. Mobile-friendly design requires a new mindset and
5. There ARE design best practices you should follow to
ensure mobile-visible, and mobile-aware email
Learn more at