HTML E-mail<br />Building a professional  HTML E-mail<br />
Two methods<br />Cowboy<br />Professional<br />
Cowboy method<br />Embed image intoE-mail and send<br />
All Finished….<br />Have a cup of tea<br />
Thank you<br />
But seriously this will lead toa train wreck<br />With no control overimages, text, width or height<br />
With certainly no scope forany complicated layouts<br />
To build a beautifulprofessional HTML E-mail…<br />You  need to use …<br />
…HTML tables<br />
Nesting two HTML tables willallow you to centre an E-mail<br />And allow use of background colour<br />
Maximum width of 600px(yes I was getting desperate for a relevant pic)<br />
Sketch out the design<br />
Avoid breaks<br />Use 1 x 1 invisible spacer gifsto control height and width <br />
Write table code by hand<br /><table width=“600”><br />	<tr><br />		<td>Row 1 cell1</td><br />	</tr><br /></table><br />Us...
Inline styles need to apply to every paragraph<br /><p style=“font-family: verdana, sans-serif; font-size: 11px;”>Some tex...
Each image needs to have a width and height applied to it<br /><img src=“image.gif” width=“10px” height=“20px” alt=“descri...
End of technical bit<br />
With our beautifully structured table in place<br />We now need to add a couple of often overlookeditems<br />
An alternative viewing method(if  user is viewing E-mail as text only)<br />
To provide an alternative view upload your e-mail to some web space and link to it using the follow<br />View this as a we...
Get IT to set you up a  domain, upload and link to the “view as web page” text<br />
An alternative viewing method(if  user is viewing E-mail as text only)<br />An unsubscribe option<br />
Campaign Monitor<br />Spam is any email you send to someone who hasn’t given you their direct permission to contact them o...
The Can-SPAM ACT of 2004 states Opt out preferencesmust be provided in E-mail<br />Unsubscribe link<br />Bit of a tenuous ...
Unsubscribe link<br />Should be positioned in the  bottom left of the HTML E-Mail<br />
Animation?FORGET IT !<br />
SO WHY<br />DO WE BOTHER?<br />
Truth remains…<br />Businesses and individualsthe world over send and receive E-mails in HTML format by default everyday<b...
So how can we measure ourCash cow’s ROI?<br />
Let someone elsedo the work<br />
3rd party E-mail services<br /><ul><li> Campaign Monitor
 Mail Chimp</li></ul>Partnerships<br />
3rd party E-mail services<br /><ul><li> Metrics</li></ul>-Open rates<br />-Click rates<br />-Unsubscribe <br /><ul><li> Pl...
 Automatically unsubscribe
 Delivery Records
 Store E-mail lists</li></li></ul><li>What about<br />Mobile?<br />
Set clear goals for  your <br />marketing campaign<br />What is  your target audienceand do they use mobiles? <br />
For mobile clients I’d recommend that you stick to a single column layout.<br />
And provide a fall back ofa text only version<br />
IN SUMMARY<br /><ul><li>Set clear  goals
Sketch out the design by hand
Build using HTML tables
Max width 600 pixels
Use Invisible spacer gifs to control layout
Upcoming SlideShare
Loading in...5
×

HtmL E-Mails

993

Published on

