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.

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
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
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>
38. Modularity + + =
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
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
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
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">
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">
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
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
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
140. CSS Animations
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))
150. Check Your Images Step 2
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
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!