design and build html email

Words to work by

“The potential for economy, efficiency—even poetry—is a virtue of email that makes it not only an effective communication channel, but also an engaging form of creative work. I challenge email designers and copywriters to continually strive to find that just-right place where—ah!—form and function meet: where every image, every word, has meaning.”

- Lisa Harmon, Principal Smith-Harmon

Agenda: August 20, 2009Email creative that works

© 2009 Smith-Harmon, Inc.

IntroductionsHello, how do you do?

Smith-Harmon

1929 3rd AvenueSuite 300Seattle, WA 98101

T: 206.774.0199F: [email protected]

Smith-Harmon is a unique agency dedicated exclusively to providing premier email marketing strategy and creative services. We live and breathe email excellence.

Leading brands, from Williams-Sonoma to REI, work with us to maximize their email program experience and performance.


Introductions: Who We AreAll for the love of email

Our principles Service Integrity Perfection Style Delight

Our principalsAaron Smith & Lisa Harmon

We've developed a stellar reputation within the industry as the go-to team for email.

Our people strive to be the best strategists, designers, writers and coders by adhering to our five guiding principles: Service, Integrity, Perfection, Style and Delight.

Every little detail counts and we seriously sweat the small stuff. Thanks to our expertise and passion, our clients stress less, which makes us smile more.


Introductions: Who We AreA company with heart

Love note

“Smith-Harmon was able to communicate an innovative and ‘on brand’ email marketing strategy that propelled west elm open and click-thru rates to new benchmark percentages. On top of driving unforeseen success in our email metrics, their dedication and reliability are rare traits within the ‘creative realm’ that made their partnership a true pleasure.”

- Internet Manager, west elm


Introductions: Who We AreWe heart our clients and they heart us back

Who are you?Tell us about yourselves.

The ChallengeThe Inbox and the Client

The Challenge: What is Good Creative?Success is dependent on a unique set of considerations


The Challenge: The InboxPrint, web and email design


Email is a bit like print…• What works for print does not

always translate well to email.

• Recipients rarely see an email in its entirety, so information hierarchy is critical, with the most important information at the top, working down.

• Images can help tell a story, but if they are too large and take too long to download, or they push the key points too far down along the page, or they are not properly alt-tagged, they hinder rather than help.

Email is a bit like web…• The principles of web design

often apply to email, but with notable exceptions.

• In email, complex coding increases cost and production times as well as jeopardizes rendering and user experience.

• In email, rich media including forms, scripting and Flash usually don’t render correctly.

Email is very much it’sown medium with it’s

ownset of rules…

Words to work by

“An email is like a retail store window; it needs to reveal just enough to compel viewers to enter the store.”


• Viewing an email is different from browsing online• Viewers are not necessarily looking for something • They need to be pulled more vigorously

The Challenge: The InboxThe inbox mindset


The Challenge: Client ChallengesDeliver innovative solutions to strategic and creative problems


Thanks to the combo of cluttered inboxes and an uncertain economic climate, batch-and-blast email isn’t

performing like it used to. How can I leverage our customers’ lifecycle

touchpoints to take our email program to the next level? ”

“Our email templates aren’t working for us

anymore. For starters, they look like a nightmare in Outlook 2007! What’s more – the suite evolved organically over time, and it shows – they’re all mismatched. Finally,

they don’t support the dynamic content we’re starting to leverage in our messaging.”

“

I am woefully understaffed. My email creative support comes from an internal team that’s (A)

totally maxed out with website and print projects and (B) doesn’t know the first thing about email

– and doesn’t care to learn. I need help with day-to-day management and production.”

“

What are your challenges?Tell us about your experiences.

The ApproachPhilosophy and Process

The Approach: PhilosophyA powerful philosophy ensures success Deliver timely, relevant email that improves subscribers’ lives


1

2 Preferences Collection & Progressive Profiling

Email Acquisition

3 Welcome

5 BrowseBased

6 AbandonedCart

7 EnhancedTransactional

8 Loyalty

9 Survey

10 Reactivation

11 WinBack

4 Newsletter

The Approach: ProcessPremier email marketing strategy and creative services

StrategyTake your clients’programs to the next level. Define a thoughtful, engaging, best-in-breed email program that optimizes subscribers’ experiences andmaximizes ROI.

CreativeDesign with beauty and brains. Produce creative that looksgreat and performs evenbetter. Deliver clients’brand and messagingto the inbox with smashingstyle and success.

TrainingTeach your clients’teams to fish. Transform client teamsinto in-house experts,providing the knowledgeand materials they need tomaster strategy and creativebest practices.

Welcome3 Segments:Retail VisitEcom SignupEcom Purchase

Welcome3 Segments:Retail VisitEcom SignupEcom Purchase

Guest Action:Opens messageTriggers:Add to Biweekly Stream


Guest Action:Does not open messageTriggers:Nonbuyer Ractivation

Guest Action:Does not open messageTriggers:Nonbuyer Ractivation



Guest Action:Does not open messageTriggers:“Nonbuyer” segment

Guest Action:Does not open messageTriggers:“Nonbuyer” segment

The Approach: ProcessBuild a strong foundation through research and discovery


Message Audit Bring order to the chaos.Get your arms around what your clients are currently sending, and how it’s performing.

Creative AssessmentOffer a pair of fresh eyes.Review client creative and make concrete recommendations for instant improvement.

Competitive StudyUncover your clients’ competitors’ best-kept secrets.Analyze client programs to identify and leverage the best strategies and tactics.

2

1

3

The Approach: ProcessDeliver customized action plans that drive targeted results


Program DefinitionDefine and deploy a lifecycle marketing program.Create a best-in-class program, mapped to your clients’ customer lifecycle touchpoints.

Audience, Frequency & Personalization StrategyKnow how often to send, and to whom.Offer segmentation, personalization and frequency strategies that are right for your clients.

Testing PlanFinally get serious about testing for success.Identify and prioritize testing opportunities, execute the tests and evaluate results.

2

1

3

The Approach: ProcessTemplate, makeover and production services

