With YAMM, you can already send campaigns with a simple template. But you can also choose to create an advanced formatted newsletter using HTML and CSS directly in your Gmail draft. This tutorial will show you how to do it.
stars
Goal
If you are code-savvy, specifically in HTML and CSS, you can directly code your template in your Gmail draft and reuse it with YAMM. When you send your email through YAMM, the tool will re-encode it to display the right formatting and styles you have coded in your draft.
This is useful if you want to use media queries in your Gmail draft to change your template style depending on your screen size. For example, you can insert media queries in your HTML code to display your newsletter in a different way when opened on mobile phones. It is also more convenient to write your code directly in Gmail than in the developer tool, as explained in this article.
What you'll learn
You will learn how to send a mail merge with YAMM using a coded HTML draft saved in Gmail.
timelapse
Time to complete
30 min or more, depending on the complexity of your newsletter's design.
check_circle
Prerequisites
Before beginning this tutorial, you should feel comfortable using HTML and CSS code, and send regular mails with YAMM. If not, please check out our other articles to build simple templates in Gmail.
mode_edit
Running a simple example
In our following example, we are sending invitations to our corporate webinars. The template we will use is entirely coded in HTML and CSS, and the results will appear as shown on the following image:
Note: Thanks to the media queries, the orange and blue colors are reversed when the email is opened from a mobile phone. You can modify the styles to change other elements (like the font size etc.).
To reproduce the same results and send this email template with YAMM, please follow these steps:
1. Activate 'Plain text mode'
The purpose of this is to get rid of any formatting that can cause troubles and overlaps with the HTML code that you'll insert later in this draft:
2. Code your own template in a Gmail draft
Or simply copy the following example code (starting from <html> to </html>), and paste it into your Gmail draft:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<html> <head> <style> .banner-color { background-color: #eb681f; } .title-color { color: #0066cc; } .button-color { background-color: #0066cc; } @media screen and (min-width: 500px) { .banner-color { background-color: #0066cc; } .title-color { color: #eb681f; } .button-color { background-color: #eb681f; } } </style> </head> <body> <div style="background-color:#ececec;padding:0;margin:0 auto;font-weight:200;width:100%!important"> <table align="center" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed;font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center"> <center style="width:100%"> <table bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;max-width:512px;font-weight:200;width:inherit;font-family:Helvetica,Arial,sans-serif" width="512"> <tbody> <tr> <td bgcolor="#F3F3F3" width="100%" style="background-color:#f3f3f3;padding:12px;border-bottom:1px solid #ececec"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;width:100%!important;font-family:Helvetica,Arial,sans-serif;min-width:100%!important" width="100%"> <tbody> <tr> <td align="left" valign="middle" width="50%"><span style="margin:0;color:#4c4c4c;white-space:normal;display:inline-block;text-decoration:none;font-size:12px;line-height:20px">Webinars</span></td> <td valign="middle" width="50%" align="right" style="padding:0 0 0 10px"><span style="margin:0;color:#4c4c4c;white-space:normal;display:inline-block;text-decoration:none;font-size:12px;line-height:20px">Tuesday 14, February 2017</span></td> <td width="1"> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="left"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td width="100%"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center" bgcolor="#8BC34A" style="padding:20px 48px;color:#ffffff" class="banner-color"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center" width="100%"> <h1 style="padding:0;margin:0;color:#ffffff;font-weight:500;font-size:20px;line-height:24px">Invitation to Revevol webinar</h1> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="center" style="padding:20px 0 10px 0"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center" width="100%" style="padding: 0 15px;text-align: justify;color: rgb(76, 76, 76);font-size: 12px;line-height: 18px;"> <h3 style="font-weight: 600; padding: 0px; margin: 0px; font-size: 16px; line-height: 24px; text-align: center;" class="title-color">Hi {{Name}},</h3> <p style="margin: 20px 0 30px 0;font-size: 15px;text-align: center;">Join our webinar to discover our latest release. Places are limited, so <b>register now</b>!</p> <div style="font-weight: 200; text-align: center; margin: 25px;"><a style="padding:0.6em 1em;border-radius:600px;color:#ffffff;font-size:14px;text-decoration:none;font-weight:bold" class="button-color">Join the conference</a></div> </td> </tr> </tbody> </table> </td> </tr> <tr> </tr> <tr> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="left"> <table bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0" style="padding:0 24px;color:#999999;font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center" width="100%"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center" valign="middle" width="100%" style="border-top:1px solid #d9d9d9;padding:12px 0px 20px 0px;text-align:center;color:#4c4c4c;font-weight:200;font-size:12px;line-height:18px">Regards, <br><b>The Awesome Team</b> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="center" width="100%"> <table border="0" cellspacing="0" cellpadding="0" style="font-weight:200;font-family:Helvetica,Arial,sans-serif" width="100%"> <tbody> <tr> <td align="center" style="padding:0 0 8px 0" width="100%"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </center> </td> </tr> </tbody> </table> </div> </body> </html> |
Your draft should look like this:
The hardest part is done! Now all you need to do is to select your template and send it through YAMM.
3. Select your template in YAMM UI and send it to your mailing list
After doing this, your recipients will get the following email:
As you can see, YAMM took your coded email template and replaced it with the right formatting. This feature will let you customize indefinitely your emails! Just make sure to use CSS properties that are supported by Gmail. You'll find the official list here.
Comments
0 comments
Please sign in to leave a comment.