5. Wednesday, 30 November 11
We 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 an
international agency in Lahdahn. Soon I was working on a huge brand building their loyalty programme monthly newsletter, of which there could be
up 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 of
broken emails
So 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 even
had to work in Lotus notes 6... Dicky Branson used it.
6. Wednesday, 30 November 11
So everyone here will have suffered at the hands of IE and other browsers I assume, or if
know 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 Outlook
2007...
7. Wednesday, 30 November 11
While there are lots of browsers, there are even more email clients. And then add in OS and
device issues, and webmail in different browsers, the number of clients is a bit epic to check
and 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. Wednesday, 30 November 11
And don’t forget these...
And I’m told by a reliable source that there are literally 10 billion mobile clients
10. Wednesday, 30 November 11
Where do you start - well code like it is 1999.
Tables, background attribute, bgcolor, font tags, align, valign - basically if its depracated, it
will probably work.
11. Wednesday, 30 November 11
Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognition
Images need to be the correct height - yes its best practice but I’ve seen it happen a lot
CSS - 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 body
Lists 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 with
Colours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard colours
White space is especially a problem between images - when collating images to make a header - make each image in its own cell
IDs and Classes were renamed by email clients, working better currently as far as I know
Source 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. Background Image
Wednesday, 30 November 11
Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognition
Images need to be the correct height - yes its best practice but I’ve seen it happen a lot
CSS - 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 body
Lists 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 with
Colours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard colours
White space is especially a problem between images - when collating images to make a header - make each image in its own cell
IDs and Classes were renamed by email clients, working better currently as far as I know
Source 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. Background Image
Images
Wednesday, 30 November 11
Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognition
Images need to be the correct height - yes its best practice but I’ve seen it happen a lot
CSS - 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 body
Lists 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 with
Colours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard colours
White space is especially a problem between images - when collating images to make a header - make each image in its own cell
IDs and Classes were renamed by email clients, working better currently as far as I know
Source 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. Background Image
Images
CSS
Wednesday, 30 November 11
Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognition
Images need to be the correct height - yes its best practice but I’ve seen it happen a lot
CSS - 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 body
Lists 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 with
Colours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard colours
White space is especially a problem between images - when collating images to make a header - make each image in its own cell
IDs and Classes were renamed by email clients, working better currently as far as I know
Source 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. Background Image
Images
CSS
Lists
Wednesday, 30 November 11
Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognition
Images need to be the correct height - yes its best practice but I’ve seen it happen a lot
CSS - 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 body
Lists 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 with
Colours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard colours
White space is especially a problem between images - when collating images to make a header - make each image in its own cell
IDs and Classes were renamed by email clients, working better currently as far as I know
Source 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. Background Image
Images
CSS
Lists
Colours
Wednesday, 30 November 11
Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognition
Images need to be the correct height - yes its best practice but I’ve seen it happen a lot
CSS - 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 body
Lists 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 with
Colours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard colours
White space is especially a problem between images - when collating images to make a header - make each image in its own cell
IDs and Classes were renamed by email clients, working better currently as far as I know
Source 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. Background Image
Images
CSS
Lists
Colours
White space
Wednesday, 30 November 11
Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognition
Images need to be the correct height - yes its best practice but I’ve seen it happen a lot
CSS - 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 body
Lists 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 with
Colours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard colours
White space is especially a problem between images - when collating images to make a header - make each image in its own cell
IDs and Classes were renamed by email clients, working better currently as far as I know
Source 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. Background Image
Images
CSS
Lists
ID/Classes
Colours
White space
Wednesday, 30 November 11
Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognition
Images need to be the correct height - yes its best practice but I’ve seen it happen a lot
CSS - 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 body
Lists 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 with
Colours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard colours
White space is especially a problem between images - when collating images to make a header - make each image in its own cell
IDs and Classes were renamed by email clients, working better currently as far as I know
Source 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. Background Image
Images
CSS
Lists
ID/Classes
Colours
White space
Changing source
Wednesday, 30 November 11
Background images - just don’t display - VML option in Microsoft Outlook, but it just doesn’t work on nested tables and increases spam recognition
Images need to be the correct height - yes its best practice but I’ve seen it happen a lot
CSS - 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 body
Lists 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 with
Colours can be an issue, mostly on Lotus Notes - it uses its own colour palette rather than web standard colours
White space is especially a problem between images - when collating images to make a header - make each image in its own cell
IDs and Classes were renamed by email clients, working better currently as far as I know
Source 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. Wednesday, 30 November 11
Epic Fail:
Approximately115 CSS properties in 2.1 spec
Email clients support 47 of those
http://www.emailology.org/#3
With Lotus Notes 6 and 7 included...
10
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!
29. Wednesday, 30 November 11
Research - don’t waste money - 7 Lotus notes users, 7 people signing off email at Virgin of 500k sent
30. Wednesday, 30 November 11
Provide fall backs to flat colours - use all background images in areas where looks rubbish with part missing
31. euismod tellus sit amet porta. Suspendisse non dolor nec elit dapibus faucibus. Quisque ut
quam 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. Curabitur
ornare, felis in porta laoreet, mi augue commodo nunc, at blandit lacus quam eu nibh. Aliquam
risus diam, lacinia sit amet dictum nec, consequat vitae nulla. Vivamus est lacus, tincidunt in
laoreet at, congue ac ante. Cras tristique, libero fermentum ullamcorper fermentum, ante lorem
pulvinar 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 feugiat
feugiat, eros massa varius justo, at molestie risus arcu vitae ligula. Nunc pharetra adipiscing
lorem, 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. Quisque
commodo lacus vehicula orci egestas sed scelerisque mauris tempor. Integer pellentesque
congue magna, id scelerisque est feugiat nec.
Suspendisse dolor neque, faucibus non sollicitudin nec, interdum non justo. Curabitur vel erat
justo. Fusce semper libero at elit vulputate eget blandit lorem mattis. Vivamus eleifend tellus sed
velit dignissim tristique. Etiam purus tortor, egestas et condimentum id, hendrerit eu nunc.
Vestibulum vestibulum est tempor quam accumsan commodo. Ut ac viverra arcu. Praesent
pretium lacus at sapien elementum id pulvinar nisi dictum. Sed at leo enim. Proin auctor
imperdiet 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 tortor
porttitor 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. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec erat
nisl, 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 gravida
semper, sem ante suscipit arcu, ut vehicula nisl sapien ac lorem. Aliquam a leo in metus lacinia
euismod. Sed varius aliquam justo, nec vulputate massa bibendum ac. Morbi aliquet molestie
tempus. 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 sed
Wednesday, 30 November 11
Plain
tellus. 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.
33. Wednesday, 30 November 11
Standard templates make your brand consistent and maintain fixes previously implemented - MailChimp Provide strong templates
Test test test test test test test test
35. Wednesday, 30 November 11
Style Alt
Display block
Inline CSS
CSS block in body
Style on links
Tables unfortunately still reign for most
36. Wednesday, 30 November 11
Style Alt
Display block
Inline CSS
CSS block in body
Style on links
Tables unfortunately still reign for most
37. Wednesday, 30 November 11
Style Alt
Display block
Inline CSS
CSS block in body
Style on links
Tables unfortunately still reign for most
38. Wednesday, 30 November 11
Style Alt
Display block
Inline CSS
CSS block in body
Style on links
Tables unfortunately still reign for most
39. Wednesday, 30 November 11
Style Alt
Display block
Inline CSS
CSS block in body
Style on links
Tables unfortunately still reign for most
40. Wednesday, 30 November 11
Style Alt
Display block
Inline CSS
CSS block in body
Style on links
Tables unfortunately still reign for most
41. Wednesday, 30 November 11
Style Alt
Display block
Inline CSS
CSS block in body
Style on links
Tables unfortunately still reign for most
42. Wednesday, 30 November 11
Style Alt
Display block
Inline CSS
CSS block in body
Style on links
Tables unfortunately still reign for most
43. Wednesday, 30 November 11
Style Alt
Display block
Inline CSS
CSS block in body
Style on links
Tables unfortunately still reign for most
44. Wednesday, 30 November 11
Graceful degradation
Media Queries - Mobile use of email is taking off - 41% of mobile internet in the US in 2010 was on email
Test - but remember majority of people will only view your email in one client, make them not realise its not perfect
