This document provides a summary of a presentation on mobile design basics and mobile optimized templates. The presentation covered:
1. Defining key terms like templates, modular content, and content areas for building emails.
2. The benefits of using a modular and mobile-optimized template approach, including increased efficiencies, improved brand impact, and better performance metrics.
3. Best practices for mobile email design like writing concise hierarchical content, using a mobile-first content strategy, designing for legibility and touch, and understanding the context of mobile viewing.
4. Resources available from ExactTarget on email design, coding, and using data to inform design decisions.
6. Safe Harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties and assumptions. If any such uncertainties materialize or if any
of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward looking
statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or
service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for
future operations, statements of belief, any statement concerning new, planned, or upgraded services or technology developments and customer contracts
or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our
service, new product and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth,
interruptions or delays in our web hosting, breach of our security measures, the outcome of any litigations, risks associated with completed and any
possible mergers and acquisitions, the immature market in which we operate, or relatively limited operating history, our ability to expand, retain, and
motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-
alesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial
results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the
most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filing's section of the Investor
Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not
be delivered in time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available.
Salesforce.com, inc. assumes no obligation and does not intend to update these forward looking statements.
Safe Harbor
7. Raise Your Hand….
Are you currently
designing emails
with the Mobile
subscriber in mind?
8. *Kleiner Perkins Caufield and Byers
Today’s inbox is: Frequented
The average person checks their phone 150 times a day*
9. ***Return Path: Data from 3 million users May-June 2013
Today’s inbox is: Cluttered
We receive 416 commercial messages a month (13/day)
10. Today’s inbox is: Interactive
Emails are revealed in stages
From Name
Subject Line
Preheader
Pre-scroll Scrolling view Click through to siteInbox
11. Mobile
Desktop
Of those who opened on mobile, 13% clicked through.
Of those who opened on desktop, 25% clicked through
ExactTarget primary research
Today’s inbox is: Shallow
Mobile openers click less
than desktop openers.
Mobile is a barrier
to clicking
ExactTarget primary research: one customer, 1m+ dataset
16. Before we start:
Terms to Know
1. Template: the blank shell that the email is built on
2. Modular Content: Chunks of content that can be stored separately and
recombined in various iterations.
3. Content Areas: Empty area within template where text, links and images can be
inserted.
4. Stored Content: Independently stored section of content with text, images and
styling that will be placed inside of a Content Area.
5. Framework: all of the elements that holistically fit together to create your templates
and emails
17. Mobile-optimized email aims improve three areas:
1. Production Efficiencies
If emails are built on a
modular framework, it can cut
production time down
3. Performance Metrics
A more legible email means
content is magnified – if the
content is relevant, metric
lift will follow.
2. Brand Impact
Build subscriber trust by
respecting the viewing
environments of users; give
them a
legible, usable, beautiful
experience.
Mobile viewing is the largest disruption in email design today.
18. ExactTarget Templates
Blocks of modular content turn into
content areas, allowing basic editing of
text and images in ExactTarget’s
WYSIWYG content editor.
Content areas may be created and
stored separately from a template, then
dragged-and-dropped into the appropriate
area of an email when needed.
19. A Framework uses Modular Content
Template + Stored Content = Final Email
20. A Framework is a Modular Approach
A framework is a standardized approach to designing and building email that creates
both consistency and flexibility for your designers, developers & subscribers.
22. A Modular Approach Allows for Dynamic
Content
If gender = male,
display Article 1
If gender = female,
display Article 2
23. Getting Started: Plan for Content
Create a Wireframe
• Dissociate content from
visuals, focusing primarily on
function
• Establish a content hierarchy
• Ensure content structure matches
hierarchy before applying graphics
• Make iterating on the layout
easier
24. Getting Started: Define Variability
Defining a fixed number of variations for
content blocks allows for the delivery of
tailored experiences while controlling the
impact on content creation time.
Content Inputs
• Headline
• Copy
• Button
• Image
Possible Content Formats
25. Keys to Success: Style Guide
An email style guide establishes email
standards for your brand for frequently
used email elements.
• Present a cohesive brand
• Improve customer engagement
• Realize efficiencies in the email
creation process
28. Desktop
ExactTarget primary research
Benefits of Mobile Optimized Templates
• Ensure your emails render properly on a mobile device
• Increase ROI and engage with mobile customers
• Free
34. Write Concisely and
with Hierarchy in Mind
• Key subject line info should be in
the first 35 characters.
• Preheaders can be around 80
characters, with the most important
content first.
• Use a top-down content hierarchy.
• CTA language should be
descriptive, value-oriented, and
action-oriented.
35. Mobile-First Content Strategy
1. Pull click overlays for a variety of
sends from the same template
2. Prioritize content into top three clicks
3. Cut content that doesn’t get clicks
36. Design Legibly
• Use 1-column for primary content
• Legibility is more important than
length
• Top down hierarchy
• Use contrasting color to ensure
readability across brightness levels
37. Design Legibly
• Think BIG:
• Full-width graphics
• HTML text sizes should be 15px+
for body copy and 22px+ for
headlines
• Go even larger when text is part of
an image, to accommodate image
scaling
• Place CTAs on the left side (ideal) or
center
38. Design Legibly with Images
• Images are more content-rich than text: use images to communicate your
message
39. Design for Touch
Make buttons “Tapworthy”
• Size: keep buttons at least a 44px square for easy tapping
• Position: Keep links/buttons to the center or left for ease of use – or full width!
• Space: separate links to avoid touching two links
40. The context of apps:
Know what your users are doing when
they’re not in your email.
Top 4 apps:
1. Google Maps
2. Facebook
3. YouTube
4. Google+
(source: Mashable)
Email is part of a mobile ecosystem
41. The context of apps:
Borrow usability elements from these
commonly used apps
• Button treatments
• Visual cues
• Content layout patterns
Email is part of a mobile ecosystem
42. Email is part of a mobile ecosystem.
The context of the email inbox:
The inbox frames your email
44. Mobile Email Design Basics: Lessons
1. Mobile email viewing is the new normal
2. Think of your emails as a framework of modular pieces
3. Write your content in a mobile-first way
4. Design legibly for small screens
5. Design buttons for touch
6. Understand the context of mobile viewing
45. New Email Design Toolkit!
Proven tips and advice from our email
experts on:
1. Email Design Basics
2. Email Coding Fundamentals
3. Data for Designers
48. Interested in Additional Mobile Webinars?
March 19th – 2:00 pm EST
2014 Mobile Behavior Report
Combining mobile tracking and consumer date to
build a powerful mobile strategy
http://www.exacttarget.com/resource-center/webinars
March 27th
Advanced Responsive Design
Design tips, code and data for better email design
Register:
49. Resources
Training available in 3sixty
• January Release Training
• Getting Started with Email (Template lesson)
Design Blog
• http://www.exacttarget.com/blog/category/e
mail/design-email/
Emails
• Link to recorded training
• Toolkits
Editor's Notes
So what do we know about today’s inbox? What are we learning?
And the way to do this is… frameworks….
The static elements of a template may be thought of as a shell, and different arrangements of content coded inside that shell.
25% Clicks
A phased responsive approach was tested against a mobile-friendly format, and a full responsive format. When including metric lift and production time, the responsive-aware was rolled out.
You can hold and touch an email this way – if you just look at a full screenshot of it, it’s not the way your customers are going to consume it.
Second mobile DesSubscriber to the Email Design Blog