HighEdWeb Technical Academy: Building Better HTML Email Campaigns

HighEdWeb Technical Academy: Building Better HTML Email Campaigns

In this workshop, we’ll dig into the components used in every HTML email campaign. You’ll learn how to combine things like typography, images, links and buttons to create well-crafted emails that work across most email clients. We will also look at different approaches for making those emails work on screens of all sizes and code a responsive email campaign from scratch.

During the workshop, we’ll discuss:

The unique benefits of email marketing
The basic elements of every email campaign
The best ways for coding those elements
Different approaches to mobile and responsive emails
Tips on troubleshooting, workflows and where to learn more

You will leave with a better understanding of what goes into coding amazing email campaigns, along with plenty of resources and code samples to use in your own emails. While this workshop assumes some familiarity with HTML and CSS, it is great for both beginner and intermediate email marketers, designers and developers.

5e6805ca1cd7538ad32437cdb7fc1221?s=128

RodriguezCommaJ

October 07, 2017
Tweet

Transcript

  1. #heweb17 Building Better HTML Email Campaigns

  2. Jason Rodriguez Blah, blah, blah, email… Jason Rodriguez College Dropout

    Web + Email Geek Product Manager @litmusapp Lurker, Retweeter @rodriguezcommaj Educator at TheBetter.Email
  3. I don’t know everything, so let’s learn together. ⚠

  4. Learn about the foundations of HTML email. Tackle some exercises

    and talk. Break Look at mobile approaches, responsive and hybrid emails, and a few extras. Talk about troubleshooting workflows. Q & A Now - 3:30pm 3:30 - 3:45pm 3:45 - 4:15pm 4:15 - 4:40pm 4:40 - 5pm
  5. Get your code hats on… We’ll be building an email

    with: • Single columns • Multiple columns • Text • Images • Buttons • Responsive styles
  6. Workshop reference: Get the slides, code, and extra resources on

    my website: rodriguezcommaj.com/speaking/heweb17
  7. Let’s Get Some Context

  8. EMAIL IS UNIQUE

  9. ✔ ✔ ✔ ✔ Iterative Testable Personal Forgettable

  10. None
  11. None
  12. THERE ARE NO STANDARDS

  13. WEB EMAIL ≠

  14. EMAIL DESIGN WEB DESIGN <table> <div> <td> <h1> <td> <p>

    px em style=“” <style> bgcolor background-color padding margin
  15. EMAIL DESIGN WEB DESIGN #ffffff #fff rgba hsa individual properties

    shorthand width=“100” width: 100px; align=“left” text-align: left; style=“” <style>
  16. #heweb17

  17. We need to crawl before we can walk.

  18. Document Structure

  19. All emails consist of: HTML and CSS

  20. HTML = Structure and content Tags <a> <h1> <table> Attributes

    width="" cellpadding="" HTML = Structure and Content
  21. HTML = Structure and content Rules padding color font-family Values

    20px #999999 sans-serif CSS = Style and Manipulation
  22. A Base Document filename.html

  23. #heweb17

  24. Doctype

  25. Base Tags

  26. Reset Styles

  27. Preview Text

  28. None
  29. Preview Text

  30. Hacking Preview Text

  31. Tables

  32. The foundation of email… for now.

  33. TABLE ROW CELL CELL ROW CELL CELL ROW CELL CELL

    ROW CELL CELL
  34. <table> border, cellpadding, cellspacing, width <table border="0" cellpadding="0" cellspacing="0" width=“100%">

    </table>
  35. <tr>

  36. <td> align, bgcolor, valign, style, padding <td align="center" valign="top" style="padding:

    60px 10px 20px 10px;”> </td>
  37. None
  38. Modularity + + =

  39. None
  40. Keeping Tables ACCESSIBLE

  41. ARIA Roles FTW <table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">

  42. Text & Semantics

  43. Text is where most of your content should live

  44. None
  45. The Old Way <td style="color: #333333; font-family: sans-serif; font-size: 16px;">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, vel. Ea, repudiandae error inventore non alias amet totam tempora accusantium, quasi delectus explicabo, laborum deleniti nesciunt vel iure voluptas blanditiis! </td>
  46. Think of Your SUBSCRIBERS

  47. Semantic elements describe the content they contain. Headings and paragraphs

    are more descriptive than a table cell.
  48. <h1> — <h6> color, font-family, font-size, font-weight, line-height, margin <h1

    style="color: #333333; font-family: sans-serif; font-size: 32px; font-weight: bold; line-height: 32px; margin: 0;"> This is a heading </h1>
  49. <p> color, font-family, font-size, font-weight, line-height, margin <p style="color: #333333;

    font-family: sans-serif; font-size: 16px; font-weight: bold; line-height: 20px; margin: 0;"> This is a paragraph. </p>
  50. <span> color, font-style, font-weight <span style="color: #7c72dd; font-style: italic;"> This

    is some specific text. </span>
  51. Using Inheritance <td style="color: #333333; font-family: sans-serif; font-size: 16px; font-weight:

    bold; line-height: 20px;”> <h1 style=“font-size: 32px; line-height: 32px; margin: 0;”> Heading Level 1 </h1> <p style=“margin: 0;”> This is a paragraph of text. </p> </td>
  52. Keep Text BIG and READABLE

  53. Let's put it all together: Example 1 04-text.html

  54. Exercise

  55. Create an Email 1. Create a new HTML document 2.

    Make a single-column table structure 3. Add the following semantic text: • Heading • Paragraph • Styled span
  56. How'd it go?

  57. Links & Buttons

  58. All Emails HAVE GOALS

  59. <a> href points to where you want them to go

    <a href=“https://rodriguezcommaj.com“> This is a link. </a>
  60. <a> color, font-weight, text-decoration <a href=“https://rodriguezcommaj.com“ style="color: #7c72dd; font-weight: bold;

    text-decoration: underline;">This is a link.</a>
  61. Blue Links

  62. None
  63. None
  64. Buttons

  65. Image-Based Buttons Watch the video Advanced styles Works everywhere ✔

  66. Bulletproof Buttons Watch the video Advanced styles Works everywhere ✔

  67. #heweb17 buttons.cm

  68. #heweb17 <div><!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650"

    fill="t"> <v:fill type="tile" src="https://i.imgur.com/0xPEf.gif" color="#556270" /> <w:anchorlock/> <center style="color:#ffffff;font-family:sans-serif;font-size: 13px;font-weight:bold;">Show me the button!</center> </v:roundrect> <![endif]--><a href="https://" style="background-color:#556270;background-image:url(https://i.imgur.com/ 0xPEf.gif);border:1px solid #1e3650;border-radius: 4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size: 13px;font-weight:bold;line-height:40px;text-align:center;text- decoration:none;width:200px;-webkit-text-size-adjust:none;mso- hide:all;">Show me the button!</a></div>
  69. Border-Based Button Uses CSS on the link tag Wrap in

    its own table Keep it as its own module
  70. None
  71. None
  72. Let's put it all together: Example 1 06-bulletproof-buttons.html

  73. Images

  74. <img> src, width, border <img src="http://path.com/img.png" width="600" border="0">

  75. None
  76. <img> src, width, border, alt <img src="http://path.com/img.png" width="600" alt="Product Updates"

    border="0">
  77. <img> src, width, border, alt, color, font-family, font-size <img src="http://path.com/img.png"

    width="600" alt="Product Updates" style="color: #333333; font-family: sans-serif; font- size: 18px;" border="0">
  78. <img> src, width, border, alt, color, font-family, font-size, display <img

    src="http://path.com/img.png" width="600" alt="Product Updates" style="color: #333333; display: block; font-family: sans-serif; font-size: 18px;" border="0">
  79. Let's make them responsive by default…

  80. <img> src, width, border, alt, color, font-family, font-size, display, max-width,

    min-width, width <img src="http://path.com/img.png" width="600" alt="Product Updates" style="color: #333333; display: block; font-family: sans-serif; font-size: 18px; max-width: 100%; min-width: 100px; width: 100%;" border="0">
  81. None
  82. PROS CONS Images look beautiful Larger file sizes Future proofing

    assets Slower load times
  83. Compress Retina Images ImageOptim JPEGmini TinyPNG

  84. Let's put it all together: Example 1 07-images.html

  85. Complex Layouts

  86. Single-Column Easy to implement Fewer things can break Prioritizes content

    Works well across devices
  87. None
  88. None
  89. Keep an eye on Outlook

  90. + = Outlook Math

  91. Let's put it all together: Example 1 08-multiple-columns.html

  92. Exercise

  93. Add to Your Email 1. Add text links 2. Add

    a bulletproof button 3. Add one or two images (make them responsive-by-default) 4. Add a two-column section
  94. How'd it go?

  95. Let’s Take a Break

  96. Understanding Mobile

  97. None
  98. None
  99. None
  100. Three Main Approaches: Mobile Aware Traditional Responsive Hybrid approach

  101. Mobile Aware No additional code Simpler layouts Large text Large

    CTAs Less control
  102. Traditional Responsive CSS media queries Adjusts layout Adjusts styles More

    control
  103. Gmail does not support traditional responsive email templates… yet. ✘

  104. #heweb17

  105. Embedded Styles w/ support for ids, classes, elements + MEDIA

    QUERIES!!!
  106. Hybrid/Spongy Fluid-by-default Constrained widths Outlook hacks No media queries

  107. Traditional Responsive

  108. PRINCIPLES 1 • 2 • 3

  109. 1. Fluid Images Images flow to fill screen size. Already

    have them!
  110. <img> src, width, border, alt, color, font-family, font-size, display, max-width,

    min-width, width <img src="http://path.com/img.png" width="600" alt="Product Updates" style="color: #333333; display: block; font-family: sans-serif; font-size: 18px; max-width: 100%; min-width: 100px; width: 100%;" border="0">
  111. 2. Media Queries Logical switches Target different screen sizes Control

    over layouts
  112. @media screen and (max-width: 600px) { .responsive-table { width: 100%

    !important; } } Rule & media type Expression Conditional styles
  113. 3. Fluid Containers Fixed width becomes fluid Full-width simplifies layouts

    on mobile
  114. Target Using Classes

  115. Adjust in Media Query

  116. Adjusting Styles Text Size Padding Alignment

  117. Let's put it all together: Example 1 09-responsive.html

  118. Exercise

  119. Make Your Email Responsive 1. Add classes to your tables

    & cells for targeting with styles 2. Add a media query for mobile styles 3. Add CSS rules to make your email responsive
  120. How'd it go?

  121. Hybrid / Spongy

  122. Gmail does not support traditional responsive email templates… yet.

  123. PRINCIPLES 1 • 2 • 3

  124. 1. Fluid-by-Default

  125. <table border="0" cellpadding="0" cellspacing="0" width="100%"> 1. Fluid-by-Default

  126. #heweb17 Constraining w/ max-width

  127. <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;"> 1. Constrain With

    CSS
  128. <!--[if (gte mso 9)|(IE)]> <![endif]--> 3. Microsoft Conditionals

  129. 3. Microsoft Conditionals <!--[if (gte mso 9)|(IE)]> <table align="center" border="0"

    cellspacing="0" cellpadding="0" width="600"> <tr> <td align="center" valign="top" width="600"> <![endif]--> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> Fluid, constrained table goes here
  130. Extras

  131. Web Fonts

  132. Font Shop

  133. Litmus

  134. Litmus

  135. Animation

  136. Animated GIFs

  137. #heweb17 Animated GIFs

  138. None
  139. None
  140. CSS Animations

  141. None
  142. Interactivity

  143. Troubleshooting

  144. Email Troubleshooting 101 1. Test your email 2. Check your

    images 3. Check your HTML 4. Ask for help
  145. Test Your Email Step 1

  146. During Development (in browser, in Builder, do test sends (PutsMail))

  147. During Development (in browser, in Builder, do test sends (PutsMail))

  148. None
  149. None
  150. Check Your Images Step 2

  151. None
  152. Relative Path <img src="/img/img.jpg"> Absolute Path <img src="http://example.com/img/img.jpg">

  153. Check the File Name

  154. Check the File Type JPG PNG GIF SVG TIFF

  155. Image not displayed.

  156. Check Your HTML Step 3

  157. Isolate the Problem

  158. Highlight Tables <table cellpadding="0" cellspacing="0" border="1"> <tr> <td></td> </tr> </table>

  159. Remove Other Sections HEADER HERO SECTION CTA BLOCK FOOTER

  160. Reintroduce Components HEADER HERO SECTION CTA BLOCK FOOTER

  161. Modularity FTW HEADER HERO SECTION CTA BLOCK FOOTER

  162. Check Syntax Issues

  163. Common Syntax Issues: 1. Missing tags 2. Incorrect tags &

    values 3. Lack of HTML/CSS support
  164. validator.w3.org

  165. campaignmonitor.com/css

  166. Check the Math

  167. + = Outlook Math

  168. See What Clients are Doing to Your HTML

  169. None
  170. Ask for Help Step 4

  171. litmus.com/community/discussions

  172. Helpful Hashtags: #emaildesign #emailmarketing #emailgeeks #litmuscommunity #litmuslive

  173. email.geeks.chat

  174. Learning More

  175. Workshop reference: Get the slides, code, and extra resources on

    my website: rodriguezcommaj.com/speaking/heweb17
  176. TheBetter.Email thebetter.email/resources

  177. Thank you!