TemplatesProduce your clients’ strategies in Technicolor. Build a library of on-brand,flexible and effective design templates to support your clients’ programs.

MakeoverIs your clients’ creative so five years ago? Refresh client creative, run an A/B test, and witness the

metrics makeover magic!

ProductionAre your clients feeling a little short-staffed? Offer the ongoingavailability and attention of a team of dedicatedemail experts.


The Approach: ProcessProduction realities

Common issues include:• Multi-tasked resources

• Quick timelines and turnarounds

• Reactionary nature of retail and email channel combined make for lots of last-minute changes

What other productionchallenges do you face?

•

•

•

Words to work by

“What makes good email creative? The success of an email design is dependent upon a unique intersection of considerations: your brand, your business objectives, your resources, the inbox environment and – most importantly – your recipients. Understanding general email creative best practices is only the first step; the second is applying best practices appropriately based on the above factors. What works for Sears does not work for Saks.”



• Quarterly Brainstormso Synchronize creative across channelso Identify unique ways to use email channelo Create quarterly creative testing plan

• Monthly Planning Meetingso Review previous month’s performanceo Confirm this month’s scheduleo Review and refine creative briefs

• Weekly Check-inso Review previous week’s performanceo Review creative in productiono Review next set of finalized creative briefs

The Approach: ProcessPlanning to succeed

Words to work by

“Three-Question Check: Before you hit “send,” give your message a two-second scan and ask yourself three simple questions: (1) What is this email about?, (2) Why should my subscribers care?, and (3) What should my subscribers do about it? Do not deploy unless the answers to these questions are immediately obvious.”


The Approach: ProcessThe production calendar and process

Campaign Brief Creative Proof

Business Proof

Creative Approval

Link

Creation

Staging Launch

Campaign Name Fri, 3/14 Fri, 3/21 Tue, 3/25 Fri, 3/28 Fri, 3/28 Tue, 4/1 Fri, 4/4

• We recommend a two-to-three week start-to-launch production cycle• Identify owners, stakeholders and distribution lists for each step• Associate days of the week with each step

Client Manager

MessagingGoals

AccountManager

CollaborativeProcess

CodedFiles

Q/ATesting

A/BTesting

PerformanceMetrics

Designer Copywriter Coder Tester


Open Rateso Percentage of recipients that actually

