VIDEO 1: BUILDING EMAIL TEMPLATES IN HUBSPOT Hello everyone and welcome to class two of the Design Certification. This is Building a World- Class Email Template. Once again, this is Angela Hicks, your instructor speaking, for those of you who are big twitter users, you may reach out to me at angela_9 or through the HubSpot Designer Forum. If you have not taken the introductory Template Builder class, the first class in the certification, I d recommend that you take some time to do so first. You may feel a little bit lost without some of the information that we cover in that class and it s going to give you a really good basis to build off of. Lastly, if you d like to dig deeper into developing great email templates after watching this class, you ll find some linked resources on this page to help you further your learning. Let s start learning about email. You re going to learn all about email and how to design with HubSpot tools. To get things started, let s answer this question, why use HubSpot to build email templates in the first place? Continuing with our house building analogy, here s how I like to think about email marketing. Building an email with other tools, non-hubspot tools in other words, is a bit like building a house without using any screws. Yes, it will look like a house, but in the end it might fall apart. If you ve ever worked with email templates before, you probably know that they can be a little bit tricky, there are lots of ins-and-outs to making sure your emails display properly in all different email clients and on different devices. What s great about our COS platform, about doing this in HubSpot, is that it takes care of a lot of that for you and will save you a lot of time. It s also worth asking the question, why use HubSpot to send emails? Now, don t get us wrong, there are plenty of fantastic email tools out there, but we also feel that they suffer a little bit when it comes to closing the loop. Once you ve sent those emails and gathered analytics, how do you transfer that information into your Contacts database? Most likely a data export and an import, which isn t always a smooth transition. When we do this same process in HubSpot, emails that are sent have the analytics and contact information stored in HubSpot automatically. Since everything is kept within that same ecosystem it s easy to develop further marketing efforts because of it. [ 1 ]
We ve discussed why we d use HubSpot to send emails, but why would you use HubSpot to build emails? Just like with web page templates, the answer is pretty simple. It s a lot faster than writing code and it keeps you from having to do all of the complex things that are necessary for building email templates. Working in HubSpot s Design Manager you won t have to worry about using age old HTML techniques just to get your emails to display properly. All of that knowledge is built right into the product. You just build the email the way you want it to look and know that it s just going to work. Let s take a step back and talk about email clients for a moment. As you may have personally experienced, different email clients read and render emails in different ways. It can make your work challenging. So first things first, be aware that many email clients prevent automatic image loading. Keep this in mind, especially if you are building a template that is image heavy. What will they see if they don t see that image? We ll talk about this a little later. Secondly, most email clients ignore linked stylesheets, which is why we will use inline styling on our modules for best results. Unlike web pages, you can t style all of your emails from one master stylesheet. Not right now anyway, because those styles aren t going to carry over when a person receives the email. We ll be going through this in the live demo in a little bit, talking about how you can style these modules inline. Also, common elements like floating DIVs, image backgrounds, or even basic text formatting can produce weird looking results. Again, this is because different email clients read emails in different ways. At this time, since there are no set standards for how emails are displayed, we recommended doing some thorough template testing either by using the built-in device previews in HubSpot or using a test site like litmus.com. And truly, the best way to see how the email displays is on the actual device or in a specific mail client. So it s highly recommended to test in the real environment when possible. Thorough testing is really the only good way to know exactly how your emails are going to be displayed. So make a little time to do that during the design process, and it ll save you a lot of troubleshooting time in the future. [ 2 ]
VIDEO 2: HOW TO BUILD EXCEPTIONAL EMAIL TEMPLATES Alright, let s talk about how to build exceptional email templates with our operative word being exceptional here. I ve broken this section down into two parts: first we ll discuss best practices for structure, talking specifically about design, and then we ll shift our focus to marketing and talk through those best practices. To get prepared to build exceptional email templates, let s talk about some best practices for structure. When building an email template, it s recommended to include space for a relevant image. Due to a study conducted by 3M, we now know that the brain processes visual content sixty thousand times faster than text. If a person opens your email, they are going to notice the image and understand the image and in turn, what the email s about before they ve even read a single line of text. That s a pretty important detail to keep at the top-of-mind. When a person opens your email, their journey starts with an image, so what are you telling them there that will encourage them to continue to read your content? On the other hand, non-image content is pretty important as well. Some email clients do not load images by default. Ask yourself, does my email layout still look visually engaging even without the images? I think this is a good example. Even when the pictures are blurred out, there s still a visual hierarchy to it. I can see what the headlines are, the links stand out on the email, and the text is still highly readable. If we go overboard and only have content in images, someone who s not displaying images will see this as a completely blank email. Best case scenario, they re just going to delete it or worse, they will report the email as SPAM, which is definitely not something that we want to have happen. While we re on the topic, your email template must have CAN-SPAM and unsubscribe links. This is pretty easily done with our tools, because there s a module that will set it up for you, but keep in mind that if your email doesn t include this information, you are technically breaking the law. If your email recipients cannot understand where the email is coming from and can t figure out how to unsubscribe, they will be pretty upset and possibly issue a spam complaint, which will hurt your progress as a marketer. [ 3 ]
But don t worry, if you forget to add the module or write the necessary code, the Template Builder will remind you to add them to your email template when you attempt to save your design. Pro tip: here s an easy thing that you can add to your email templates that many HubSpot users ask for. Create a custom module for email signatures. This won t work in the same way as a traditional signature. It ll still need to be filled in when writing the email content. But, it s pretty simple to set up in the Template Builder and even easier for the person writing the email to fill in. An email signature can have a positive effect on the email recipient. With a signature, the email will feel a lot less robotic and more personable, even if it was sent to five thousand people. They are more likely to read the email or perhaps engage with the sender, since the email has a personal touch. We talk a lot about the importance of testing these days, and emails are no exception. Open your test emails on an actual mobile device if you can. Online tools for emulation are great, but honestly nothing is as good as trying it out on an actual smartphone. Not only will this help you to determine that your email template looks good, but also that it s highly useable at a smaller screen size as well. Ask yourself the big questions like, does the logo work on a smaller screen? Is the text legible? Does it scale and zoom properly? If you include a call-to-action, is it functional? Can you press it at this size? And do the images display correctly and at a reasonable size? Mobile email opens have grown 180% in three years. And that number just keeps going up. 67% of all email is opened on a mobile device as of 2015. That is amazing! If we re not optimizing our emails for mobile, then that means that the majority of recipients are not going to be able to read our content potentially. Since email clients will read code and render emails in a different way, responsiveness in an email is slightly different than a web page. As many of you may have experienced while browsing the web, elements on a page will stack whenever the viewport is smaller or the browser window is resized. Emails behave a little differently. If you ve ever created an email template before, you might have used tables in order to preserve a complex layout across numerous email clients. Responsiveness is built in to HubSpot email templates. Without getting technical, it just works when you add modules to the template builder and omit the usage of tables in your email template. When images are turned off in an email client, how is our email layout going to look without the image? Does the layout look empty? Let s take a look at it with background colors applied to the image modules. [ 4 ]
In order to preserve the design layout when images are blocked in an email client, you might want to use this tactic. In some cases, it may be better to have some sort of design element such as a background color, or gradient in this case, rather than an empty, gaping space. I wouldn t recommend spending too much time working on this, but you still may want to explore adding a background color. Don t forget that when you are drafting an email, you may preview the email in a variety of mail clients and simulate turning off the images. The last thing that I d like to discuss when it comes to the structure of an email, is how many columns are added to an email. In short, if an email is cluttered-looking than the recipient might experience an information overload and not read the email. When designing an email layout, the fewer number of columns you can use, the more control you ll have over the email rendering across different platforms and email clients. When possible, just use a single column. If the design is complex and communicating lots of information, ask yourself if all of that information needs to be communicated in an email format. Keep in mind the purpose of the email and that links and buttons can get readers from the email to a webpage or landing page. Let s change our focus to think about marketing. Even if this isn t your primary focus and you never create the actual email content, these are some things that you ll want to keep in mind in order to make sure that the marketer or your template user is successful. One of the best ways to make an email template easy-to-use is to provide opportunities for branding. An easy way to do this is by using a logo module in your template, so that the logo is automatically brought into the email from Content Settings. In a more advanced scenario, including some specific HubL tags can pull from the Email section of Content Settings, so that the email can bring in the defined colors and font choices. Try taking advantage of the logo module or using HubL tags in order to keep the look and feel of each email consistent. If you are looking to spice up your emails a little bit, you can try using an animated gif. Adding a gif to your email is accomplished in the same way as any other image. You may add gifs to a rich text module, an image module, or write in HTML to add a gif, just like any other image format that you d add. When adding animation, don t go overboard. Less is more when you use animation in emails. I d recommend using an animated gif to add a little intrigue to your email or to explain a complex, lengthy concept in a concise way in a couple of seconds. Generally speaking we also recommend including a call-to-action in every email in order to make progress with your marketing efforts. A way to encourage the end user, or the person who uses [ 5 ]
the template, is to drop in a simple call to action module. In effect when they create an email to send, it s going to ask them for a call-to-action in that spot and it ll look a little empty without it. This way, you can ensure that CTAs are included in emails and the template is being used as you intended. Since emails can also exist as standalone web pages, you can use social sharing modules to enable readers to share. The standalone web page version of the email is created automatically. To enable this, it s just a flip of a switch in the options section of the email draft. When creating an email template, you can drop in a social sharing module or add a HubL tag for coded email templates. When an *email recipient* clicks on a social button, they will share the web version across *their* social networks, which in turn, can increase your reach without you lifting a finger. One more tip, when you are designing an email template that is going to be used by anyone other than you, I d recommend adding some default text that describes the intention of each section of the template. When filling out the default content for the modules in your email, we would recommend using, or at least suggesting, the use of Personalization Tokens. Personalization tokens are a smart feature that help to automatically bring in contact information into the email and personalizing them as if the email was written exclusively for the recipient. As a result, when content is personalized, it is much more likely that someone will read it. However, don t use these everywhere. If you want to learn how to do this really well, check out the Contextual Marketing Certification after you finish this course. Ultimately, you re aiming for your template users to be able to understand your vision and make their email look the way that you had intended it. I think this is a great example that we have here. The template describes not only where to place the banner image, but also how tall and how wide the image should be. You ll also see that there are instructions in the left sidebar, reminding the users what kind of content should go here. The goal is to create an easy, fill-in-the-blank experience that has enough instruction on the template itself, so that it doesn t need any further clarification. I mentioned this before, but it s worth repeating. Test your emails on an actual mobile device or tablet, if possible. The US Consumer Device Preference Report shows that 67% of all emails are opened on a mobile device, predominantly, on an iphone. In fact, 41% of emails are opened on an iphone. Equally as notable, 17% of opened emails are opened on a tablet. This means that it s highly likely that your email will be viewed on mobile, so be sure that your design looks the way that you had expected. [ 6 ]
Also, it should be noted that there are some industries that heavily use Outlook as their mail client. A large percentage of emails opened on desktop are opened in Outlook. As you may know, Outlook has specific CSS rules for things that do and do not render in Outlook I ve listed a couple of style elements that do not render such as: background image, font-face, max-width and border color. I d recommend drafting an email after you ve created your template and using the preview button in the bottom right to preview the email in Outlook if you don t have access to Outlook, otherwise take a look in Outlook. If you want to read more about which CSS rules work, CampaignMonitor has put together a wonderful compatibility guide to CSS in Email. The guide specifically covers style elements rendering in Outlook. You may find the CSS Guide listed in the resources section of this page. [ 7 ]