• Save
Building the impossible - Emails
Upcoming SlideShare
Loading in...5
×
 

Building the impossible - Emails

on

  • 531 views

 

Statistics

Views

Total Views
531
Views on SlideShare
531
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building the impossible - Emails Building the impossible - Emails Presentation Transcript

  • 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 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.
  • 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...
  • 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)
  • Wednesday, 30 November 11And don’t forget these...And I’m told by a reliable source that there are literally 10 billion mobile clients
  • Impossible TaskWednesday, 30 November 11
  • 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.
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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!
  • Wednesday, 30 November 11Limitations • Preview pane • Client vs Webmail • Dated machines • Image blocking • Spam Filters
  • Wednesday, 30 November 11Limitations • Preview pane • Client vs Webmail • Dated machines • Image blocking • Spam Filters
  • Wednesday, 30 November 11Limitations • Preview pane • Client vs Webmail • Dated machines • Image blocking • Spam Filters
  • Wednesday, 30 November 11Limitations • Preview pane • Client vs Webmail • Dated machines • Image blocking • Spam Filters
  • Wednesday, 30 November 11Limitations • Preview pane • Client vs Webmail • Dated machines • Image blocking • Spam Filters
  • Wednesday, 30 November 11Limitations • Preview pane • Client vs Webmail • Dated machines • Image blocking • Spam Filters
  • 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 sent
  • Wednesday, 30 November 11Provide fall backs to flat colours - use all background images in areas where looks rubbish with part missing
  • 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.
  • Wednesday, 30 November 11Add extra - Style alts tags etc
  • 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
  • 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 for most
  • Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  • Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  • Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  • Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  • Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  • Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  • Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  • Wednesday, 30 November 11Style AltDisplay blockInline CSSCSS block in bodyStyle on linksTables unfortunately still reign for most
  • 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
  • http://www.youtube.com/ watch? v=DIWswCiwwto&feature= player_embeddedWednesday, 30 November 11PersonaliseSegmentLocaliseBrandRelate
  • “Read this issue online if you can’t see the images or are using Outlook 2007″Wednesday, 30 November 11Microsoft - X Box - March, 2008
  • 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
  • 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