WebSG July 2011 Sean Thambiah seantsg

WebSG July 2011 Sean Thambiah seantsg

Sean Thambiah Connoisseur of Fine HTML Emails

currently Project Executive at Qais Consulting

interested in Content Strategy Information Architecture User

Experience Typography HTML amp CSS whatever makes the web

beautiful

curates httphtmlemailnuthousetumblrcom SHAMELESS PLUG

Doctype

Webshite 1 - April

Webshite 2 - June

HTML Email Boilerplate

Best Practices amp Tips

Pushing the boundaries

Resources

Andy Clarke malarkey

Webshite 2 - June

HTML Email Boilerplate

Best Practices amp Tips

Pushing the boundaries

Resources

Andy Clarke malarkey

HTML Email Boilerplate

Best Practices amp Tips

Pushing the boundaries

Resources

Andy Clarke malarkey

Andy Clarke malarkey

Jeremy Keith adactio

Jeremy Keith adactio

HTML5 Boilerplate httphtml5boilerplatecom

HTML Email Boilerplatehttphtmlemailboilerplatecom

Doctype

Mailchimp CSS Reset

Yahoo Fixes

Paragraph Fix

Link Color Fix

Shortcut Fix

Hotmail Header Resets

GmailHotmail Image Gap Fix

Tables tables tables tables tables tables tables and tables

Support

Some clients strip out doctypes

Some replace doctypes

Some leave them be

Impact

Padding Box Model issues on IE

Extracted from the Mailchimp Blueprint templates

Resets formatting issues with several clients including some smart

phones (webkit basedwindows mobile)

Email BlueprintshttpsgithubcommailchimpEmail-Blueprints

Paragraphs

p

margin 1em 0

h1 h2 h3 h4 h5 h6

color black important

line-height 100 important

h1 a h2 a h3 a h4 a h5 a h6 a

color blue important

h1 aactive h2 aactive h3 aactive h4 aactive h5 aactive h6 aactive

color red important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

h1 avisited h2 avisited h3 avisited h4 avisited h5 avisited h6 avisited

color purple important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

ltimg src=imagejpg style=display block gt

Use a background table and cellpaddingcellspacing in place of margins

Design like itrsquos 2011 Code like itrsquos 1999

Use tables for layout forget CSS positioning

Donrsquot just rely on padding margins Take advantage of cellpadding and cellspacing

Include extra whitespace in images to serve as padding

Typography Tips Try using other web-safe fonts like Century Gothic

Donrsquot forget fallback fonts

Play around with letter-spacing

Use lsquoArial Unicode MSrsquo for foreign language support

Follow the best practices

Push the boundaries

Design for mobile

CSS3

HorizontalVertical Scrolling Emails

Deal with Image Blocking

Dust off the animated gifs

Bring sharing to email

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

HTML Email Boilerplatehttphtmlemailboilerplatecom

Doctype

Mailchimp CSS Reset

Yahoo Fixes

Paragraph Fix

Link Color Fix

Shortcut Fix

Hotmail Header Resets

GmailHotmail Image Gap Fix

Tables tables tables tables tables tables tables and tables

Support

Some clients strip out doctypes

Some replace doctypes

Some leave them be

Impact

Padding Box Model issues on IE

Extracted from the Mailchimp Blueprint templates

Resets formatting issues with several clients including some smart

phones (webkit basedwindows mobile)

Email BlueprintshttpsgithubcommailchimpEmail-Blueprints

Paragraphs

p

margin 1em 0

h1 h2 h3 h4 h5 h6

color black important

line-height 100 important

h1 a h2 a h3 a h4 a h5 a h6 a

color blue important

h1 aactive h2 aactive h3 aactive h4 aactive h5 aactive h6 aactive

color red important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

h1 avisited h2 avisited h3 avisited h4 avisited h5 avisited h6 avisited

color purple important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

ltimg src=imagejpg style=display block gt

Use a background table and cellpaddingcellspacing in place of margins

Design like itrsquos 2011 Code like itrsquos 1999

Use tables for layout forget CSS positioning

Donrsquot just rely on padding margins Take advantage of cellpadding and cellspacing

Include extra whitespace in images to serve as padding

Typography Tips Try using other web-safe fonts like Century Gothic

Donrsquot forget fallback fonts

Play around with letter-spacing

Use lsquoArial Unicode MSrsquo for foreign language support

Follow the best practices

Push the boundaries

Design for mobile

CSS3