open your emails (# of messages opened / # of messages delivered)

Click-Through Rates (CTR)o Click-Through Rate (CTR) = # of

click-throughs / # of messages delivered

Conversion Rateso Response Rate = # of actions

taken / # of messages delivered

The Approach: ProcessEmail Metrics

Smith-Harmon Email Metrics

Enough with the process!Let’s Get Creative

Design 101Email Anatomy

Design 101: Email AnatomyFrom head to toe

• Preheader • Header• Navigation• Table of Contents• Primary Message• Submessage(s)• Siderail• Recovery Module• Footer


• Snippet text appears in Outlook and Gmail

• Only 21% of major retailers have optimized their email for snippet


Design 101: Email AnatomySubject line & preheader (snippet text)

Design 101: Email AnatomyPreheader

• The preheader is the usually-small and subdued text blurb at the top of an email that includes some combination of the below:o Content teaser snippet(s)o View with images/view mobile version prompto Add to address book or ensure future delivery prompt

• Preheaders can be used to:o Reinforce the subject line and highlight the primary message of the email

o Extend the subject line and highlight secondary messages in the email

o Feature calls-to-action not present anywhere else in the email

Design 101: Email AnatomyPreheader


OLD

NEW

Design 101: Email AnatomyHeader & navigation



HOT


SMART

http://www.smith-harmon.com/PREVIEW/PiperlimeExample.gif

Your header and navigation should change based on message content



EVENT

CONTENT

Design 101: Email AnatomyPrimary message

• Balance imagery and text

• Include prominent call-to-action

• Link to matching web page for increased conversion

Design 101: Email AnatomyPrimary message


EMAIL

WEBSITE

Design 101: Email AnatomySubmessages

• Use visual prompts like color, headlines, imagery and graphics to guide viewers’ gaze

• Test submessage count tolerance


SIDERAIL

LAYERCAKE

• Test submessage count tolerance – not just once, but periodically

• Be aware of the law of diminishing returns; sometimes, less is more


YIKES!

Design 101: Email AnatomyThe recovery module & footer

Design 101: Email AnatomyThe recovery module & footer

Just in case you were totally bored by everything else,

here’s some other stuff…

”

“

• Umbrella your GSF with a benefits-focused headline• Use equi-sized modules for easy last-minute message swap-outs• Link to your website gift center — it’s a great catch-all for gift givers• Promote gift cards — they’re so hot right now• Surface gift services — the unique ways you help make holiday shopping easy• Detail order-by dates, particularly as we approach mid-December• Dynamically generate local retail store info to drive brick-and-mortar traffic

Design 101: Email AnatomyThe gift services footer


HOT HOLIDAY

TIP

Design 101: Email AnatomyThe gift services footer

HOT HOLIDAY

TIP

Design 101: Email AnatomyLanding pages

• If an email is the “window dressing,” than the landing page is the “clothing department”

• A well-designed email draws the customer into the store; a well-designed landing page is where the offering can be fully merchandised

• Tightly coupled email and landing page combinations can be an effective means to increase conversion



EMAIL

WEBSITE

Design 101: Email AnatomyLanding pages

Email Anatomy Pop QuizBe the first to answer all questions correctly

and get a $5 Starbucks card!

Design 101: Email AnatomyPop Quiz Answers

1. Name two things to include in the preheader?

(a) Content snippet

(b) View with images/View text version

(c) Add to address book

2. Which of these is not a type of submessage?

(a) Layercake

(b) Siderail

(c) Fruit cake

3. What is a recovery module?

Content segment which can re-engage or re-inspire the consumer to click through.

Design 101Defensive Design

Design 101: Defensive DesignThe trend toward disabled images and links is growing

EmailClient

Default Images on?

Default Links on? Default Changeable?

AOL 9.0 Software No No Yes

AOL.com, AIM.com Web No Yes Yes

Gmail Web No Yes Yes

Hotmail Web Depends Depends Yes

Lotus 7.1 Software Yes Yes Yes

Mac Web No Yes No

Outlook 2003, 2007 Software No Yes Yes

Yahoo Web No Yes Yes

Design 101: Defensive DesignThree ways to beat disabled images


Design 101: Defensive Design9 of 10 users have a preview pane, and 7 of 10 say they frequently or always use it!

Email Clients with Preview Panes Email Client Preview Pane?Default Image Setting in

Preview Pane

AOL 9.0 Software Yes Off

AT&T Web Yes Off

Express 6 + Software Yes Off

Lotus Notes 7 + Software Yes On

Mac Web Yes Off

Mozilla Thunderbird Software Yes Off

Outlook XP Software Yes On

Outlook 2003 Software Yes Off

Outlook 2007 Software Yes Off

Terra / Telefonica Web Yes On

Windows Live Mail / Hotmail Web Yes Off

Yahoo Web Yes Off


Design 101: Defensive DesignPreview pane pain


NOW YOUSEE IT…



NOW YOUDON’T!



MISTAKEOR

MIRACLE?

http://www.smith-harmon.com/images/edm/screenshots/0410_Burberry_Whitespace.gif

Design 101: Defensive DesignThree things to fit into the preview pane


Design 101: Defensive DesignHow to get your message seen


• Group content in separate modules

• Include clear content section headers

• Place imagery in an “S-curve” to guide gaze across and down page

• Use button treatment for primary call-to-action

• Include alternate HTML text calls-to-action

• For longer-form mails, include a TOC

http://smith-harmon.com/PREVIEW/HABEAS/images/screenshots/0522_HabeasNewsletter_2.jpg

Defensive Design Pop QuizBe the first to answer all questions correctly


Design 101: Defensive DesignAnswers

(01) J

(02) F

(03) C

(04) G

(05) I

(06) H

(07) A

(08) E

(09) D

(10) B

Design 101Great Basic Layouts

Design 101: Great Basic LayoutsProduct-focused


Design 101: Great Basic LayoutsFeatured collection


Design 101: Great Basic LayoutsCross-category


Design 101: Great Basic LayoutsSpecial offer


Design 101: Great Basic Layouts Employ a modular creative frameworkA library of flexible creative elements from which REI builds a range of message configurations

One flexible template.Three configurations! Now that’s smart design.

Copy 101Writing for Email

Copy 101: Writing for EmailHow to get your message read


• Use brief, catchy headlines

• Keep copy focused

• Use bullet points

• Make call-to-action clear and direct

http://smith-harmon.com/PREVIEW/EDS/images/screenshots/0619_SearchModule_2.jpg

Copy 101: Writing for EmailHow to get your message read


• Use brief, catchy headlines

• Keep copy focused

• Use bullet points

• Make call-to-action clear and direct

http://smith-harmon.com/images/edm/screenshots/20060127_Apple_VDay.jpg

Copy 101: Writing for EmailAvoid the dreaded “wall of text”


Before

Hello James,

This Saturday is your last chance

to register for the Email Evolution

Conference. This year you’ll see

how to craft email copy, grade

your emails and learn about

activation strategy.

After

Hi James!

Email Evolution Conference:

Last Chance to Register by Saturday

See how to:• Craft email copy• Grade your email designs• Learn about activation strategy

Copy 101: Writing for EmailCarefully-crafted, effective headlines


• Headlines should be short and catchy

• Your headlines should work with your calls-to-action (because that’s all people read anyway!)

• Example: Liquid AssetsShop Fluid Outfits »

Copy 101: Writing for EmailEffective calls-to-action (CTAs)


• Recipients want to know where you’re taking them

• “Read more” is vague

• Use more descriptive action words:

– Shop shoes now

– Sign up!

– See it now

– Get in there!

– Check it out!

– Buy now

Copy 101Subject Lines

Copy 101: Subject LinesBasic themes


• Personalizationo You had 1 guestbook signature this year, Alexanne (Classmates, Aug 17)

• Brandingo Moosejaw Daily Madness (Moosejaw, Aug 18)

• Product/Categoryo A&F Premium Jeans (Abercrombie, Aug 18)o Find the Perfect Party Dress (Nordstrom, Aug 18)

• Benefito Exclusive Online Offers. More Than $3,200 In Savings (Costco, Aug 17)

• Seasonal hookso Get on this Autumn's Floral Trend with a fragrant offer (Johnnie Boden, Aug 11)

• Urgency/Deadlines o EXTRA 10% OFF: 1-Day Shoe Sale - Now Up To 70% Off! (Bluefly, Aug 17)

• Other key words– Great Value: Exclusive Cuisinart 9-Speed Hand Mixer (Williams-Sonoma, Aug 17)

Copy 101: Subject LinesLength is everything?


• Subject lines of less than 60 characters proved best for optimizing open rates

Outfits now, outfits later. (Anthropologie, Aug 18))

• Click, click-to-open, and conversion rates are optimized by subject lines of over 70 characters

Matte skin is in! FREE shipping with Benefit's NEW matte-finish loose powder, matterial girl. (Benefit Cosmetics, Aug 17)

Copy 101: Subject LinesLength isn’t everything?


Epsilon Study:

“Rethinking the Relationship between Subject Line Length and Email

Performance: A New Perspective on Subject Line Design”

• Subject line length isn’t as important as commonly thought

• Order of the information is more important

SL1: “This weekend only at your local Acme Store, special savings on Ladies Apparel!”time > brand > benefit > category

SL2: “Special savings on Ladies Apparel at your local Acme Store this weekend only!”benefi t > category > brand > time

Test into length and

order!

Copy 101: Subject LinesWhich performed better?


SL1: “Last chance to order for Valentines Day is this Wednesday, Order Now”

SL2: “Only 48 hours to order for guaranteed Valentines Day delivery”

Credit: Epsilon