Published in: Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
993
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • Introduction what does everyone understand an HTML E-mail to be
  • Two methods (personas, types, classes) on how to build an HTML E-mail
  • Take an image cut and paste into Microsoft Outlook will look great on a local machine within Outlook. explain that this is what most people understand an HTML E-mail to be
  • Enough said
  • There is a lack of control using this method as each desktop E-mail clients, Microsoft Outlook, Pegasus Mail, Mozilla&apos;s Thunderbird, and Apple Inc.&apos;sMail. 33 listed on wikipedia) as well as 12 purelytext based, and 12 webbased including  Gmail, Yahoo! Mail, Hotmail,
  • Two or Three column Grids for Newsletters are out of the question
  • HTML is a basic language of web page development; it uses a system of pre-defined tags enclosed within the &quot;&lt;&quot; and &quot;&gt;&quot; symbols.HTML tables &lt;table&gt;…&lt;/table&gt;Identifies a table.&lt;tr&gt;…&lt;/tr&gt;Contains a row of cells in a table.&lt;td&gt;…&lt;/td&gt;A table data cell.
  • Part of the photograph showing Dr Gillaume Benjamin Amand Duchenne (1806 - 1875) and his assistant performing their &apos;Faradism&apos; experiment on a live subject
  • Nesting or groupingtables involves placing one HTML table within another
  • Sticking to a maximum of 600 pixels wide ensures your design should still be readable when scaled down for mobile devices. This width also gives good results in desktop and web-based preview panes
  • Use Pen and paper to draw a grid to show all the rows and columns of your table including spacer gif columns
  • By applying1px by 1px invisible spacer gifs to your layouts you can control height and width of your table &lt;img src href=“spacer.gif” width=“100” height=“100” alt=“”&gt;Controversial as sometimes these can be viewed as a Spaming device
  • HTML tables &lt;table&gt;…&lt;/table&gt;Identifies a table.&lt;tr&gt;…&lt;/tr&gt;Contains a row of cells in a table.&lt;td&gt;…&lt;/td&gt;A table data cell.
  • Inline styles are CSS styles that are applied to one element using the style attribute
  • Specifying the width and height of all embedded objects like images and applets allows your user&apos;s browser to render your page without waiting for images to download and try on for size The alt attribute is meant to be used as an alternative text if the image is not available
  • Code? Beautiful? Sure. After all, Code is Poetry. This is just HTML, so it can’t be quite as intricate and elegant as a dynamic language, but it still bears the brush strokes of its creator. http://css-tricks.com/what-beautiful-html-code-looks-like/
  • Your HTML E-mail document will double as HTML page, rename page “index.html” to differentiate between documents. And ensure DOCTYPE is present &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt; on webpage
  • IT will provide a url such as: &lt;a style=&quot;color: #ffffff&quot; href=&quot;http://images.complete-grp.com/Dublin2010/index.html&quot;&gt;View as web page&lt;/a&gt;
  • Spam is any email you send to someone who hasn’t given you their direct permission to contact them on the topic of the email. http://www.campaignmonitor.com/anti-spam/
  • The CAN-SPAM Act, a law that sets the rules for commercial email, establishes requirements for commercial messages, gives recipients the right to have you stop emailing them, and spells out tough penalties for violations.
  • Unsubscribe link should read “You are receiving this E-mail because you expressed an interest in our company to unsubscribe Click here”
  • Flash is not supported within the E-mail environment whilst animated Gifs will not work in Outlook 2007
  • Truth remains businesses and individuals the world over send and receive e-mails in HTML format by default everyday
  • http://www.mailchimp.com/http://www.campaignmonitor.com/
  • 3rd party e-mail services will store your E-mail lists and keep them up to date with unsubscribe being handled automatically mail chimp allows sending of 1,000 e-mails free.
  • Transcript of "HtmL E-Mails"

    1. 1. HTML E-mail<br />Building a professional HTML E-mail<br />
    2. 2. Two methods<br />Cowboy<br />Professional<br />
    3. 3. Cowboy method<br />Embed image intoE-mail and send<br />
    4. 4. All Finished….<br />Have a cup of tea<br />
    5. 5. Thank you<br />
    6. 6. But seriously this will lead toa train wreck<br />With no control overimages, text, width or height<br />
    7. 7. With certainly no scope forany complicated layouts<br />
    8. 8. To build a beautifulprofessional HTML E-mail…<br />You need to use …<br />
    9. 9. …HTML tables<br />
    10. 10.
    11. 11. Nesting two HTML tables willallow you to centre an E-mail<br />And allow use of background colour<br />
    12. 12. Maximum width of 600px(yes I was getting desperate for a relevant pic)<br />
    13. 13. Sketch out the design<br />
    14. 14. Avoid breaks<br />Use 1 x 1 invisible spacer gifsto control height and width <br />
    15. 15. Write table code by hand<br /><table width=“600”><br /> <tr><br /> <td>Row 1 cell1</td><br /> </tr><br /></table><br />Use CSS inline styles attached to the <p> tag<br />
    16. 16. Inline styles need to apply to every paragraph<br /><p style=“font-family: verdana, sans-serif; font-size: 11px;”>Some text</p><br /><p style=“font-family: verdana, sans-serif; font-size: 11px;”>Some text</p><br />
    17. 17. Each image needs to have a width and height applied to it<br /><img src=“image.gif” width=“10px” height=“20px” alt=“description of image”><br />The alt attribute is used to describe an image when it is not available<br />
    18. 18. End of technical bit<br />
    19. 19. With our beautifully structured table in place<br />We now need to add a couple of often overlookeditems<br />
    20. 20. An alternative viewing method(if user is viewing E-mail as text only)<br />
    21. 21. To provide an alternative view upload your e-mail to some web space and link to it using the follow<br />View this as a web page<br />
    22. 22. Get IT to set you up a domain, upload and link to the “view as web page” text<br />
    23. 23. An alternative viewing method(if user is viewing E-mail as text only)<br />An unsubscribe option<br />
    24. 24. Campaign Monitor<br />Spam is any email you send to someone who hasn’t given you their direct permission to contact them on the topic of the email<br />
    25. 25. The Can-SPAM ACT of 2004 states Opt out preferencesmust be provided in E-mail<br />Unsubscribe link<br />Bit of a tenuous photographic link<br />
    26. 26. Unsubscribe link<br />Should be positioned in the bottom left of the HTML E-Mail<br />
    27. 27. Animation?FORGET IT !<br />
    28. 28. SO WHY<br />DO WE BOTHER?<br />
    29. 29. Truth remains…<br />Businesses and individualsthe world over send and receive E-mails in HTML format by default everyday<br />
    30. 30. So how can we measure ourCash cow’s ROI?<br />
    31. 31. Let someone elsedo the work<br />
    32. 32. 3rd party E-mail services<br /><ul><li> Campaign Monitor
    33. 33. Mail Chimp</li></ul>Partnerships<br />
    34. 34. 3rd party E-mail services<br /><ul><li> Metrics</li></ul>-Open rates<br />-Click rates<br />-Unsubscribe <br /><ul><li> Plain text option for users with HTML option turned off
    35. 35. Automatically unsubscribe
    36. 36. Delivery Records
    37. 37. Store E-mail lists</li></li></ul><li>What about<br />Mobile?<br />
    38. 38. Set clear goals for your <br />marketing campaign<br />What is your target audienceand do they use mobiles? <br />
    39. 39. For mobile clients I’d recommend that you stick to a single column layout.<br />
    40. 40. And provide a fall back ofa text only version<br />
    41. 41. IN SUMMARY<br /><ul><li>Set clear goals
    42. 42. Sketch out the design by hand
    43. 43. Build using HTML tables
    44. 44. Max width 600 pixels
    45. 45. Use Invisible spacer gifs to control layout
    46. 46. Write code by hand
    47. 47. Use third party E-mail services</li></li></ul><li>Gallery<br />
    48. 48. HTML E-mail with borders<br />visible to show structure<br />
    49. 49. CMA HTML E-mail no borders<br />
    50. 50. CMA HTML E-mailon iPhone<br />
    51. 51. CMA HTML E-mail as plain text<br />
    52. 52. MailChimpReports page<br />
    53. 53. Thank you<br />

    ×