Building the Impossible                            Emails for allWednesday, 30 November 11
Wednesday, 30 November 11
Wednesday, 30 November 11
@mattbeeWednesday, 30 November 11
Wednesday, 30 November 11We all have our problems, but mine was having the immense pleasure to come from a little computer...
Wednesday, 30 November 11So everyone here will have suffered at the hands of IE and other browsers I assume, or ifknow I w...
Wednesday, 30 November 11While there are lots of browsers, there are even more email clients. And then add in OS anddevice...
Wednesday, 30 November 11And don’t forget these...And I’m told by a reliable source that there are literally 10 billion mo...
Impossible TaskWednesday, 30 November 11
Wednesday, 30 November 11Where do you start - well code like it is 1999.Tables, background attribute, bgcolor, font tags, ...
Wednesday, 30 November 11Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t wor...
Background ImageWednesday, 30 November 11Background images - just don’t display - VML option in Microsoft Outlook, but it ...
Background Image                                                                                                   ImagesW...
Background Image                                                                                                   Images ...
Background Image                                                                                                   Images ...
Background Image                                                                                                   Images ...
Background Image                                                                                                   Images ...
Background Image                                                                                                   Images ...
Background Image                                                                                                   Images ...
Wednesday, 30 November 11Epic Fail:Approximately115 CSS properties in 2.1 specEmail clients support 47 of thosehttp://www....
Wednesday, 30 November 11 •     Back up colours or no background images •     If you have to, then use VML for Outlook - p...
Wednesday, 30 November 11Limitations •     Preview pane •     Client vs Webmail •     Dated machines •     Image blocking ...
Wednesday, 30 November 11Limitations •     Preview pane •     Client vs Webmail •     Dated machines •     Image blocking ...
Wednesday, 30 November 11Limitations •     Preview pane •     Client vs Webmail •     Dated machines •     Image blocking ...
Wednesday, 30 November 11Limitations •     Preview pane •     Client vs Webmail •     Dated machines •     Image blocking ...
Wednesday, 30 November 11Limitations •     Preview pane •     Client vs Webmail •     Dated machines •     Image blocking ...
Wednesday, 30 November 11Limitations •     Preview pane •     Client vs Webmail •     Dated machines •     Image blocking ...
Wednesday, 30 November 11VideoFlashJavaScriptAudioWaynes World “No Way”
Wednesday, 30 November 11Research - don’t waste money - 7 Lotus notes users, 7 people signing off email at Virgin of 500k ...
Wednesday, 30 November 11Provide fall backs to flat colours - use all background images in areas where looks rubbish with p...
euismod tellus sit amet porta. Suspendisse non dolor nec elit dapibus faucibus. Quisque utquam a eros consequat elementum ...
Wednesday, 30 November 11Add extra - Style alts tags etc
Wednesday, 30 November 11Standard templates make your brand consistent and maintain fixes previously implemented - MailChim...
Wednesday, 30 November 11Work with designers to get your designs right from the start
Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign f...
Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign f...
Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign f...
Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign f...
Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign f...
Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign f...
Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign f...
Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign f...
Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign f...
Wednesday, 30 November 11Graceful degradationMedia Queries - Mobile use of email is taking off - 41% of mobile internet in...
http://www.youtube.com/         watch?         v=DIWswCiwwto&feature=         player_embeddedWednesday, 30 November 11Pers...
“Read this issue                            online if you can’t                             see the images                ...
http://mailchimp.com/blog/        http://mailchimp.com/resources/html-email-templates/        http://www.campaignmonitor.c...
Hell Post Office - http://www.flickr.com/photos/eoinmcnamee/3143632936/sizes/l/in/photostream/        IKEA Fail - http://w...
Upcoming SlideShare
Loading in...5
×

Building the impossible - Emails