Copy 101: Subject LinesWhich performed better?


SL1: “Protect Yourself From the Sun This Summer…”

SL2: “The Best Sunscreen, Hats, Rash Guards and More…”

Credit: Mailchimp

Copy 101: Subject LinesThe Retail Email Blog’s Subject Line Hall of Fame


1. Bluefly, 10/23 — Rock the Coat

2. Sephora, 12/3 — 10 ways to kiss

3. AbeBooks, 5/28 — Birthday. Happy birthday. Celebrating a New James Bond Release

4. Norm Thompson, 1/11 — Fan mail for socks? Yes! And that's not all...

5. Finish Line, 6/2 — Selling Your Sole Can Be A Good Thing!

“Learn more about subject lines at my blog –

www.retailemailblog.com.”

“Learn more about subject lines at my blog –

www.retailemailblog.com.”

Chad White,Research Director

Design ExerciseProfessional Design

Design Exercise: Professional DesignPhotoshop folder and layers

Folders and Layers Protocol• Separate as much as possible into folders,

no loose layers

• Order all layers as they appear in the design top-to-bottom, left-to-right

• Name each layer so that it is easily recognizable what it is

• Name image layers the same as the image file name

Design Exercise: Professional DesignPixel counting

• Pixel count for equal distances above/below and to the left-right of each object, even on images

1

Design Exercise: Professional DesignGrouping

• Not everything has to be the same amount of pixels; you should also use larger and smaller distances between objects to visually imply groups

2

Design Exercise: Professional DesignAlignment

• Check that elements are aligned to each other

3

Design Exercise: Professional DesignConsistencies

• Look for consistencies on repeating occurrences such as colors, text treatment, link treatment, product names, etc

4

Design Exercise: Professional DesignSpacing

• Make sure to leave enough space for expanding fonts; some email readers and platforms display fonts larger than others

5

5

Incorrect Correct

Design Exercise: Professional DesignFind it

1. Spacing in subheadline 2. Spacing around body copy3. Spacing around product on image 4. Spacing inside button5. Inconsistent product names6. Wrong outline color7. Html text spacing9. Arrow spacing8. Border spacing10. Preheader alignment

Lunch Break!When We Return…Let’s Get Technical

Code 101Email Readers

Rendering concerns

Working with a multitude of platforms means more opportunities for mistakes; what looks fine in one platform may look terrible in another!

• Multitude of platforms:Outlook, Yahoo!, AOL, Gmail, Lotus Notes, Hotmail, Road Runner, Thunderbird, Verizon, Comcast, etc.

• Each platform uses a different HTML rendering engine

• Most platforms only support a subset of HTML features:

• No Javascript• No Flash• No embedded video• Limited support for CSS• Limited support for HTML Forms

Code 101: Email ReadersDesktop vs. web-based


Know your audience

• Tailor your efforts to platforms your subscribers use the most

• B2B marketers need to pay more attention to desktop readers like Outlook and Lotus

• Review test emails on your primary subscriber platforms before sending

• Outlook 2007 supports a limited subset of HTML which creates major challenges for both designers and coders

• Poor support for CSS-based positioning

• No background image support

• No support for animated GIFs

• Lotus Notes earned a bad reputation over the years, but has made improvements with the release of version 8

Code 101: Email ReadersOutlook and Lotus Notes


Code 101HTML & TXT

Code 101: HTML & TXTMajor coding differences between HTML for web and email

HTML for email differs from HTML for standard web development in several significant ways:

•Support for standard CSS positioning is poor to non-existent among many email

platforms.

•Most major web-based email platforms strip out <style> tags and/or anything in

the <head> section of an HTML file.

•Standard interactive features of web development cannot be used:o Javascripto Flasho Embedded video

•There are more platforms to be concerned with than in regular web development,

and many of them are frequently updated with no notice.



Code 101: HTML & TXTCoding for email: the process

Code 101: HTML & TXTTools of the trade

Tools

• Photoshop is used for slicing and exporting images from the design file.

• A text-based HTML editor should be used to code the production files.A dedicated file editing tool such as Textpad or Dreamweaver is recommended. Using Notepad, Wordpad or the Mac equivalent TextEdit is not recommended; they can often introduce invalid characters and unexpected line breaks in your code.

• Use an HTML validation tool to check the syntax of coded HTML files (some text editors have built-in HTML validation functionality).

• Email programs (Outlook, Entourage, Thunderbird, Mac Mail, etc.) and ISP email accounts (Hotmail, Yahoo, Gmail, AOL, etc.) are used to conduct render testing.

Code 101: HTML & TXTTools of the trade

File Organization

Use a consistent naming convention for campaign names, files and images.

Consistent naming conventions will save time when searching for assets from

previous projects. We recommend organizing files for a given mailing into folders

by month and date (for example 0220_Coastal) and archiving all folders at the end

of each year.

Code 101: HTML & TXTPreparing images

Begin with slicing and exporting images from PhotoShop

• Identify which areas of the design will be linked• Determine which items will be HTML text and which will be graphical• Create slices in Photoshop and export the graphics:

o GIF format is best for simple line art and purely graphical elementso JPEG format is best for rich, multi-layered and photographic

elements; images exported in JPEG format should normally be optimized at 60% quality, though in some rare cases you may need to increase the quality to as much as 75% to reduce aliasing artifacts

o Use a consistent naming convention for image files (for example, “title_main.gif” for the main title text)


Code 101: HTML & TXTKeeping code lean

Keeping the size of files small is important for two main reasons:

• Files that are too large may not completely download in some email platforms without requiring additional input from the user

• Because campaigns are often sent to a large audience, keeping the file size small helps reduce strain on your email infrastructure

Things we can do to reduce file size:

• Leave out unnecessary tagso alt=“”o border=“0”o nowrapo aligno valigno <tbody> and <th>o meta tags or any information within the <head> tag


Code 101: HTML & TXTWorking with tables

Because you cannot use pure CSS to lay out the design of an email, we invariably rely on tables in combination with inline style values and spacer graphics to position elements.

