SlideShare a Scribd company logo

HTML Email

•
•
Shawn Calvert
Shawn Calvert

This document provides information and guidance about designing HTML emails. It discusses that HTML email design is different than web design and requires coding like it is 1999 without CSS and with images referenced by absolute URLs. It also recommends using tables for layout, keeping the width to 600px, and delivering emails in a multipart/alternative MIME format. Additionally, it advises designing defensively by considering technology limits, attention spans, and avoiding spam filters. Key aspects include using recognizable "from" names, compelling subjects and previews, ensuring the core message is above the fold, and making emails scan-friendly.

Related slideshows

Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 SlidesIntro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
 
Presentation on html, css
Presentation on html, cssPresentation on html, css
Presentation on html, css
 
1 of 55
Download to read offline
HTML Email 22-3376 Web Design 2 // Columbia College Chicago
HTML email design is not web design as you know (and love) it.
You have to code like it is 1999. Most of your CSS will not work Everything but the ‘body’ is removed CSS goes inline Your images must be live on a server and be referenced by an absolute URL Layout in tables Use shim.gifs for spacing Keep your width to 600px 1
“Multipart/Alternative MIME” format While you code your emails in plain old HTML, with some inline CSS thrown in, you need to deliver the email in a Multipart/Alternative Mime format, that sends the email out as both HTML and plain text. This is usually where services like MailChimp, ExactTarget, Campaign Monitor, Constant Contact, et al, come in. 2
Design Defensively When you design emails, there are two considerations that you need to keep in mind: 1) limits of the technology 2) limits of attention 3) avoid getting tagged as spam 3
Design Defensively
1–3 Seconds
HTML Email
Five stages of viewing 1) from name 2) subject line 3) preview pane 4) opened email 5) full email
“From” Name
Do they immediately recognize it is from you? 73% of subscribers “Report Spam” or “Report Junk” based on the content of the “from” field.
Subject Line
Can they quickly determine the content and value of your email before opening? 69% of subscribers “Report Spam” or “Report Junk” based on the content of the subject line.
Preview Pane
HTML Email
Do you viewers receive your call to action in the preview pane? Do you use compelling headlines at the top of each email?
Do your emails work with images turned off? 59% of online customers routinely block images. The majority of email clients block emails by default (Hotmail, Gmail, Outlook, Yahoo).
HTML Email
Opened Email
HTML Email
Is your core message “Above the Fold”? 11% of subscribers read the full email message.
Full email (below the fold)
Is your email scan-friendly? If there is a conversion, is it clearly the focus? Users spend an average of 51 seconds on a newsletter once it is fully opened
HTML Email
HTML Email
HTML Email
HTML Email
Coding Emails
Tutorial ! Inspect Element on an HTML email
HTML Email
HTML Email
HTML Email
HTML Email
HTML Email
HTML Email
HTML Email
HTML Email
HTML Email
HTML Email
HTML Email
Tables
Tutorial ! Open “tables.html”
What are tables? Tables are html elements that are used for presenting rows and columns of tabular data. Tables are always created using three or more nested tags (at a minimum: table, tr, td) For many years, designers used tables for layout, which is now done with CSS, except in certain scenarios (mainly for html emails).
table thead tfoot tbody tr th td
<table></table> The <table> tag defines and encloses the entire HTML table.
<thead></thead> The <thead> tag is used to group header content in an HTML table.
<tfoot></tfoot> The <tfoot> tag is used to group footer content in an HTML table.
<tbody></tbody> The <tbody> tag is used to group the body content in an HTML table.
<tr></tr> The <tr> tag defines a row in an HTML table.
<th></th> <td></td> These tags are the actual data cells: “table header” and “table data”. Use <th> if the cell is inside <thead> tags.
EXAMPLE from www.w3schools.com
<th colspan=”2”></th> <td colspan=”2”></td> If your td or th element needs to span over another column, use the colspan attribute.
EXAMPLE Every <tr> element in a table must contain the same number of cells, unless a ‘colspan’ element is used. In the example above, the first row has a cell that is using colspan=”2” to make a single cell take the space of two cells.
EXAMPLE Every table must have table, tr and td (or th) tags. Marking up the header and body is good practice, but not essential.
Tutorial ! Build HTML email: CSO

More Related Content

HTML Email

  • 1. HTML Email 22-3376 Web Design 2 // Columbia College Chicago
  • 2. HTML email design is not web design as you know (and love) it.
  • 3. You have to code like it is 1999. Most of your CSS will not work Everything but the ‘body’ is removed CSS goes inline Your images must be live on a server and be referenced by an absolute URL Layout in tables Use shim.gifs for spacing Keep your width to 600px 1
  • 4. “Multipart/Alternative MIME” format While you code your emails in plain old HTML, with some inline CSS thrown in, you need to deliver the email in a Multipart/Alternative Mime format, that sends the email out as both HTML and plain text. This is usually where services like MailChimp, ExactTarget, Campaign Monitor, Constant Contact, et al, come in. 2
  • 5. Design Defensively When you design emails, there are two considerations that you need to keep in mind: 1) limits of the technology 2) limits of attention 3) avoid getting tagged as spam 3
  • 9. Five stages of viewing 1) from name 2) subject line 3) preview pane 4) opened email 5) full email
  • 11. Do they immediately recognize it is from you? 73% of subscribers “Report Spam” or “Report Junk” based on the content of the “from” field.
  • 13. Can they quickly determine the content and value of your email before opening? 69% of subscribers “Report Spam” or “Report Junk” based on the content of the subject line.
  • 16. Do you viewers receive your call to action in the preview pane? Do you use compelling headlines at the top of each email?
  • 17. Do your emails work with images turned off? 59% of online customers routinely block images. The majority of email clients block emails by default (Hotmail, Gmail, Outlook, Yahoo).
  • 21. Is your core message “Above the Fold”? 11% of subscribers read the full email message.
  • 22. Full email (below the fold)
  • 23. Is your email scan-friendly? If there is a conversion, is it clearly the focus? Users spend an average of 51 seconds on a newsletter once it is fully opened
  • 29. Tutorial ! Inspect Element on an HTML email
  • 42. Tutorial ! Open “tables.html”
  • 43. What are tables? Tables are html elements that are used for presenting rows and columns of tabular data. Tables are always created using three or more nested tags (at a minimum: table, tr, td) For many years, designers used tables for layout, which is now done with CSS, except in certain scenarios (mainly for html emails).
  • 44. table thead tfoot tbody tr th td
  • 45. <table></table> The <table> tag defines and encloses the entire HTML table.
  • 46. <thead></thead> The <thead> tag is used to group header content in an HTML table.
  • 47. <tfoot></tfoot> The <tfoot> tag is used to group footer content in an HTML table.
  • 48. <tbody></tbody> The <tbody> tag is used to group the body content in an HTML table.
  • 49. <tr></tr> The <tr> tag defines a row in an HTML table.
  • 50. <th></th> <td></td> These tags are the actual data cells: “table header” and “table data”. Use <th> if the cell is inside <thead> tags.
  • 52. <th colspan=”2”></th> <td colspan=”2”></td> If your td or th element needs to span over another column, use the colspan attribute.
  • 53. EXAMPLE Every <tr> element in a table must contain the same number of cells, unless a ‘colspan’ element is used. In the example above, the first row has a cell that is using colspan=”2” to make a single cell take the space of two cells.
  • 54. EXAMPLE Every table must have table, tr and td (or th) tags. Marking up the header and body is good practice, but not essential.
  • 55. Tutorial ! Build HTML email: CSO