HorizontalVertical Scrolling Emails

Deal with Image Blocking

Dust off the animated gifs

Bring sharing to email

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

Doctype

Mailchimp CSS Reset

Yahoo Fixes

Paragraph Fix

Link Color Fix

Shortcut Fix

Hotmail Header Resets

GmailHotmail Image Gap Fix

Tables tables tables tables tables tables tables and tables

Support

Some clients strip out doctypes

Some replace doctypes

Some leave them be

Impact

Padding Box Model issues on IE

Extracted from the Mailchimp Blueprint templates

Resets formatting issues with several clients including some smart

phones (webkit basedwindows mobile)

Email BlueprintshttpsgithubcommailchimpEmail-Blueprints

Paragraphs

p

margin 1em 0

h1 h2 h3 h4 h5 h6

color black important

line-height 100 important

h1 a h2 a h3 a h4 a h5 a h6 a

color blue important

h1 aactive h2 aactive h3 aactive h4 aactive h5 aactive h6 aactive

color red important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

h1 avisited h2 avisited h3 avisited h4 avisited h5 avisited h6 avisited

color purple important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

ltimg src=imagejpg style=display block gt

Use a background table and cellpaddingcellspacing in place of margins

Design like itrsquos 2011 Code like itrsquos 1999

Use tables for layout forget CSS positioning

Donrsquot just rely on padding margins Take advantage of cellpadding and cellspacing

Include extra whitespace in images to serve as padding

Typography Tips Try using other web-safe fonts like Century Gothic

Donrsquot forget fallback fonts

Play around with letter-spacing

Use lsquoArial Unicode MSrsquo for foreign language support

Follow the best practices

Push the boundaries

Design for mobile

CSS3

HorizontalVertical Scrolling Emails

Deal with Image Blocking

Dust off the animated gifs

Bring sharing to email

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

Support

Some clients strip out doctypes

Some replace doctypes

Some leave them be

Impact

Padding Box Model issues on IE

Extracted from the Mailchimp Blueprint templates

Resets formatting issues with several clients including some smart

phones (webkit basedwindows mobile)

Email BlueprintshttpsgithubcommailchimpEmail-Blueprints

Paragraphs

p

margin 1em 0

h1 h2 h3 h4 h5 h6

color black important

line-height 100 important

h1 a h2 a h3 a h4 a h5 a h6 a

color blue important

h1 aactive h2 aactive h3 aactive h4 aactive h5 aactive h6 aactive

color red important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

h1 avisited h2 avisited h3 avisited h4 avisited h5 avisited h6 avisited

color purple important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

ltimg src=imagejpg style=display block gt

Use a background table and cellpaddingcellspacing in place of margins

Design like itrsquos 2011 Code like itrsquos 1999

Use tables for layout forget CSS positioning

Donrsquot just rely on padding margins Take advantage of cellpadding and cellspacing

Include extra whitespace in images to serve as padding

Typography Tips Try using other web-safe fonts like Century Gothic

Donrsquot forget fallback fonts

Play around with letter-spacing

Use lsquoArial Unicode MSrsquo for foreign language support

Follow the best practices

Push the boundaries

Design for mobile

CSS3

HorizontalVertical Scrolling Emails

Deal with Image Blocking

Dust off the animated gifs

Bring sharing to email

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

Extracted from the Mailchimp Blueprint templates

Resets formatting issues with several clients including some smart

phones (webkit basedwindows mobile)

Email BlueprintshttpsgithubcommailchimpEmail-Blueprints

Paragraphs

p

margin 1em 0

h1 h2 h3 h4 h5 h6

color black important

line-height 100 important

h1 a h2 a h3 a h4 a h5 a h6 a

color blue important

h1 aactive h2 aactive h3 aactive h4 aactive h5 aactive h6 aactive

color red important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

h1 avisited h2 avisited h3 avisited h4 avisited h5 avisited h6 avisited

color purple important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

ltimg src=imagejpg style=display block gt

Use a background table and cellpaddingcellspacing in place of margins

Design like itrsquos 2011 Code like itrsquos 1999

Use tables for layout forget CSS positioning

Donrsquot just rely on padding margins Take advantage of cellpadding and cellspacing

Include extra whitespace in images to serve as padding

Typography Tips Try using other web-safe fonts like Century Gothic

Donrsquot forget fallback fonts

Play around with letter-spacing

Use lsquoArial Unicode MSrsquo for foreign language support

Follow the best practices

Push the boundaries

Design for mobile