• Spacer.gif’s are frequently used to create padding in HTML email files. The use of spacer.gif’s is the best way to create bullet-proof files, but the downside is the files will be larger. Note: it’s imperative to specify precise height and width values in <td> tags that enclose spacer.gif’s.

<tr><td height="1" bgcolor="#dc6a2b"><img src="images/spacer.gif” width="1" height="1" /></td></tr>



<table width="670" cellpadding="0" cellspacing="0"><tr> <td align="left" valign="top"> <font face="verdana,arial,sans-serif" size="1" color="#999999" style="font-family:verdana,arial,sans-serif;

font-size:9px; color:#999999;”> Time-Saving Cooks’ Tools from <a href="http://www.williams-sonoma.com" style="color:#999999;

text-decoration:underline;">Williams-Sonoma</a><br/> </font> </td> <td align="right" valign="top"> <font face="verdana,arial,sans-serif" size="1" color="#999999" style="font-family:verdana,arial,sans-serif;

font-size:9px; color:#999999;"> Add [email protected] to your address book.<br/> </font> </td></tr></table>

http://www.williams-sonoma.com/

mailto:[email protected]



• Inline CSS may also be used, but is more complicated to get right across the major email platforms due to inconsistent support for padding and margin values.

• Tables should always have cellpadding and cellspacing set to “0” and should also have a specific width value specified. Do not use the border attribute; Entourage and Gmail have spotty support for border values on tables.

• The rowspan attribute should be used sparingly and with caution. Some email platforms do not accurately render code using the rowspan attribute.





• If an <img> tag is the last element within a <td> tag, the closing </td> tag should immediately follow the <img> tag with no spaces or breaks (i.e. <img …></td>).

<tr><td width=”250”><img src="images/hero.jpg” width="250" height="125" /></td></tr>

Code 101: HTML & TXTHTML forms

HTML forms can be used to provide site search and store locator functionality from directly within an email. While not all email service providers support the <form> tag in HTML (most notably, Hotmail, AOL and Outlook), the majority of email platforms do. There are several considerations when coding HTML forms:

• Include a style attribute within the <form> tag that sets top and bottom margin amounts to “0” – this will keep different browser interpretations of <form> margin spacing from effecting the layout of your message.

• The “get” method should always be used – many email platforms will strip out <form> elements using the “post” method.

• Where possible, filter out forms based on recipient domain (i.e. subscribers with @hotmail.com and @aol.com domains).

• Provide an alternate link to the submit location. In the example here, the “More in Store” graphic and “Find the store nearest you” text link to the store locator page.


Code 101: HTML & TXTOutlook 2007

Since its release in early 2007, Microsoft’s Outlook 2007 has received a lot of attention in the email marketing industry due to its poor support for standard HTML and CSS features. Here are the major issues you need to be aware of:


• Background images are not supported. Try to limit the sections of HTML files that rely on background images, and in any case where a background image is being used, also include a bgcolor value so that the design will not have a glaring white block where the background image should be.

<tr><td height="23" bgcolor="#FFC435" background="http://g-ec2.images-amazon.com/images/G/01/m11/d20/bg2.gif"> <a href="http://www.amazon.com/" style="font-family: verdana; font-weight: bold; font-size: 13px; color: #000066; text-decoration: none; ">Buy a Gift Card</a> </td></tr>

Code 101: HTML & TXTOutlook 2007

Microsoft’s Outlook 2007 problems:


• Animated GIF’s do not rotate in Outlook 2007; they simply stay on the first frame of the animation and display like any other static image. As a partial work around for Outlook 2007, the first frame of an animated GIF should always be a picture that can stand on its own without animating.

• Extra care should be used with colspan and rowspan values – they should always be accurate, otherwise they may cause rendering errors.

• <td> tags that contain an image less than 12 pixels high will often add 10 pixels of padding above the image. To keep Outlook from adding this unexpected vertical padding, be sure to also include the height of the image in the enclosing <td> tag.

<td width=”503” height="12"><img src="images/medium_btm.gif" height="12" width="503"></td>

Code 101: HTML & TXTText file anatomy

• SeparatorsUse multiple repeating characters across a single line to create logical sections within the plain text message.

• Header SectionThe top section of the plain text file should include the sending company’s name and either a link to an online version of the message, or the main headline title from the HTML version.

• Body & Submessage(s)Below the header section, the primary message (and any submessages) from the HTML version should be typed out and any corresponding links from the HTML version should be included at the bottom of these sections.

• Nav LinksThis section should provide several links to different sections of the site that will appeal to different recipients.

• FooterThe footer section should include copyright and legal disclaimers as well as unsubscribe, profile and “forward to a friend” links.


• Separators

• Header Section

• Body & Submessage(s)

• Nav Links

• Footer

Code 101: HTML & TXTText file line lengths and links

Line Length & Blank Lines• Some email programs automatically wrap text lines to keep sentences from scrolling

past the visible space in the message window. To avoid having text automatically wrapped, and therefore throwing off the layout of paragraphs, always use a 70 character limit per line before a line break.

• Microsoft Outlook and some other email programs have a feature that automatically removes blank lines. To circumvent this feature and keep your plain-text emails looking the way they were intended, insert two spaces where blank lines exist.

Links• Links should always be placed on a separate line directly beneath the text where the

product or offer is described.


Plain Text Links: Descriptive text followed by a colon is placed on the line above the link.

Find Out More About Our Offering:http://www.someoffer.com/linkdetails/…

Code 101: HTML & TXTHow to make TXT POP!

Uppercase in Plain Text vs. Bold in HTML Files• Much in the same way bolding can be used in HTML, use all uppercase

letters to make important elements stand out in plain text files.

Bulleted Items• Format bulleted items and lists using dashes separated by one or two

spaces. It’s tempting to use asterisks characters, but these should be reserved for any legal and/or footnote usage in plain text files.

Special Characters• Special characters used in words such as sauté are okay to include in plain

text files as long as they fall within the standard ASCII character set.


