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

6. Design Defensively

7. 1–3 Seconds

9. Five stages of viewing
1) from name
2) subject line
3) preview pane
4) opened email
5) full email

10. “From” Name

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.

12. Subject Line

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.

14. Preview Pane

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).

19. Opened Email

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

28. Coding Emails

29. Tutorial
!
Inspect Element on an HTML email

41. Tables

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.

51. EXAMPLE
from www.w3schools.com

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