CSS3

HorizontalVertical Scrolling Emails

Deal with Image Blocking

Dust off the animated gifs

Bring sharing to email

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

Email BlueprintshttpsgithubcommailchimpEmail-Blueprints

Paragraphs

p

margin 1em 0

h1 h2 h3 h4 h5 h6

color black important

line-height 100 important

h1 a h2 a h3 a h4 a h5 a h6 a

color blue important

h1 aactive h2 aactive h3 aactive h4 aactive h5 aactive h6 aactive

color red important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

h1 avisited h2 avisited h3 avisited h4 avisited h5 avisited h6 avisited

color purple important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

ltimg src=imagejpg style=display block gt

Use a background table and cellpaddingcellspacing in place of margins

Design like itrsquos 2011 Code like itrsquos 1999

Use tables for layout forget CSS positioning

Donrsquot just rely on padding margins Take advantage of cellpadding and cellspacing

Include extra whitespace in images to serve as padding

Typography Tips Try using other web-safe fonts like Century Gothic

Donrsquot forget fallback fonts

Play around with letter-spacing

Use lsquoArial Unicode MSrsquo for foreign language support

Follow the best practices

Push the boundaries

Design for mobile

CSS3

HorizontalVertical Scrolling Emails

Deal with Image Blocking

Dust off the animated gifs

Bring sharing to email

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

Paragraphs

p

margin 1em 0

h1 h2 h3 h4 h5 h6

color black important

line-height 100 important

h1 a h2 a h3 a h4 a h5 a h6 a

color blue important

h1 aactive h2 aactive h3 aactive h4 aactive h5 aactive h6 aactive

color red important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

h1 avisited h2 avisited h3 avisited h4 avisited h5 avisited h6 avisited

color purple important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

ltimg src=imagejpg style=display block gt

Use a background table and cellpaddingcellspacing in place of margins

Design like itrsquos 2011 Code like itrsquos 1999

Use tables for layout forget CSS positioning

Donrsquot just rely on padding margins Take advantage of cellpadding and cellspacing

Include extra whitespace in images to serve as padding

Typography Tips Try using other web-safe fonts like Century Gothic

Donrsquot forget fallback fonts

Play around with letter-spacing

Use lsquoArial Unicode MSrsquo for foreign language support

Follow the best practices

Push the boundaries

Design for mobile

CSS3

HorizontalVertical Scrolling Emails

Deal with Image Blocking

Dust off the animated gifs

Bring sharing to email

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

h1 h2 h3 h4 h5 h6

color black important

line-height 100 important

h1 a h2 a h3 a h4 a h5 a h6 a

color blue important

h1 aactive h2 aactive h3 aactive h4 aactive h5 aactive h6 aactive

color red important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

h1 avisited h2 avisited h3 avisited h4 avisited h5 avisited h6 avisited

color purple important Preferably not the same color as the normal header link color There is

limited support for psuedo classes in email clients this was added just for good measure

ltimg src=imagejpg style=display block gt

Use a background table and cellpaddingcellspacing in place of margins

Design like itrsquos 2011 Code like itrsquos 1999

Use tables for layout forget CSS positioning

Donrsquot just rely on padding margins Take advantage of cellpadding and cellspacing

Include extra whitespace in images to serve as padding

Typography Tips Try using other web-safe fonts like Century Gothic

Donrsquot forget fallback fonts

Play around with letter-spacing

Use lsquoArial Unicode MSrsquo for foreign language support

Follow the best practices

Push the boundaries

Design for mobile

CSS3

HorizontalVertical Scrolling Emails

Deal with Image Blocking

Dust off the animated gifs

Bring sharing to email

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

ltimg src=imagejpg style=display block gt

Use a background table and cellpaddingcellspacing in place of margins

Design like itrsquos 2011 Code like itrsquos 1999

Use tables for layout forget CSS positioning

Donrsquot just rely on padding margins Take advantage of cellpadding and cellspacing

Include extra whitespace in images to serve as padding

Typography Tips Try using other web-safe fonts like Century Gothic

Donrsquot forget fallback fonts

Play around with letter-spacing

Use lsquoArial Unicode MSrsquo for foreign language support

Follow the best practices

Push the boundaries

Design for mobile

CSS3

HorizontalVertical Scrolling Emails

Deal with Image Blocking

Dust off the animated gifs

Bring sharing to email

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

Use a background table and cellpaddingcellspacing in place of margins

Design like itrsquos 2011 Code like itrsquos 1999