547

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
547
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Building the impossible - Emails"

  1. 1. Building the Impossible Emails for allWednesday, 30 November 11
  2. 2. Wednesday, 30 November 11
  3. 3. Wednesday, 30 November 11
  4. 4. @mattbeeWednesday, 30 November 11
  5. 5. Wednesday, 30 November 11We all have our problems, but mine was having the immense pleasure to come from a little computer shop in the North East, to working at aninternational agency in Lahdahn. Soon I was working on a huge brand building their loyalty programme monthly newsletter, of which there could beup to 5 per month.That’s where the challenge began, with lists of up to 500,000 recipients, even a small percentage of that many people was a large number ofbroken emailsSo began my life for the next 2 years - nailing all emails and making them work in every single email client. Even Lotus Notes 6 - and things evenhad to work in Lotus notes 6... Dicky Branson used it.
  6. 6. Wednesday, 30 November 11So everyone here will have suffered at the hands of IE and other browsers I assume, or ifknow I will guarantee you have received emails that look “a bit broken”.Chances are they probably were broken.Debugging these were an immense challenge - remember - you can’t use Firebug in Outlook2007...
  7. 7. Wednesday, 30 November 11While there are lots of browsers, there are even more email clients. And then add in OS anddevice issues, and webmail in different browsers, the number of clients is a bit epic to checkand debug them all.EG. - Apple Mail, Eudora, Outlook 2001, 2003, 2007, 2011, Gmail, Yahoo Mail, Hotmail,Thunderbird, Zimbra, Lotus Notes, Sparrow Mail, AOL Mail, and multiply that by browsers(especially hotmail - that didn’t like much other than IE back in the day)
  8. 8. Wednesday, 30 November 11And don’t forget these...And I’m told by a reliable source that there are literally 10 billion mobile clients
  9. 9. Impossible TaskWednesday, 30 November 11
  10. 10. Wednesday, 30 November 11Where do you start - well code like it is 1999.Tables, background attribute, bgcolor, font tags, align, valign - basically if its depracated, itwill probably work.
  11. 11. Wednesday, 30 November 11Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognitionImages need to be the correct height - yes its best practice but I’ve seen it happen a lotCSS - more on that on the next slide, but its just lacking - inline styles need to be used or at worst the style block in the bodyLists also seem to cause problems - best method is a table with bullet html entity and cell with the list item content - but not friendly to work withColours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard coloursWhite space is especially a problem between images - when collating images to make a header - make each image in its own cellIDs and Classes were renamed by email clients, working better currently as far as I knowSource code cand be changed - OH yes, hotmail used to change the body tag from body to xbody so as to not clash with any webmail styles
  12. 12. Background ImageWednesday, 30 November 11Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognitionImages need to be the correct height - yes its best practice but I’ve seen it happen a lotCSS - more on that on the next slide, but its just lacking - inline styles need to be used or at worst the style block in the bodyLists also seem to cause problems - best method is a table with bullet html entity and cell with the list item content - but not friendly to work withColours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard coloursWhite space is especially a problem between images - when collating images to make a header - make each image in its own cellIDs and Classes were renamed by email clients, working better currently as far as I knowSource code cand be changed - OH yes, hotmail used to change the body tag from body to xbody so as to not clash with any webmail styles
  13. 13. Background Image ImagesWednesday, 30 November 11Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognitionImages need to be the correct height - yes its best practice but I’ve seen it happen a lotCSS - more on that on the next slide, but its just lacking - inline styles need to be used or at worst the style block in the bodyLists also seem to cause problems - best method is a table with bullet html entity and cell with the list item content - but not friendly to work withColours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard coloursWhite space is especially a problem between images - when collating images to make a header - make each image in its own cellIDs and Classes were renamed by email clients, working better currently as far as I knowSource code cand be changed - OH yes, hotmail used to change the body tag from body to xbody so as to not clash with any webmail styles
  14. 14. Background Image Images CSSWednesday, 30 November 11Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognitionImages need to be the correct height - yes its best practice but I’ve seen it happen a lotCSS - more on that on the next slide, but its just lacking - inline styles need to be used or at worst the style block in the bodyLists also seem to cause problems - best method is a table with bullet html entity and cell with the list item content - but not friendly to work withColours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard coloursWhite space is especially a problem between images - when collating images to make a header - make each image in its own cellIDs and Classes were renamed by email clients, working better currently as far as I knowSource code cand be changed - OH yes, hotmail used to change the body tag from body to xbody so as to not clash with any webmail styles
  15. 15. Background Image Images CSS ListsWednesday, 30 November 11Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognitionImages need to be the correct height - yes its best practice but I’ve seen it happen a lotCSS - more on that on the next slide, but its just lacking - inline styles need to be used or at worst the style block in the bodyLists also seem to cause problems - best method is a table with bullet html entity and cell with the list item content - but not friendly to work withColours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard coloursWhite space is especially a problem between images - when collating images to make a header - make each image in its own cellIDs and Classes were renamed by email clients, working better currently as far as I knowSource code cand be changed - OH yes, hotmail used to change the body tag from body to xbody so as to not clash with any webmail styles
  16. 16. Background Image Images CSS Lists ColoursWednesday, 30 November 11Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognitionImages need to be the correct height - yes its best practice but I’ve seen it happen a lotCSS - more on that on the next slide, but its just lacking - inline styles need to be used or at worst the style block in the bodyLists also seem to cause problems - best method is a table with bullet html entity and cell with the list item content - but not friendly to work withColours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard coloursWhite space is especially a problem between images - when collating images to make a header - make each image in its own cellIDs and Classes were renamed by email clients, working better currently as far as I knowSource code cand be changed - OH yes, hotmail used to change the body tag from body to xbody so as to not clash with any webmail styles
  17. 17. Background Image Images CSS Lists Colours White spaceWednesday, 30 November 11Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognitionImages need to be the correct height - yes its best practice but I’ve seen it happen a lotCSS - more on that on the next slide, but its just lacking - inline styles need to be used or at worst the style block in the bodyLists also seem to cause problems - best method is a table with bullet html entity and cell with the list item content - but not friendly to work withColours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard coloursWhite space is especially a problem between images - when collating images to make a header - make each image in its own cellIDs and Classes were renamed by email clients, working better currently as far as I knowSource code cand be changed - OH yes, hotmail used to change the body tag from body to xbody so as to not clash with any webmail styles
  18. 18. Background Image Images CSS Lists ID/Classes Colours White spaceWednesday, 30 November 11Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognitionImages need to be the correct height - yes its best practice but I’ve seen it happen a lotCSS - more on that on the next slide, but its just lacking - inline styles need to be used or at worst the style block in the bodyLists also seem to cause problems - best method is a table with bullet html entity and cell with the list item content - but not friendly to work withColours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard coloursWhite space is especially a problem between images - when collating images to make a header - make each image in its own cellIDs and Classes were renamed by email clients, working better currently as far as I knowSource code cand be changed - OH yes, hotmail used to change the body tag from body to xbody so as to not clash with any webmail styles
  19. 19. Background Image Images CSS Lists ID/Classes Colours White space Changing sourceWednesday, 30 November 11Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognitionImages need to be the correct height - yes its best practice but I’ve seen it happen a lotCSS - more on that on the next slide, but its just lacking - inline styles need to be used or at worst the style block in the bodyLists also seem to cause problems - best method is a table with bullet html entity and cell with the list item content - but not friendly to work withColours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard coloursWhite space is especially a problem between images - when collating images to make a header - make each image in its own cellIDs and Classes were renamed by email clients, working better currently as far as I knowSource code cand be changed - OH yes, hotmail used to change the body tag from body to xbody so as to not clash with any webmail styles
  20. 20. Wednesday, 30 November 11Epic Fail:Approximately115 CSS properties in 2.1 specEmail clients support 47 of thosehttp://www.emailology.org/#3With Lotus Notes 6 and 7 included...10
  21. 21. Wednesday, 30 November 11 • Back up colours or no background images • If you have to, then use VML for Outlook - problematic though • All image or flat colour • Just do it right • Display Block • Media Queries • Plain text!
  22. 22. Wednesday, 30 November 11Limitations • Preview pane • Client vs Webmail • Dated machines • Image blocking • Spam Filters
  23. 23. Wednesday, 30 November 11Limitations • Preview pane • Client vs Webmail • Dated machines • Image blocking • Spam Filters
  24. 24. Wednesday, 30 November 11Limitations • Preview pane • Client vs Webmail • Dated machines • Image blocking • Spam Filters
  25. 25. Wednesday, 30 November 11Limitations • Preview pane • Client vs Webmail • Dated machines • Image blocking • Spam Filters
  26. 26. Wednesday, 30 November 11Limitations • Preview pane • Client vs Webmail • Dated machines • Image blocking • Spam Filters
  27. 27. Wednesday, 30 November 11Limitations • Preview pane • Client vs Webmail • Dated machines • Image blocking • Spam Filters
  28. 28. Wednesday, 30 November 11VideoFlashJavaScriptAudioWaynes World “No Way”
  29. 29. Wednesday, 30 November 11Research - don’t waste money - 7 Lotus notes users, 7 people signing off email at Virgin of 500k sent
  30. 30. Wednesday, 30 November 11Provide fall backs to flat colours - use all background images in areas where looks rubbish with part missing
  31. 31. euismod tellus sit amet porta. Suspendisse non dolor nec elit dapibus faucibus. Quisque utquam a eros consequat elementum in id magna. Integer pharetra luctus pharetra.Etiam mi est, rutrum ut semper in, pharetra ultrices diam. Maecenas sed luctus nisl. Curabiturornare, felis in porta laoreet, mi augue commodo nunc, at blandit lacus quam eu nibh. Aliquamrisus diam, lacinia sit amet dictum nec, consequat vitae nulla. Vivamus est lacus, tincidunt inlaoreet at, congue ac ante. Cras tristique, libero fermentum ullamcorper fermentum, ante lorempulvinar arcu, sit amet viverra velit risus eget ante. Phasellus in est sem, in lobortis odio.Maecenas quis dui vitae dolor congue commodo in vel dolor. Aliquam facilisis, eros a feugiatfeugiat, eros massa varius justo, at molestie risus arcu vitae ligula. Nunc pharetra adipiscinglorem, quis suscipit ligula vulputate eget. Ut mollis commodo semper. Nulla facilisi. Sed tempor,enim quis tempus consequat, ligula eros varius eros, a mattis odio eros non urna. Quisquecommodo lacus vehicula orci egestas sed scelerisque mauris tempor. Integer pellentesquecongue magna, id scelerisque est feugiat nec.Suspendisse dolor neque, faucibus non sollicitudin nec, interdum non justo. Curabitur vel eratjusto. Fusce semper libero at elit vulputate eget blandit lorem mattis. Vivamus eleifend tellus sedvelit dignissim tristique. Etiam purus tortor, egestas et condimentum id, hendrerit eu nunc.Vestibulum vestibulum est tempor quam accumsan commodo. Ut ac viverra arcu. Praesentpretium lacus at sapien elementum id pulvinar nisi dictum. Sed at leo enim. Proin auctorimperdiet sem, sit amet adipiscing nisi rhoncus ac. Aliquam libero mi, varius vel suscipit sed,gravida nec velit. Quisque mollis gravida tempor. Sed cursus tincidunt felis, non tincidunt tortorporttitor cursus.Sed congue elit et neque molestie volutpat eu ut ante. Suspendisse facilisis egestas adipiscing.Ut quis ante massa. Cras massa neque, posuere et iaculis aliquam, auctor vel ipsum. Cumsociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eratnisl, ullamcorper nec scelerisque a, pharetra ac justo. Etiam quis lacus felis, sed semper velit.Aenean ornare nisl a enim sollicitudin dapibus. In vel dapibus sem. Sed ornare, urna id gravidasemper, sem ante suscipit arcu, ut vehicula nisl sapien ac lorem. Aliquam a leo in metus laciniaeuismod. Sed varius aliquam justo, nec vulputate massa bibendum ac. Morbi aliquet molestietempus. Duis dui risus, sodales ac ultrices eget, imperdiet eget dolor. Aenean vel convallis purus.Sedtext for newsletters etc, much easier to digest volutpat elit sapien, vel vulputate ante. Integer et metus a lacus bibendum rutrum at sedWednesday, 30 November 11 Plaintellus. Aliquam viverra convallis sollicitudin. Phasellus nibh augue, ultrices non gravida a,accumsan at tellus. Nullam quam dolor, pellentesque nec euismod et, blandit eget elit.Pellentesque tristique imperdiet odio at euismod.
  32. 32. Wednesday, 30 November 11Add extra - Style alts tags etc
  33. 33. Wednesday, 30 November 11Standard templates make your brand consistent and maintain fixes previously implemented - MailChimp Provide strong templatesTest test test test test test test test
  34. 34. Wednesday, 30 November 11Work with designers to get your designs right from the start
  35. 35. Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  36. 36. Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  37. 37. Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  38. 38. Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  39. 39. Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  40. 40. Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  41. 41. Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  42. 42. Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  43. 43. Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  44. 44. Wednesday, 30 November 11Graceful degradationMedia Queries - Mobile use of email is taking off - 41% of mobile internet in the US in 2010 was on emailTest - but remember majority of people will only view your email in one client, make them not realise its not perfect
  45. 45. http://www.youtube.com/ watch? v=DIWswCiwwto&feature= player_embeddedWednesday, 30 November 11PersonaliseSegmentLocaliseBrandRelate
  46. 46. “Read this issue online if you can’t see the images or are using Outlook 2007″Wednesday, 30 November 11Microsoft - X Box - March, 2008
  47. 47. http://mailchimp.com/blog/ http://mailchimp.com/resources/html-email-templates/ http://www.campaignmonitor.com http://www.campaignmonitor.com/forums/viewtopic.php?id=3862 http://www.emailonacid.com/ http://www.emailology.org http://litmus.com http://mattbee.co.uk/2007/10/lotus-notes-how-to-build-the-perfect-email/ http://mattbee.co.uk/2009/08/email-marketing-a-bit-of-a-rant/ http://mattbee.co.uk/2008/03/at-least-microsoft-know-outlook-2007-isnt-very-good/Wednesday, 30 November 11
  48. 48. Hell Post Office - http://www.flickr.com/photos/eoinmcnamee/3143632936/sizes/l/in/photostream/ IKEA Fail - http://www.flickr.com/photos/peterkaminski/30196012/ Hundreds and Thousands - http://www.flickr.com/photos/pinksherbet/3566979613/ Prince 1999 - http://www.flickr.com/photos/luna715/4121542040/ iPhones - http://www.flickr.com/photos/bjorn1101/5731663009/ No - http://www.flickr.com/photos/nathangibbs/98592171/ Library - http://www.flickr.com/photos/geraldpereira/6140017255 Offer - http://www.flickr.com/photos/red5standingby/3600514868 Belly Slide - http://www.flickr.com/photos/smull/221730442Wednesday, 30 November 11

×