websg - html email newsletters
Post on 16-May-2015
2.012 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Doctype
Webshite 1 - April
Webshite 2 - June
HTML Email Boilerplate
Best Practices amp Tips
Pushing the boundaries
Resources
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
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
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
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
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
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
Webshite 2 - June
HTML Email Boilerplate
Best Practices amp Tips
Pushing the boundaries
Resources
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
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
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
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
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
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
HTML Email Boilerplate
Best Practices amp Tips
Pushing the boundaries
Resources
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Thatrsquos what a 320x240 device sees
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Saks Newsletterhttpwwwstylecampaigncomblogblogmailsscrollscroll4htm
Saks Newsletter (Web Version)httpwwwstylecampaigncomblogblogmailsscrollscroll4htm
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
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
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
Saks Newsletter (Web Version)httpwwwstylecampaigncomblogblogmailsscrollscroll4htm
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
WebSG July 2011 Sean Thambiah seantsg
top related