Use tables for layout forget CSS positioning

Donrsquot just rely on padding margins Take advantage of cellpadding and cellspacing

Include extra whitespace in images to serve as padding

Typography Tips Try using other web-safe fonts like Century Gothic

Donrsquot forget fallback fonts

Play around with letter-spacing

Use lsquoArial Unicode MSrsquo for foreign language support

Follow the best practices

Push the boundaries

Design for mobile

CSS3

HorizontalVertical Scrolling Emails

Deal with Image Blocking

Dust off the animated gifs

Bring sharing to email

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

Design like itrsquos 2011 Code like itrsquos 1999

Use tables for layout forget CSS positioning

Donrsquot just rely on padding margins Take advantage of cellpadding and cellspacing

Include extra whitespace in images to serve as padding

Typography Tips Try using other web-safe fonts like Century Gothic

Donrsquot forget fallback fonts

Play around with letter-spacing

Use lsquoArial Unicode MSrsquo for foreign language support

Follow the best practices

Push the boundaries

Design for mobile

CSS3

HorizontalVertical Scrolling Emails

Deal with Image Blocking

Dust off the animated gifs

Bring sharing to email

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

Follow the best practices

Push the boundaries

Design for mobile

CSS3

HorizontalVertical Scrolling Emails

Deal with Image Blocking

Dust off the animated gifs

Bring sharing to email

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

Design for mobile screens and preview panes

If yoursquore selling something squeeze important content in the top left Logo

Products Services

Offer Promotion

Go BIG with font-size

Go micro with copy

Tip W3C advises to keep mobile emails under 20K (HTML + Images)

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

Thatrsquos what a 320x240 device sees

Text shadow

Border Radius

Animation

Text shadow

Border Radius

Animation

Blame it on porn spam

all your pretty images and graphics are blocked by default by most email clients

Best solution Get on the trusted sender list

Email sent by you will show images automatically

Get users to add you to their address books in your welcome email

Itrsquos a good idea to make use of borders and backgrounds

Make ALT text useful Descriptive is not enough

Instead of alt=ldquolife size portrait made of steelrdquogo with alt=ldquo[image] life size portrait made of steelrdquo

sbquo[imagephoto] hellip‛ lets readers know there are images so theyrsquoll want to see them

Go a step further ndash style alt text and define buttons

ldquonewsletter header + titlerdquo Try ldquoEnvato mailrdquo and style it

Not useful

ldquoDividerrdquo is subjective a centered ldquo---rdquo would be good too

A better alt=ldquo[image] The Complete Handbook by Envato CEOrdquo

alt=ldquoimagerdquo

Convert important images to HTML

Use STYLECampaignrsquos converter Get it free when you sign up for their newsletter (you wonrsquot regret it)

Great for pixel art or solid color graphics with little or no details

HTML output is too heavy for graphics with gradients

Itrsquos a good idea to make use of borders and backgrounds

Make ALT text useful Descriptive is not enough

Instead of alt=ldquolife size portrait made of steelrdquogo with alt=ldquo[image] life size portrait made of steelrdquo

sbquo[imagephoto] hellip‛ lets readers know there are images so theyrsquoll want to see them

Go a step further ndash style alt text and define buttons

ldquonewsletter header + titlerdquo Try ldquoEnvato mailrdquo and style it

Not useful

ldquoDividerrdquo is subjective a centered ldquo---rdquo would be good too

A better alt=ldquo[image] The Complete Handbook by Envato CEOrdquo

alt=ldquoimagerdquo

Convert important images to HTML

Use STYLECampaignrsquos converter Get it free when you sign up for their newsletter (you wonrsquot regret it)

Great for pixel art or solid color graphics with little or no details

HTML output is too heavy for graphics with gradients

Make ALT text useful Descriptive is not enough

Instead of alt=ldquolife size portrait made of steelrdquogo with alt=ldquo[image] life size portrait made of steelrdquo

sbquo[imagephoto] hellip‛ lets readers know there are images so theyrsquoll want to see them

Go a step further ndash style alt text and define buttons

ldquonewsletter header + titlerdquo Try ldquoEnvato mailrdquo and style it

Not useful

ldquoDividerrdquo is subjective a centered ldquo---rdquo would be good too

A better alt=ldquo[image] The Complete Handbook by Envato CEOrdquo

alt=ldquoimagerdquo

Convert important images to HTML

Use STYLECampaignrsquos converter Get it free when you sign up for their newsletter (you wonrsquot regret it)

