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

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

    Web + Email Geek Product Manager @litmusapp Lurker, Retweeter @rodriguezcommaj Educator at TheBetter.Email
  2. 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
  3. 5.

    Get your code hats on… We’ll be building an email

    with: • Single columns • Multiple columns • Text • Images • Buttons • Responsive styles
  4. 6.

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

    my website: rodriguezcommaj.com/speaking/heweb17
  5. 10.
  6. 11.
  7. 14.

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

    px em style=“” <style> bgcolor background-color padding margin
  8. 15.

    EMAIL DESIGN WEB DESIGN #ffffff #fff rgba hsa individual properties

    shorthand width=“100” width: 100px; align=“left” text-align: left; style=“” <style>
  9. 16.
  10. 20.

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

    width="" cellpadding="" HTML = Structure and Content
  11. 21.

    HTML = Structure and content Rules padding color font-family Values

    20px #999999 sans-serif CSS = Style and Manipulation
  12. 23.
  13. 24.
  14. 25.
  15. 28.
  16. 31.
  17. 35.
  18. 37.
  19. 39.
  20. 44.
  21. 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>
  22. 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>
  23. 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>
  24. 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>
  25. 54.
  26. 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
  27. 59.

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

    <a href=“https://rodriguezcommaj.com“> This is a link. </a>
  28. 62.
  29. 63.
  30. 64.
  31. 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>
  32. 69.

    Border-Based Button Uses CSS on the link tag Wrap in

    its own table Keep it as its own module
  33. 70.
  34. 71.
  35. 73.
  36. 75.
  37. 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">
  38. 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">
  39. 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">
  40. 81.
  41. 87.
  42. 88.
  43. 92.
  44. 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
  45. 97.
  46. 98.
  47. 99.
  48. 104.
  49. 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">
  50. 112.

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

    !important; } } Rule & media type Expression Conditional styles
  51. 118.
  52. 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
  53. 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
  54. 130.
  55. 131.
  56. 132.
  57. 133.
  58. 134.
  59. 135.
  60. 138.
  61. 139.
  62. 141.
  63. 144.

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

    images 3. Check your HTML 4. Ask for help
  64. 148.
  65. 149.
  66. 151.
  67. 163.
  68. 169.
  69. 175.

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

    my website: rodriguezcommaj.com/speaking/heweb17
  70. 177.