Uppercase in plain text: Helps draw the eye to the text. This is some text in a message. LOOK AT THIS PART... the text in uppercase stands out from the rest.

Code 101QA

• Testing is a critical step in the process of sending out an email message. The differences between how browsers and email services render and support HTML on multiple platforms is quite varied.

• In addition, the major web-based email platforms are constantly rolling out modifications to their systems unannounced and these changes often have an impact on how messages will be rendered.

• Because of these variables, it’s important to test your email campaigns on an ongoing basis.


Code 101: QAWhy it’s critical for email

What to test

ConsistencyPricesLinksVerbiage & GrammarSpelling

RenderingDesktop & Web-based Email Platforms

Code & QA Pop QuizBe the first to answer all questions correctly


Code 101: QACode & QA Answers

1. Two ways code for email is different from web:

(a) Poor CSS support

(b) <style> or <head> tags don’t work

(c) Javascript, flash and embedded video are not supported

2. Which of these is not a tag you should leave out in order to keep code lean?

(a) border = “0”

(b) <tr>

(c) nowrap

3. Outlook 2007 does not support?

Background images and animated gifs.

Code ExerciseNow it’s your turn!

Break!When We Return…Let’s Get Advanced

Email 202Animation & Video


Email 202: AnimationThe GIF

Animation in email is accomplished by creating an animated GIF

Benefits:• Simple and easy way to include motion in email• Supported by most email platforms• Creates engagement and richer visualization

Disadvantages:• Not supported by Outlook 2007• Lower image quality• Slightly larger file size• Can be distracting if used improperly

Email 202: Animation Use animated GIFs to get attention

http://ebm.cheetahmail.com/c/tag/hBHlLvDAcO7FvBs9v9OBCDyxFVp/doc.html

Email 202: Animation Use animated GIFs to highlight features

http://a293.g.akamai.net/7/293/5910/0010/email4.potterybarn.com/email/pt/noimage/plasmaboard3701539_040908.html


Email 202: VideoDelivery

There are three methods for delivering video content via email:

1.Static image: A static image simply features a still of one of the frames of the video

2.Video GIF: A video gif uses a compressed, streamed animated gif to deliver video-quality content.

3.Embedded video: Currently Goodmail Systems is rolling out its CertifiedVideo service, which enables full video and audio, but only on the AOL platform.


Email 202: VideoStatic Image

Use strong visual cues to indicate video to encourage subscribers to click through to web-hosted video.

Benefits:

• The least expensive of the three delivery options

Disadvantages:

• No movement to catch subscriber’s eye

• Subscriber must click for video and audio

• Play buttons • Frames that look like Windows Media

or Quicktime video players

• Video verbiage

http://ebm.cheetahmail.com/c/tag/hBIrsZ2AUCgX1B7ScTPAZJZqmIH/[email protected]&extid=20080822_DEN-track


Email 202: VideoVideo GIF

A video gif uses a compressed, streamed animated gif to deliver video-quality content

Benefits:

• Subscribers can preview video images

Disadvantages:

• Sound can’t be enabled within the email

• Additional production expense

Email 202: VideoUse video to demonstrate or instruct


http://www.rei.com/learn/Snowsports/rei/learn/snow/glide_wax?cm_ven=email&cm_cat=gm&cm_pla=na&cm_ite=11_02_gm&id=header

http://www.williams-sonoma.com/products/c278/

Email 202: Video Use video for interviews and reporting


Email 202: VideoUse video to deliver a cross-channel experience


http://www.freepeople.com/index.cfm/fuseaction/category.content/categoryID/6815eef8-eac0-4c23-981a-94d9b4d42409?cm_mmc=broadcast-_-Q12008-_-080307_video-_-catalogvideo_video&[email protected]

http://www.saksfifthavenue.com/main/HolidayWindows.jsp?site_refer=EML1214A

Words to work by

“While it shares characteristics with both print and web, email creative is a distinct discipline that requires designers to address channel-specific issues. Good email designers must take a results-oriented approach and – just as importantly – have a thorough knowledge and understanding of the many platform combinations across which their designs are displayed.”

- Aaron Smith, Principal Smith-Harmon

• Saks Fifth Avenue, Feb. 4, 2009: “Video Exclusive! Days 1 to 3 of Fashion Week”

• J.Crew, Feb. 13, 2009: “The well-traveled tote (see video)”

• Ralph Lauren, Feb. 18, 2009: “RLTV Presents: Cape Lodge, An RL Home Video”

• Luis Vuitton, Feb. 18, 2009:“The first Louis Vuitton movie : Travel and Emotions”

Email 202: VideoReference “video” in your subject line


Email 202Social


Email 202: SocialOverview

There are two ways of integrating social media and email marketing:

1.Including a request to join your community on a social network:

Keynotes:• Is the presence announced

prominently or is an ongoing link quietly added?

• Are social network logos and icons used for easy recognition?

• Placement within email: top or bottom?

• As with email sign-ups, you have to explain why people should join

2. Allowing subscribers to share your content with friends on social networks

Keynotes:• Position within email: Top or bottom?

• Links to multiple social networks or just one?

• Positioned near forward-to-a-friend link/button?

• Share interface offers access to dozens of social networks

• Share interface is customizable


Email 202: SocialJoin our community

Banners, as in this J&R email

Text link, as in this L.L. Bean email

Explains fan benefits, as in this Banana Republic email

Call to join multiple social networks, as in this Fingerhut email

An invitation to interact via a social network, as in this Sephora email


Email 202: SocialShare with your network

Here are two current Share with Your Network (SWYN) Trends:

1.SWYN is the new FTAF

Implications:

• Allows sharing via an array of social networks

• The SWYN mechanism often includes email forwarding

• SWYN being integrated into ESPs’ interfaces

• Supplementing/replacing forward-to-a-friend links

2. SWYN is more viral than FTAF


Email 202: SocialShare with your network

Links to multiple social networks, as in this Urban Outfitters email

Link to single social network, as in this Bloomingdale’s email

Links to multiple social networks, as in this Betty Crocker email

REI uses AddThis