Great for pixel art or solid color graphics with little or no details

HTML output is too heavy for graphics with gradients

ldquonewsletter header + titlerdquo Try ldquoEnvato mailrdquo and style it

Not useful

ldquoDividerrdquo is subjective a centered ldquo---rdquo would be good too

A better alt=ldquo[image] The Complete Handbook by Envato CEOrdquo

alt=ldquoimagerdquo

Convert important images to HTML

Use STYLECampaignrsquos converter Get it free when you sign up for their newsletter (you wonrsquot regret it)

Great for pixel art or solid color graphics with little or no details

HTML output is too heavy for graphics with gradients

A better alt=ldquo[image] The Complete Handbook by Envato CEOrdquo

alt=ldquoimagerdquo

Convert important images to HTML

Use STYLECampaignrsquos converter Get it free when you sign up for their newsletter (you wonrsquot regret it)

Great for pixel art or solid color graphics with little or no details

HTML output is too heavy for graphics with gradients

Convert important images to HTML

Use STYLECampaignrsquos converter Get it free when you sign up for their newsletter (you wonrsquot regret it)

Great for pixel art or solid color graphics with little or no details

HTML output is too heavy for graphics with gradients

Look ma No images

Theyrsquore back ndash and not just for eye-piercing-blinking

Higher engagement

Increased sales

Use them for Call to Actions to nudge users on

JCrew Newsletterhttpwwwstylecampaigncomblogblogmailsscrollscrollhtm

Toy Story 3 NewsletterhttpwwwstylecampaigncomTS3

Caveats

Outlook 20072010 block animated gifs ndash showing only the first frame

Workaround Put important information on the firstlast frame

Poor mobile support

iPhonersquos render them Webkit based phones to follow (Android Blackberry OS 6)

Image size

Although some industry leaders report campaigns that worked well with

animations that pushed 700kb

facebook Like Send and Comments

Tweet Retweet

Share on Linked In

Share anywhere

All without JS in email SEEMINGLY

Saks Newsletterhttpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Saks Newsletter (Web Version)httpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Tweet URL

httptwittercomshareurl=URLamptext=POST

Twitter Share URL APIhttpdevtwittercompagestweet_button

Theyrsquore back ndash and not just for eye-piercing-blinking

Higher engagement

Increased sales

Use them for Call to Actions to nudge users on

JCrew Newsletterhttpwwwstylecampaigncomblogblogmailsscrollscrollhtm

Toy Story 3 NewsletterhttpwwwstylecampaigncomTS3

Caveats

Outlook 20072010 block animated gifs ndash showing only the first frame

Workaround Put important information on the firstlast frame

Poor mobile support

iPhonersquos render them Webkit based phones to follow (Android Blackberry OS 6)

Image size

Although some industry leaders report campaigns that worked well with

animations that pushed 700kb

facebook Like Send and Comments

Tweet Retweet

Share on Linked In

Share anywhere

All without JS in email SEEMINGLY

Saks Newsletterhttpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Saks Newsletter (Web Version)httpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Tweet URL

httptwittercomshareurl=URLamptext=POST

Twitter Share URL APIhttpdevtwittercompagestweet_button

JCrew Newsletterhttpwwwstylecampaigncomblogblogmailsscrollscrollhtm

Toy Story 3 NewsletterhttpwwwstylecampaigncomTS3

Caveats

Outlook 20072010 block animated gifs ndash showing only the first frame

Workaround Put important information on the firstlast frame

Poor mobile support

iPhonersquos render them Webkit based phones to follow (Android Blackberry OS 6)

Image size

Although some industry leaders report campaigns that worked well with

animations that pushed 700kb

facebook Like Send and Comments

Tweet Retweet

Share on Linked In

Share anywhere

All without JS in email SEEMINGLY

Saks Newsletterhttpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Saks Newsletter (Web Version)httpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Tweet URL

httptwittercomshareurl=URLamptext=POST

Twitter Share URL APIhttpdevtwittercompagestweet_button

Toy Story 3 NewsletterhttpwwwstylecampaigncomTS3

Caveats

Outlook 20072010 block animated gifs ndash showing only the first frame

Workaround Put important information on the firstlast frame

Poor mobile support

iPhonersquos render them Webkit based phones to follow (Android Blackberry OS 6)

Image size

Although some industry leaders report campaigns that worked well with

animations that pushed 700kb

facebook Like Send and Comments

Tweet Retweet

