This deck provides concise User Experience strategies for designing effective emails for mobile and different screen widths. With growing number of mobile devices and the shift to mobile e-commerce, its more than necessary to optimize emails for mobile devices.
Email is a big deal, and one of the most important ways to connect with your audience. With the majority of people now reading email on mobile devices, creating robust responsive templates is no longer an option. Unfortunately email design is still considered a dark art, and its steep learning curve can be daunting. In this talk, I present email design techniques that make the task of developing for email more simple, along with strategies for optimizing user experience in email clients that will get those emails read.
Mobile Email Design, Strategies, Workflow and Best PracticesLitmus
In this presentation, Justine Jordan and Alex Williams tackle some of the toughest questions and offer real-life advice for getting multiscreen email right. Topics include:
*The implications of each major screen size and device
*Determining what devices your subscriber base is using and how and where they are converting
*The different types of design approaches, such as responsive and scalable, and which is the best fit based on your resources and expertise
*Creating a consistent user experience across email and Web/landing pages
*Examples and key best practices
*Communicating with your designer and programmer
*Testing, learning, optimization and measurement/analysis
*Future trends and predictions
These are the materials of a full-day workshop for a Fortune 500 company. It explores the best practices for mobile design, sprint-teams, and considerations to make when designing for omni-channel.
Design For Your Subscribers: Tips and Tricks to Increase Email Marketing ROI ...Online Marketing Summit
Design For Your Subscribers: Tips and Tricks to Increase Email Marketing ROI
Think design is all about graphics and layout? Think again. Your best marketing messages won't mean a thing if your subscribers aren't reading them.
Find out how strategic thinking, planning, and purpose-driven decisions are the foundation of great design. This session will provide insights into how to improve your email and landing page designs to increase performance and produce better results.
* Annie Angelo, Senior Marketing Consultant, ExactTarget
Email is a big deal, and one of the most important ways to connect with your audience. With the majority of people now reading email on mobile devices, creating robust responsive templates is no longer an option. Unfortunately email design is still considered a dark art, and its steep learning curve can be daunting. In this talk, I present email design techniques that make the task of developing for email more simple, along with strategies for optimizing user experience in email clients that will get those emails read.
Mobile Email Design, Strategies, Workflow and Best PracticesLitmus
In this presentation, Justine Jordan and Alex Williams tackle some of the toughest questions and offer real-life advice for getting multiscreen email right. Topics include:
*The implications of each major screen size and device
*Determining what devices your subscriber base is using and how and where they are converting
*The different types of design approaches, such as responsive and scalable, and which is the best fit based on your resources and expertise
*Creating a consistent user experience across email and Web/landing pages
*Examples and key best practices
*Communicating with your designer and programmer
*Testing, learning, optimization and measurement/analysis
*Future trends and predictions
These are the materials of a full-day workshop for a Fortune 500 company. It explores the best practices for mobile design, sprint-teams, and considerations to make when designing for omni-channel.
Design For Your Subscribers: Tips and Tricks to Increase Email Marketing ROI ...Online Marketing Summit
Design For Your Subscribers: Tips and Tricks to Increase Email Marketing ROI
Think design is all about graphics and layout? Think again. Your best marketing messages won't mean a thing if your subscribers aren't reading them.
Find out how strategic thinking, planning, and purpose-driven decisions are the foundation of great design. This session will provide insights into how to improve your email and landing page designs to increase performance and produce better results.
* Annie Angelo, Senior Marketing Consultant, ExactTarget
According to the International Telecommunication Union, at the end of 2011 there were more than 1 billion mobile‐broadband subscriptions worldwide! With more of your library users using mobile devices to access information they will assume that your library can be available from anywhere, at any time, and on most any device. Now is the time to be ready for this demand.
In this webinar:
- Explore some innovative library mobile website designs and see how they were built.
- Understand how HTML, CSS, and JavaScript work together to build mobile websites.
- Learn what a mobile framework is and why they are used.
- Provide some existing mobile services/apps that can be included in library-created mobile websites.
- Acquire best practices in mobile Web development from start to finish.
Top 10 Usability Mistakes Not to Make, Thanh Ngyuen, Senior Website Usability...Online Marketing Summit
Top 10 Usability Mistakes Not to Make
Apply the Known Truths of Usability to Drive Website Effectivenes: This is an overview session which will help define user-experience and demonstrate how the user’s perspective should be taken into account when developing all the components of your site – from navigation, to image placement and calls-to-action. She will discuss the Top 10 elements affecting users’ website experience and conversions, and provide useful information on best-practices, minimum standards, and learned conventions in website usability.
Many business websites look beautiful but are painfully ineffective. This seminar will walk through the basic steps of developing an effective website that really works for your buisness.
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta SessionTim Cannon
As mobile internet usage continues to climb having a solid mobile experience for your website is vitally important. This session will dive into choosing the right approach for search engine optimization (SEO), responsive or dedicated mobile site, and then explore the more technical and strategic aspects of SEO for responsive design which is Google's recommended approach. There are a lot of things to consider from using frameworks, architecture, indexing, and UX. We will explore all of these and also outline recommendations for performance improvements which is critical to successfully implementing responsive design.
Digital Prerequisites for Social Media StrategiesRandi Priluck
These slides cover the important factors that marketers must consider before planning and executing a social media marketing strategy. The slides accompany the text Social Media & Mobile Marketing Strategy from Oxford University Press. These social media teaching resources help faculty teach courses in digital marketing and media.
Personalization vs. Customization - Comparative StudyDevesh Jagatram
A comparative case study of personalization vs. customization. Features the differences between the two terms, examples of popular applications like GMail, Yahoo!, Amazon as smart systems that integrate these capabilities, and how they do it.
This is a run down of my process for designing, building and testing responsive HTML emails. I’ve also included lots of links to articles and resources for further reading. This talk was presented at Port80 Winter Localhost 2014 in Newport, Wales.
Presentation from the 2013 MarketingSherpa Email Summit Roundtable discussion, "Mobile Email Design: 5 Fundamentals of Mobile-Friendly Emails."
With more than one-third of emails being opened on smartphones and tablets, designing emails for mobile is crucial. In this presentation, Justine discusses the topic of mobile-friendly emails, including:
• The fundamentals of what makes an email mobile-friendly
• Different strategies for approaching mobile emails
• Quick wins that you can implementing changes to your program right away
• Myths, rumors and things to avoid
Seventy percent of readers immediately delete emails that render poorly or require a lot of pinching and scrolling. On the other hand, responsive emails, designed to automatically adjust to any screen size, receive a 21% higher click-to-open rate than conventional emails. Here's how to design them and pitfalls to avoid.
3sixty Live Boston: Designing for the Mobile InboxLitmus
Optimizing emails for the mobile experience is one of the top subjects that interactive marketers are talking about these days. In the June 3sixty Live Boston meeting, we feature this very popular topic and helped shed some light on all the terms you've been hearing.
Justine Jordan, Research & Education Director at Litmus, and Kristina Huffman, Design Practice Lead at ExactTarget, teamed up for an interactive presentation that enabled attendees with ideas and practical take-aways for creating mobile optimized emails.
Did you know that mobile is now the number one environment for email opens? A user's experience in a mobile environment for email is much different than a desktop one. Understanding the various methods of mobile email optimization is critical for any online marketer.
George Adamidis from ExactTarget lead the latest eCommerce Toronto Meetup on the different methods for optimizing email for both the mobile and desktop experience.
What is a mobile responsive email?
Stream:20 take a look at the considerations when optimising your email templates to be mobile responsive. Statistics show percentage of increased users viewing emails on a mobile device.
Have you optimised your email template to suit your demographic audience?
Contact <info@stream20.com> for more informartion
www.stream20.com
According to the International Telecommunication Union, at the end of 2011 there were more than 1 billion mobile‐broadband subscriptions worldwide! With more of your library users using mobile devices to access information they will assume that your library can be available from anywhere, at any time, and on most any device. Now is the time to be ready for this demand.
In this webinar:
- Explore some innovative library mobile website designs and see how they were built.
- Understand how HTML, CSS, and JavaScript work together to build mobile websites.
- Learn what a mobile framework is and why they are used.
- Provide some existing mobile services/apps that can be included in library-created mobile websites.
- Acquire best practices in mobile Web development from start to finish.
Top 10 Usability Mistakes Not to Make, Thanh Ngyuen, Senior Website Usability...Online Marketing Summit
Top 10 Usability Mistakes Not to Make
Apply the Known Truths of Usability to Drive Website Effectivenes: This is an overview session which will help define user-experience and demonstrate how the user’s perspective should be taken into account when developing all the components of your site – from navigation, to image placement and calls-to-action. She will discuss the Top 10 elements affecting users’ website experience and conversions, and provide useful information on best-practices, minimum standards, and learned conventions in website usability.
Many business websites look beautiful but are painfully ineffective. This seminar will walk through the basic steps of developing an effective website that really works for your buisness.
Demystifying Mobile SEO - 2014 Search Engine Strategies Atlanta SessionTim Cannon
As mobile internet usage continues to climb having a solid mobile experience for your website is vitally important. This session will dive into choosing the right approach for search engine optimization (SEO), responsive or dedicated mobile site, and then explore the more technical and strategic aspects of SEO for responsive design which is Google's recommended approach. There are a lot of things to consider from using frameworks, architecture, indexing, and UX. We will explore all of these and also outline recommendations for performance improvements which is critical to successfully implementing responsive design.
Digital Prerequisites for Social Media StrategiesRandi Priluck
These slides cover the important factors that marketers must consider before planning and executing a social media marketing strategy. The slides accompany the text Social Media & Mobile Marketing Strategy from Oxford University Press. These social media teaching resources help faculty teach courses in digital marketing and media.
Personalization vs. Customization - Comparative StudyDevesh Jagatram
A comparative case study of personalization vs. customization. Features the differences between the two terms, examples of popular applications like GMail, Yahoo!, Amazon as smart systems that integrate these capabilities, and how they do it.
This is a run down of my process for designing, building and testing responsive HTML emails. I’ve also included lots of links to articles and resources for further reading. This talk was presented at Port80 Winter Localhost 2014 in Newport, Wales.
Presentation from the 2013 MarketingSherpa Email Summit Roundtable discussion, "Mobile Email Design: 5 Fundamentals of Mobile-Friendly Emails."
With more than one-third of emails being opened on smartphones and tablets, designing emails for mobile is crucial. In this presentation, Justine discusses the topic of mobile-friendly emails, including:
• The fundamentals of what makes an email mobile-friendly
• Different strategies for approaching mobile emails
• Quick wins that you can implementing changes to your program right away
• Myths, rumors and things to avoid
Seventy percent of readers immediately delete emails that render poorly or require a lot of pinching and scrolling. On the other hand, responsive emails, designed to automatically adjust to any screen size, receive a 21% higher click-to-open rate than conventional emails. Here's how to design them and pitfalls to avoid.
3sixty Live Boston: Designing for the Mobile InboxLitmus
Optimizing emails for the mobile experience is one of the top subjects that interactive marketers are talking about these days. In the June 3sixty Live Boston meeting, we feature this very popular topic and helped shed some light on all the terms you've been hearing.
Justine Jordan, Research & Education Director at Litmus, and Kristina Huffman, Design Practice Lead at ExactTarget, teamed up for an interactive presentation that enabled attendees with ideas and practical take-aways for creating mobile optimized emails.
Did you know that mobile is now the number one environment for email opens? A user's experience in a mobile environment for email is much different than a desktop one. Understanding the various methods of mobile email optimization is critical for any online marketer.
George Adamidis from ExactTarget lead the latest eCommerce Toronto Meetup on the different methods for optimizing email for both the mobile and desktop experience.
What is a mobile responsive email?
Stream:20 take a look at the considerations when optimising your email templates to be mobile responsive. Statistics show percentage of increased users viewing emails on a mobile device.
Have you optimised your email template to suit your demographic audience?
Contact <info@stream20.com> for more informartion
www.stream20.com
Since last October, we’ve been tracking the mobile-friendliness of the promotional emails sent by a group of nearly 160 B2C brands. We saw a big bump in the adoption of mobile-aware and responsive design during the holiday season and this summer we expect serious progress, followed by another jump in adoption as we approach Christmas again.
Beyond detailing the adoption rates we’ve observed, this infographic explains the difference between desktop-centric design, mobile-aware design, and responsive design—and the future outlook for each of these. It also includes links to examples of mobile-aware and responsive design from the Email Swipe File.
ASAE Lunch Learning Webinar: Email Trends: What's in Style for 2017HighRoad Solution
Clothes go out of style. Haircuts & facial hair go out of style. Shoes go out of style. Style is everything and especially in digital. Think about it—fonts, images, website layout—they all have a style that tells the user whether your organization “gets it” or not. We update our website before our email templates even though email is the #1 communication device that’s representing your organization’s brand to the member. For many of us, our emails are extremely out of date and need a makeover! Join this webinar to learn the looks and techniques that make people view your email as befitting a vibrant community.
Strategies, Tactics and Design Tips for Mobile Email SuccessLitmus
It’s probably a safe bet that the percentage of your subscribers opening your emails on mobile devices is growing — and quite rapidly. Email marketers must account for the fact that we live in an always-connected world, where consumers are using their smartphones to manage their inbox while on the go. Ensure your emails don’t get lost in the mobile shuffle by getting the information you need to optimize your email program for its growing mobile subscriber base.
Topics discussed include how to identify your mobile audience, how to design your emails for optimum user experience across a variety of mobile devices, tips for increasing subscriber engagement with mobile-friendly content, and much more!
My slides for the talk about Responsive Emails on the FrontEnders Ticino monthly meetup (November 2016).
Best practice, tips, numbers, tools and ZURB Foundation for emails (Inky).
Mobile Email Marketing: Small Screen, Big OpportunityMass Transmit
Slides from the Mass Transmit webinar "Mobile Email Marketing: Small Screen, Big Opportunity". The slides cover the opportunities available to email marketers due to the rise in smartphone penetration. Learn about mobile email design, programming and strategy.
Mobile Email Marketing: Small Screen, Big OpportunityTheClubhou.se
Mobile email usage is growing exponentially, but how does it impact your business?
This eye-opening educational session will provide you with the strategy and tactics you need to plan, execute and analyze successful mobile email marketing campaigns. Topics will cover:
- Determining the value of your mobile audience
- Crafting effective multi-platform campaigns
- Preparing for increased mobile utilization
- Assessing mobile email marketing effectiveness
Consumer mobility is ever changing. As an email marketer, you’re responsible for making design decisions that affect your subscribers’ ability to use and experience your emails. This webinar deck will help you get started, by sharing the top 5 things you need to remember for designing for mobile devices. It also includes an overview of our new mobile optimized templates, developed to help guide you through your mobile design journey.
Currently, a stunning 43% of all email opens occur on mobile devices, quickly overshadowing desktop opens (32%) and webmail opens (25%). Data from Litmus shows us that this percentage is up 38% in the last year alone. Basically, subscribers continue to use viewing environments that include many screen sizes.
In a recent case study, we demonstrate how CareerBuilder is getting better results than ever before by implementing mobile optimization techniques using a responsive design strategy in their recent email campaigns. These results included a 15-17% increase in open rates and a 21-24% increase in click-through rates—and it’s all from responding to the needs of their growing mobile audience.
2. I. Why Design Emails for Mobile Emails?
!
2. Email Design Strategies:
a. Scalable & Responsive Email Designs
b.Which Strategy Works?
!
3. UX Best Practices: Do’s and Don’ts
a. Images/Layout
b. Copy and Content
c. Pre-Header and Header
!
4. Sample Mobile-Friendly Email Templates
!
5.Appendix
Agenda
4. Data and Numbers
For First Time Ever,
1 Billion Smartphones have been shipped
in 2013, marketing a huge milestone for the
mobile market.
1billion
http://www.idc.com/getdoc.jsp?containerId=prUS246455144
5. And more....Data and Numbers
of emails are opened on
mobile devices, yet
many emails are only
designed for desktop
viewing.
47% 150
Times a day
Studies have found that
people look at their
phones an average of
150 times a day. These
brief interactions mean
that you must focus on
getting your point across
quickly.
71%
of mobile purchasing
decisions are influenced
most by emails.
https://litmus.com/blog/tag/mobile-email5
6. What do consumers complain about?
T
44% 29% 27%
say mobile emails are difficult to
read because they require
excessive scrolling or
zooming.
point to wrong layouts for
mobile screens, causing
awkward horizontal scrolling.
point to excessive content
and non-clickable targets.
https://litmus.com/blog/tag/mobile-email6
7. “If you get a mobile email that
doesn’t look good, what do you do?”
http://blog.mailchimp.com/
7
8. “What kind of messages do consumers prefer
to read on their mobiles?”
Special Offers
Promos
& Vouchers
Real-Time
Delivery
Tracking
New
Products
Newsletters
Others
http://blog.mailchimp.com/
8
10. Two Design Strategies
• A scalable email is rendered with similar
layout no matter the size of the device
screen it is opened on.
• There is only one version (one HTML file)
of the email, but the email scales to look
similar on desktops and mobile devices.
Scalable Responsive
• A responsive email is rendered differently
with different layouts, depending on the
size of the device screen it is opened on.
• Responsive emails have different HTML
versions for different device screens, and
provide catered reading experiences on
different devices (by auto-adjusting the
layout/content, text-size/colors, resizing/
swapping/disabling images or buttons).
Further details in appendix.
10
12. Why Not Responsive Design?
Apple iPhone Android 4.X Windows Phone
7.5
Blackberry
OS7 + Z10
iPhone Mailbox
App
iPhone Yahoo
App
iPhone Gmail App Android Gmail App
Android Yahoo
Mail App
Blackberry OS 5
Windows Mobile 6.1
Windows Phone 7
Windows Phone 8
12
13. And Current Top Email Clients Used
Apple iPhone
!
Outlook
!
Apple iPad
!
Google Android
!
Apple Mail
!
Outlook.com
!
Yahoo Mail
!
Gmail
!
Windows Live Mail
!
Windows Mail
25%
17%
12%
9%
9%
6%
6%
3%
3%
2%
#1
!
#2
!
#3
!
#4
!
#5
!
#6
!
#7
!
#8
!
#9
!
#10
!
20% of people
will not be catered to
by responsive emails.
13
15. 1. Design the email keeping in mind that the message is conveyed with images off.
(iPhone displays images by default, however Android and Outlook don’t.)
1. Images
Email message conveyed even with images off
15
16. 2. Maintain the right balance between text and images.
Don’t focus on an image only email message.
Walmart Email:
Images Off
Walmart Email:
Images On
NY&C Email: Images
Off- alt text
NY&C Email:
Images On
3. Provide fallback color and alt-txt whenever images are used.
Supporting
image text
16
17. 2. Layout
1. Design the email to follow a single-column layout with width between 500 px and 650 px.
500 px to 650 px
17
4
4
3. Improve visual emphasis of the body content such that it
offers specific eye path for key offerings.
Provides Key
Eye Path
2. Avoid multiple column layout that can lead to horizontal scrolling.
Multiple Column Design
18. 4. Make sure the CTA is immediately visible when the email is opened & not hidden past
the first screen view.
CTA not visible
CTA not visible
CTA designed
using code & not
an image.
That simple:
<a style:"color: #ffeaff;
display: block;">
display:inline-block">Get
Game</a>
Html based CTA
5. Design the CTA buttons using html code assets and not images.
18
19. 6. Links and buttons should have a minimum target area of 44 × 44 pixels, as per
Apple guidelines.
Minimum 44px button
Minimum 44px
target
Bigger CTA button
Larger CTA
button
7. Bigger CTA buttons result in better click through rates.
19
20. 8. Simplify navigation. Let go of the idea of navigation menus in your emails, or minimize
the categories. Users don’t treat emails like websites.
Reduced navigation tabs
10. Embrace white space. The most common design mistake on mobile are link targets
too close together.
White spaceLeft aligned key message
9. Left-align key messaging content. Eye-tracking research suggests that Western users
focus the majority of their attention on the left-hand side of the email content.
20
21. 3. Copy & Content
1. Use bold typeface and sub-headers to call attention to primary and secondary call of
actions to increase the focus on featured content.
2. Use of web-standard fonts like Arial, Comic Sans, Helvetica, Georgia, Impact, Times
New Roman, Tahoma. If not, provide web-standard fonts as a fallback font if non-
standard fonts used.
Bold typeface & sub-headers Body copy min 14px.
3. Use larger text (ideal font size for the body copy should be min. 14 px, title should be
minimum 22px) for improved legibility.
21
22. 4. Pre-Header and Header
A. Preview Pane 400px by 300px:
1. Include a line of text that describes the content or purpose that motivates the recipients.
2. Try to keep header less than 150 px in height to avoid pushing main email message
and call to action below the preview pane.
B. Online Version: Include an online version of the email.
1. Studies show some percentage of users do actually click the browser version to
access offer-related emails.
22
23. C. Teaser Text:
1. Few email clients show a preview of the email by pulling out the first few lines of the
email content. Use this to call attention to the core messaging content of the email.
E.g., "50% off dresses: Spring is finally here!" instead of “Spring is finally here, 50%
off dresses.”
Teaser text Teaser text
23
28. Scalable Email Design
A grid system for alignment and proportion
A single-column design
Larger fonts (at least 14 px for content, 22 - 28 px
for sub-headers-headers)
Touch-friendly buttons
Key information and CTA in the upper-left of
the email
An appropriate balance of images and HTML text,
which enables email to look great on a mobile
device – whether images are disabled or not
Only one version (one HTML file) of the email, but
the email scales to look great on both desktops
and mobile devices
3
4
5
1
2
3
4
5
1
2
28
30. Responsive Email Design
1
3
4
5
1
2
3
Render the email format differently depending on
the screen size the email is viewed on.
Change hierarchy of content blocks as device size
changes.
Change navigation structure of content.
Enlarge fonts, change colors, layout of the
content.
Scale images, add/remove padding in the email
structure.
Change or hide content as needed.
!
4
5
1
2
30
32. Pros and Cons
• Simple, workable solution using
mobile email best practices.
• Email template is used across all
the devices.
• Easier and quicker to implement
and takes less development effort.
• Images, text or content size/layout
cannot be customized according to
the device size.
Scalable Responsive
• Considered to be the true mobile
email design.
• Images, text or content size/
layout/visibility can be
customized according to the
device size.
• Allows focus on featured content
and device-specific experience.
• Needs extra development efforts
and time since generated
responsive designs have to be
tested across all the devices for
consistency.
32
33. 1. Create a hybrid layout for the best of both worlds.
2. Evaluate pros and cons as per the project situation.
3. Identify the target customer segment and, using analytics, identify
which devices/apps are commonly used by the end users.
4. Evaluate the project timeline and development efforts underneath.
33
Which Design to Pick?
35. Copy & Content
A. Content:
1. Use short sentences and paragraphs. Avoid over scrolling of content and textual
overload.
35
36. C. Footer
1. Don’t hide the unsubscribe button.
2. Add a line- ‘Why you are receiving this email?’ to decrease chance of spamming.
4. Elements like social sharing buttons may be great in the desktop inbox, but
aren’t always easy to use by recipients on mobile devices.
1. Copy & Content
36
37. B. Subject:
1. Use an informative, short subject
line.
2. Limit words to 35 characters or
less. Don’t use spammy words.
3. While using special characters, use
UTF 8, but only if its highly relevant.
2. Brand Optimization
A. Sender Name and Address:
1. Make the sender name recognizable and keep a consistent tone. Keep the sender
name short, as only a limited number of characters will be displayed, and the rest will get
broken off.
2. Ditch the “Newsletter” in the sender name and keep it to the brand, person,
organization or campaign name. The one that users will recognize.
37