Norm Thompson uses ShareThis

Email 202Dialogue-Drivers

• Opportunities to share

• Surveys and polls

• Requests for feedback

• Press coverage

• Customer reviews and quotes

• Contests

Email 202: Dialogue-DriversTips for encouraging engagement through conversation

http://recp.mkt32.net/servlet/MailView?m=838155&r=MjI3NzQ5NzU3NwS2&j=NDY0NDkxODMgS0&mt=1

• Opportunities to share

• Surveys and polls

• Requests for feedback

• Press coverage

• Customer reviews and quotes

• Contests

Email 202: Dialogue-DriversTips for encouraging engagement through conversation


• Recognize subscriber by using name and other personal data

• Use data collected in preferences center to customize content

Email 202: PersonalizationTips for encouraging engagement through customization

Email 202Testing

Email 202: TestingKeys to creative testing

• Test constantly• Make tests controlled and

easy to understand• Use results to inform the

design process• Creative test ideas:

o Subject lineso Copy length o Call-to-action treatmentso Prices and product names o Enviro vs. silo photographyo Bells and whistleso Personalizationo Landing pages

Email 202 Pop QuizBe the first to answer all questions correctly


Email 202: QAPop Quiz Answers

1. Name two ways to use video intelligently in email:

(a) Static Image

(b) Animated gif.

(c) Embedded video

2. What are two good usages of animation in email?

(a) To get attention

(b) To highlight features

3. List two email dialogue-drivers:

(a) Social media

(b) Surveys and polls

(c) Request for feedback

(d) Press coverage

(e) Customer reviews

(f) Contests

Put the Learnings to WorkCase Studies

Love note

“I love Smith-Harmon's enthusiasm. It’s so great to have a connection with people who really ‘get’ and get excited by email marketing. (Truly, there are not that many of us out there!) I count myself very lucky to have found such accomplished enthusiasts to collaborate with on the REI program. They are helping to bring amazing opportunities to fruition with panache.”

- Email Marketing Director, REI

REI partnered with us test the effects of a creative makeover on a single email campaign. The results were so astounding, we’ve been working together ever since!


Case StudyMakeover: Project Summary


Case StudyMakeover: Challenge, Solution and Results

Challenge:• Prove to REI marketing VPs that the

right email creative can impact ROI

Solution:• Perform an A/B split test with

legacy vs. optimized email template

Result:• New template generated a significant

22% increase in unique click-through

• New template generated an astounding 90% increase in traffic to shoes specialty shop

• REI Email Marketing Manager received the support of VPs to move forward with an entire suite of redesigned, maximized email creative templates in time for the critical Q4 period

EECPerformance

AwardFinalist

Case StudyTemplates: Project Summary

Love note “As the leader of Alaska Airlines CRM and Online Marketing efforts, I hired Smith-Harmon to lead Alaska through a massive transformation of all of our email communications to customers. They did an excellent job of listening to all of the company stakeholders, taking in their requirements, reviewing our current programs - both from a brand, process, and customer point of view, all the while helping us to understand best in class principles of email communication and design. In return, my team has received very high quality work, delivered to us very quickly at a reasonable cost. Smith-Harmon is extremely easy to work with and is considered a valued partner. I highly recommend Smith-Harmon to any and all companies (except my competition!) for their superb work.”

- Director of CRM, Alaska Airlines

Alaska Airlines teamed up with us to build an effective, on-brand library of flexible email creative templates to support complex marketing and triggered email programs.



Challenge:• Increase revenue and interaction

• Improve reader experience

Solution:• Optimize over 20 email templates

through application of creative best practices

• Perform an A/B split test with new versus old email templates

Result:• The new template for the newsletter – Alaska’s

highest-grossing email vehicle – inspired an amazing 41% lift in revenue, increasing revenue-per-mail rate from $0.57 to $0.80

• The new newsletter design achieved greater reader interaction, generating a 13% lift in click-through rate

FreddieAwardWinner

Case StudyTemplates: Challenge, Solution and Results


Smith-Harmon worked with Salesforce.com to overhaul their software business customer and prospect email messaging. The project corresponded with a Salesforce website redesign, so Smith-Harmon built the program to incorporate new branding elements while seeking to improve performance.

Challenge:•Improve performance with optimized creative

•Streamline complex content

•Leverage ESP dynamic content capabilities

Solution:•Optimize creative for experience and performance

•Test original vs. new creative for 1 month

Case StudyTemplates: Project Summary, Challenge and Solution

A/B TestWinner

Case StudyTemplates: Results

Gains in CTR

9 Key Plays: +1.18%Clicks on Original: 2936Clicks on Redesign: 4055

Forrester: +.42%Clicks on Original: 391Clicks on Redesign: 459

Dummies: +.78%Clicks on Original: 608Clicks on Redesign: 707

The redesigned templates outperformed the legacy templates with staggering results.The performance of three redesigned emails demonstrates the improvements.

9 Key Plays:Forrester:Dummies:

Case StudyProduction: Project Summary


Love note

"I have been working with Smith-Harmon for more than four years and wouldn't know what to do without them! They get the brand, know our schedule, and always provide comprehensive, accurate and beautiful solutions to our needs. Truly team players and a dream to work with, they have a positive attitude and dedication to work that is rarely seen in any industry."

- Creative Manager, Williams-Sonoma, Inc.

We provide campaign management, design, copywriting, coding and QA testing creative production services to produce thousands of effective emails for Williams-Sonoma brands with ease and efficiency.


Case StudyProduction: Challenge, Solution and Results

• Challenge: Produce effective email creative with the greatest ease and efficiency

• Solution: Shift time-consuming everyday production and management tasks to a capable,self-sufficient team, thereby freeing up internal staff members to focus on achieving importantbusiness goals

• Results: Combined with constant testing, we continuously innovate and improve WS brands’ email program performance with expert industry knowledge and know-how

WSTeam

MessagingGoals

S-H AccountManager

CollaborativeProcess

CodedFiles

Q/ATesting

A/BTesting