Share on Linked In

Share anywhere

All without JS in email SEEMINGLY

Saks Newsletterhttpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Saks Newsletter (Web Version)httpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Tweet URL

httptwittercomshareurl=URLamptext=POST

Twitter Share URL APIhttpdevtwittercompagestweet_button

Caveats

Outlook 20072010 block animated gifs ndash showing only the first frame

Workaround Put important information on the firstlast frame

Poor mobile support

iPhonersquos render them Webkit based phones to follow (Android Blackberry OS 6)

Image size

Although some industry leaders report campaigns that worked well with

animations that pushed 700kb

facebook Like Send and Comments

Tweet Retweet

Share on Linked In

Share anywhere

All without JS in email SEEMINGLY

Saks Newsletterhttpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Saks Newsletter (Web Version)httpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Tweet URL

httptwittercomshareurl=URLamptext=POST

Twitter Share URL APIhttpdevtwittercompagestweet_button

facebook Like Send and Comments

Tweet Retweet

Share on Linked In

Share anywhere

All without JS in email SEEMINGLY

Saks Newsletterhttpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Saks Newsletter (Web Version)httpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Tweet URL

httptwittercomshareurl=URLamptext=POST

Twitter Share URL APIhttpdevtwittercompagestweet_button

Saks Newsletterhttpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Saks Newsletter (Web Version)httpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Tweet URL

httptwittercomshareurl=URLamptext=POST

Twitter Share URL APIhttpdevtwittercompagestweet_button

Saks Newsletter (Web Version)httpwwwstylecampaigncomblogblogmailsscrollscroll4htm

Tweet URL

httptwittercomshareurl=URLamptext=POST

Twitter Share URL APIhttpdevtwittercompagestweet_button

Tweet URL

httptwittercomshareurl=URLamptext=POST

Twitter Share URL APIhttpdevtwittercompagestweet_button

LinkedIn Share URL

httpwwwlinkedincomshareArticlemini=trueampurl=articleUrlamptitle=ar

ticleTitleampsummary=articleSummaryampsource=articleSource

LinkedIn Share URL APIhttpdeveloperlinkedincomdocsDOC-1075

Tweetmemehttphelptweetmemecom20090715email-buttons

Get background images working in your HTML Emails

Even in individual table cells

Target Outlook 2007 (I can see the IE6 fixing shudders)

If yoursquove tested with ltulgt or ltolgt you know how frustrating this can belt--[if gte mso 9]gt This CSS will only be seen in Outlook 2007lt[endif]--gt

Get CSS inline when yoursquore ready to send with Pre-Mailer

Check out Mailchimprsquos ebooks

Get background images working in your HTML Emails

Even in individual table cells

Target Outlook 2007 (I can see the IE6 fixing shudders)

If yoursquove tested with ltulgt or ltolgt you know how frustrating this can belt--[if gte mso 9]gt This CSS will only be seen in Outlook 2007lt[endif]--gt

Get CSS inline when yoursquore ready to send with Pre-Mailer

Check out Mailchimprsquos ebooks

Premailerhttppremailerdialectca

MailChimphttpmailchimpcomresources

Know your CSS

CSS for HTML Emails

Read

Campaign Monitor Blog

Campaign Monitor Tips amp Resources

MailChimp Blog

MailChimp Resources (check out their PDFs too)

STYLECampaign Blog

Smith-Harmon

Email Design Review

MailChimphttpmailchimpcomresources

Know your CSS

CSS for HTML Emails

Read

Campaign Monitor Blog

Campaign Monitor Tips amp Resources

MailChimp Blog

MailChimp Resources (check out their PDFs too)

STYLECampaign Blog

Smith-Harmon

Email Design Review

Know your CSS

CSS for HTML Emails

Read

Campaign Monitor Blog

Campaign Monitor Tips amp Resources

MailChimp Blog

MailChimp Resources (check out their PDFs too)

STYLECampaign Blog

Smith-Harmon

Email Design Review

Analyze Designer Templates

Campaign Monitor

45royale Elliot Jay Stocks Meagan Fisher MetaLab Mike Kus Newism Simon

Collison amp Veerle Pieters

MailChimp

Dan Rubin Elliot Jay Stocks Jon Hicks Khoi Vinh Matthew Smith Metalab Mike

Kus amp Veerle Pieters

Be Inspired

Beautiful Email Newsletters

Campaign Monitor Gallery

HTML Email Gallery

WebSG July 2011 Sean Thambiah seantsg