2. HTML Design Best Practices
• Think “in the box” when designing email
• Minimize number of screens and scrolling
• Intersperse images and text throughout
• Place the offer above the “fold”
• Ideally, in the subject line as well as body copy of message
• Remember the eye travels from left to right
• Link early and often
• Use animation minimally and strategically
• Animated gifs add uniqueness to your message, draw attention to calls
to action
• Make images and logos links
• If including a company logo in the message, standard practice is to
make it link to the company (or brand)’s homepage
• Consider designing on a grid for scalability
3. Example
• “Hooky” (!) headline
• Excellent use of images and
balance of text/images
• Main idea plus “legs”
• Good balance of text to
images
• Great consistency from
subject line to headline to
call to action
4. Optimizing HTML Email for Visibility
• Encourage subscribers to whitelist you
• Keep “view as Web page/mobile” links in pre-header
• Balance images and copy
• Add ALT-tags to images
» These tags allow the designer to insert descriptive copy or links
that viewers can read in place of blocked images
• Keep ALT-tag copy short and specific
• Less than 10 words is good, less than 5 best
• Include your call to action or description of image
• Include “bullet proof buttons” – HTML code the graphic vs.
inserting a link to image
• Test all URLs and links to ensure they work and display
5. “Bullet Proof” Elements Survive
• Universal Orlando
Resort email with
images off
• Color, font,
background and
shape hard-coded
into HTML survives
image suppression
6. Benefit of Balancing Text & Images
• Much more of
your content
survives and
can be acted
upon
7. Sephora Design – Images On
• Upper left corner
optimized for
visibility in preview
panes
8. Sephora Design – Images Off
• Even if images
don’t render
key links and
topics survive
• Still optimized
for visibility in
preview mode
9. Ulta Beauty – Images On
• Some preview pane
optimization, but
main links for top
two offers are
“below the fold”
10. Ulta Beauty – Images Off
• Prime position (upper
left hand corner) has
no link
• But, free shipping offer
and link survives image
suppression
11. Do Users Activate Images in Email?
• Consumers more likely
to activate images in
email from companies
they regularly do
business with, granted
permission to, or know
and trust
12. Top HTML Email Design Resources
• High Impact Designer by TemplateZone
• Hundreds of pre-designed, customizable email, landing page, and
social media page templates for one low price
• Free trial at www.highimpactdesigner.com
• Email Layouts.com
• Downloadable email newsletter layouts created by a pro designer
• Campaign Monitor – www.campaignmonitor.com/gallery
• Email marketing software for designers
• Phenomenal blog answers many HTML design questions specific to
email
13. Graphic Design Key Takeaways
• Think “architecture” vs. “art”
– Remember message building blocks
– Design body of message as a mosaic, not a canvas
• Know where response hotspots are and use them to your advantag
– Upper left? Upper right? Pre-header?
– Put color, icons here
• Utilize graphic design to group and organize content into visually
scan-able chunks
• Optimize for visibility if images don’t render (balance)
• Use graphics to enhance response vs. detract from it
– Images should show what your copy “tells”
• The confused eye doesn’t buy!
14. #5: Content
Old New Rule
Static; Generic or broadly segmented
NEW New Rule
Dynamic and contextually-targeted
15. Content from Two Perspectives
• Should be a mix of promotional,
Overall program informational, transactional over time
content • Balance broadcast, segmented, triggered
• Frequency, sequencing, cadence
• Balance of text and images
• Different templates for different types of
Individual messages
message content • Dynamic, temporally relevant
• Mix of static and rich media
16. Three Flavors of Email
Broadcast Segmented Triggered
• Announcement, • Targeted based on • Customized to an
newsletter, etc. specific subscriber individual based
groupings on actions or
• Entire list receives • Customized by or timing
the same message sent only to specific
segments of the • Re-active vs. pro-
total active
| 16
17. Customer Email Program Example
• Hewlett Packard monthly
newsletter
– HP Newsgram sent to all
registered customers
– Clearly-displayed issue month
and table of contents
– Value-added:
o Free projects
o Interactivity, video
o HP Daily Surprise
o Cross-sells HP products too
17
18. Other Message Types
• HP deploys a good
mix of newsletter,
sales promotions
(deals), and holiday
greeting emails
18
19. Apply and Align Messaging to the
Customer Lifecycle
• Each stage of the customer lifecycle naturally lends itself to specific
email messages
• Use them to shift and direct the dialog
Pre-conversion Conversion (All
Post-Conversion Relationship-Building
(Prospects) Customers)
• Invites to engage • Thank-you • Tier-specific messaging • Bouncebacks
• Email subscribe • Welcome/onboarding • By RFM • Loyalty program
welcome/first • Up-sells/cross-sells • Surveys • Purchase anniversary
purchase incentive • News and info • Renewals/reminders • Life event (birthday)
• Cart Abandonment • Demographic-specific • “Best customer” offers • Reactivation
• Browse Abandonment offers campaigns
• By gender, age
20. Mix it Up
• Storyboard your email program
– Some message frequency and sequencing can be planned, but allow
for triggered
– Create a flowchart illustrating message types, timing, frequency
• Don’t be “the friend who only calls when you need something”
– Although accustomed to heavy promotional message volume from
retailers, consumers also want conversation, community, news and fun
21. Compelling Email Content Ideas
• Evolve, supplement or refresh your static HTML or plain text
email with
– Animation
– Video
– Temporally-relevant campaigns
– Dynamic Content
• Movement and multi-media = more clicks
• Time, place and quantity-specific content = greater relevancy
= more clicks
22. Animation
• Use minimally
and strategically
• Movement is eye-
catching
• Can enable more
content than
static images
23. Video in Email – Two Approaches
• Link to self- or web-hosted
• Preferred for now due to spam blocking, filtering, image
rendering and streaming video support issues
• Streaming video into inbox
• Video or animation streams into the message over an
open connection to the Internet
• Requires no plug-ins or media players on subscriber end, works with any ESP
• Requires HTML5-based message design
• Current environments supporting video in email:
• Windows Live Mail (Hotmail) (H.264)
• Apple iPad mail client (H.264)
• Blackberry (BOLT 2.1) (OGG Theora)
• Apple iPhone mail client (H.264)
• Apple Mail 4 (H.264)
• Thunderbird (OGG Theora)
• Leading current solution: Liveclicker (www.liveclicker.com)
24. Self- or Web-Hosted Video
• Video in email tips:
– Alert them that the
email contains video
• Subject line and
headlines
• Put video front and
center
• Play/pause console
should be visible
– Host in your domain or
– Host on your YouTube
channel for longer shelf
life
25. Streaming Video into Message
• Liveclicker’s Video Email
Express is integrated
with several ESPs
– Generates simple HTML
code for inclusion in
email
– They host and deliver
video content
• Style Campaign also
handles video in email
(sans audio)
Example courtesy of StyleCampaign.com
27. Dynamic Content
• Big and getting bigger
• Content served can be based either on:
– database-attributes (i.e. gender)
• Aka “custom publishing” in which you predestine certain content
for certain users based on database profile attributes
– real-time response behavior (open on mobile)
• Use location, time and device to sense what should be served
• Aka evolutionary optimization
• Not just for email content – can define landing pages
too
28. Time-Based Dynamic Content
• Movable Ink’s
technology allows
emails like this one
(to a conference
attendee)
– to display live
counts of people
attending the event
– To have an offer
that changes by the
date or time
Example courtesy of Movable Ink
29. Other Dynamic Content Approaches
• This retail message
displays
– location-specific
store information
– Real-time inventory
updates
– Time-based offer
updates
Example courtesy of Movable Ink
30. Content Key Takeaways
• When it comes to your email program, serve a multi-course
meal, not the same dish over and over again
• Greater message variety = less predictability = higher interest
and engagement
– Continuity programs create high trust, so some email should come on
a regular schedule (newsletter)
– However the unpredictable gets noticed more
• Static HTML is fine, but with HTML5 video in email is again
possible
• One size-fits-all is out. Triggered and dynamic content will
dominate email of the future
After AETV redesigned their emails using alt-tags behind images, multiple instead of a single image, and alt-text, they increased their click-throughs by 41%!- AETV (August 2007)
To begin with, think of all email campaigns as one of two types: either broadcast or triggered. You can usually easily see the difference because broadcast campaigns are the same, or substantially the same, for an entire list while triggered campaigns are specific to an individual action, characteristic, or event. When most marketers begin using email they have a tendency to broadcast the same message to their entire list rather than to respond to specific list member actions or inactions. Certain types of email – a newsletter for example – are appropriate for broadcast since newsletters usually contain information relevant to the entire list. There are, however, many other ways in which email can powerfully be used to speak only to specific segments of your list or individuals on it who are in-market or expressly interested in what you have to offer at a specific time. To realize the full potential of email, you’ll have to supplement your broadcast-style email with triggered campaigns. So, o successfully use triggered email you first have to understand which opportunities lend themselves to it. Unlike broadcast email, triggered email messages are automated, sent based on external events or actions, rules-based, and unique to steps in a consideration path, to individuals, or both.
Not only can you categorize triggered email campaigns and messages as belonging to one of the five main types you just learned about, you can also map them across a customer lifecycle path like this. In fact, I encourage you to use this as a checklist for creating your own triggered email appropriate to each stage. For example, do you have an email list sign-up available to people who haven’t purchased yet? If so, do you welcome new subscribers to the list? Do you educate and familiarize them with onboarding messages? Do you email them if they’ve been browsing or shopping online and then abandon before buying? Or, when it comes to your customers, do you thank them with bouncebacks after purchase? Send reminders? Acknowledge their birthdays? This graphic illustrates that there are many specific kinds of triggered email messages appropriate for different stages of the customer lifecycle and that you should be routinely using them across your target audience.
Their unique advantage is you can crop content from any web page. The one variable they handle is the image tag for their clients. It can render on open or stream on open to make their image content super-relevant. Most of the dynamic content choices (like location) are rules-driven (if responder is in NY, then show this store, etc.) The geo-location is IP-driven, not GIS. Goes down to city level, sometimes lower (neighborhood level) but not street-specific.