PerformanceMetrics

Designer Copywriter Coder Tester

Put the Learnings to WorkGroup Critique

Group Critique: Retail PromotionFrom: CoachSubject Line: Hamptons Collection: Online Now, In Stores Friday

• What challenges and opportunities does this mail present?

– – – –

• What was done well?– – – –

• What could be improved?– – – –

• What testing opportunities do you see?– – – –

http://ebm.cheetahmail.com/c/tag/hBIh1NfAST2LyB7SFrKAZJZqm26/[email protected]&RAF_TRACK=&i_storetag=&STORENUM=&linkcode=HOST

Group Critique: Retail PromotionFrom: Sephora Beauty InsiderSubject Line: PERK ALERT! Stila's New Palette. Beauty Insiders Only.


– – – –




http://shop.sephora.com/m/p/sph/prw/preview.asp?cm_mmc=email+ret-_-news1+20080816+pers-_-bi-_-landing&cid=14183776122&mid=1106669974&pid=359034&dicid=359034:14183776122:4798698

Group Critique: B2B Promotion From: MediaPost Live!Subject Line: 2 Great Shows, 1 Great Price - Register Now


– – – –




Group Critique: B2C NewsletterFrom: Betty CrockerSubject Line: Caramel-Drizzled Brownie Hearts for Valentine's Day


– – – –




http://recp.mkt32.net/servlet/MailView?m=838155&r=MjI3NzQ5NzU3NwS2&j=NDY0NDkxODMgS0&mt=1

Group Critique: B2B Newsletter From: WhatCounts e-CommunicatorSubject Line: Optimize Feedback Loops and Transactional Messages


– – – –




http://whatcounts.com/dm?id=698E181FCB9600F409BE2C7683015315D8EF5E6672C50D2F

Group Critique: Transactional From: Tommy Bahama


– – – –




http://smith-harmon.com/PREVIEW/TOMMYBAHAMA/images/screenshots/0822_OrderConfirm_1.jpg

Group Critique: Transactional From: Williams-Sonoma


– – – –




http://smith-harmon.com/PREVIEW/WS/0128_WS_OrderConf_2.jpg

Group Critique: Browser BehaviorFrom: Amazon.com


– – – –




Group Critique: Cart AbandonFrom: Threadless


– – – –




Group Critique: Welcome MessageFrom: Amazon.comSubject Line: Welcome to Amazon Prime


– – – –




http://smith-harmon.com/images/edm/screenshots/20080708_Amazon_Prime.jpg

Group Critique: Welcome MessageFrom: EleVAteSubject Line: Welcome to EleVAte


– – – –




http://smith-harmon.com/images/edm/screenshots/0731_VA_Welcome.jpg

Group Critique: Birthday MessageFrom: Tully's Email ClubSubject Line: Happy Birthday from Tully's


– – – –




http://smith-harmon.com/images/edm/screenshots/20080714_Tullys_BDay.jpg

ResourcesChecklists

Don't assume your message is compelling! Ask yourself: • What is this about? • Why should my subscribers care? • What do they do about it?

Consider the above-the-fold mark and the preview pane Include a good balance of images and text Provide clear primary and alternate calls-to-action Throw in a few bells and whistles Personalize Leverage dynamic content Feature user-generated content

Resources: Creative ChecklistRun through this list before you hit “send”


Resources: Code & QA ChecklistRun through this list before you hit “send”


Pre-Check HTML File Pre-Check Text File

(1) Confirm Coded HTML file matches approved final creative proofi.Check text for inconsistenciesii.Check graphics for inconsistenciesiii.Make sure all submessages are included in coded file

(2) Spell-check(3) Check every linki.Confirm links match products/landing pages on siteii.Confirm prices in coded file match prices on site (if applicable)(4) Validate HTML using an HTML validation tool(5) View local HTML file on PC (IE and Firefox) and Mac (Safari and Firefox)(6) Using Internet Explorer, check rollover ALT text•Make sure important images have ALT text associated with them•Make sure copy in ALT text matches imagery•Make sure price in ALT text matches pricing in product imagery•Confirm capitalization/punctuation in ALT text works well within context(7) Make sure there are no empty link tags: search for href="" and href="#"(8) Confirm image path has been properly updated: Using search function, search for images/(9) Check header and footer legal verbiage for any inconsistencies or mistakes(10) Is the TITLE tag correct? Make sure it works with the context of the current message.

(1) Compare text file against HTML file to ensure all primary and submessages have been included in text file

(2) Spell-check(3) Review all linksi. Confirm links match placementii. Make sure all links are included in the text file(4) Make sure all lines break before 65 characters (except for links which

may be longer depending on tracking information)(5) Make sure all blank lines have two spaces(6) Check for special characters that may not render correctly in plain text

format: em and en dashes, smart quotes from Microsoft Word, etc.(7) Check header and footer legal verbiage for any inconsistencies or

mistakes

Conduct Render Testing

(1) Send the message to your email Q/A test list(2) Check for rendering errors

i.Check all web-based email clients using Internet Explorer 6 & 7 and Firefoxii.Check web-based email clients on a Mac using Firefox and Safariiii.Check the message in Outlook 2007

(3) Correct any rendering issues and resend tests as needed

ResourcesGroups, Books & Blogs

• Groups• The Email Roundtable: www.emailroundtable.org• The Email Experience Council: www.emailexperience.org

• Books• Send, by David Shipley and Will Schwalbe• The Truth About Email Marketing, by Simms Jenkins • Email Marketing by the Numbers, by Chris Baggot

• Blogs• MediaPost's Email Insider: www.mediapost.com/blogs/email_insider• The EEC Blog: blog.emailexperience.org• The Retail Email Blog: www.retailemailblog.com• No man is an iland: www.email-marketing-reports.com/iland• S-H Email Creative Review: edm.smith-harmon.com

Resources: Check These Out!Groups, books and blogs


Thank you for your time!It’s been our pleasure.

Contact us at 206.774.0199 or [email protected] us online at www.smith-harmon.com

design and build html email

Technology