VIDEO 1: BUILDING TEMPLATES IN HUBSPOT

Transcription

1 VIDEO 1: BUILDING TEMPLATES IN HUBSPOT Hello everyone and welcome to class two of the Design Certification. This is Building a World- Class 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 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 . You re going to learn all about and how to design with HubSpot tools. To get things started, let s answer this question, why use HubSpot to build templates in the first place? Continuing with our house building analogy, here s how I like to think about marketing. Building an 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 templates before, you probably know that they can be a little bit tricky, there are lots of ins-and-outs to making sure your s display properly in all different 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 s? Now, don t get us wrong, there are plenty of fantastic 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 s 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, s 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 ]

2 We ve discussed why we d use HubSpot to send s, but why would you use HubSpot to build s? 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 templates. Working in HubSpot s Design Manager you won t have to worry about using age old HTML techniques just to get your s to display properly. All of that knowledge is built right into the product. You just build the 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 clients for a moment. As you may have personally experienced, different clients read and render s in different ways. It can make your work challenging. So first things first, be aware that many 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 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 s from one master stylesheet. Not right now anyway, because those styles aren t going to carry over when a person receives the . 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 clients read s in different ways. At this time, since there are no set standards for how s 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 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 s 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 ]

3 VIDEO 2: HOW TO BUILD EXCEPTIONAL TEMPLATES Alright, let s talk about how to build exceptional 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 templates, let s talk about some best practices for structure. When building an 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 , they are going to notice the image and understand the image and in turn, what the 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 , 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 clients do not load images by default. Ask yourself, does my 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 , 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 . Best case scenario, they re just going to delete it or worse, they will report the as SPAM, which is definitely not something that we want to have happen. While we re on the topic, your 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 doesn t include this information, you are technically breaking the law. If your recipients cannot understand where the 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 ]

4 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 template when you attempt to save your design. Pro tip: here s an easy thing that you can add to your templates that many HubSpot users ask for. Create a custom module for signatures. This won t work in the same way as a traditional signature. It ll still need to be filled in when writing the content. But, it s pretty simple to set up in the Template Builder and even easier for the person writing the to fill in. An signature can have a positive effect on the recipient. With a signature, the 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 or perhaps engage with the sender, since the has a personal touch. We talk a lot about the importance of testing these days, and s are no exception. Open your test s 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 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 opens have grown 180% in three years. And that number just keeps going up. 67% of all is opened on a mobile device as of That is amazing! If we re not optimizing our s for mobile, then that means that the majority of recipients are not going to be able to read our content potentially. Since clients will read code and render s in a different way, responsiveness in an 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. s behave a little differently. If you ve ever created an template before, you might have used tables in order to preserve a complex layout across numerous clients. Responsiveness is built in to HubSpot templates. Without getting technical, it just works when you add modules to the template builder and omit the usage of tables in your template. When images are turned off in an client, how is our 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 ]

5 In order to preserve the design layout when images are blocked in an 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 , you may preview the 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 , is how many columns are added to an . In short, if an is cluttered-looking than the recipient might experience an information overload and not read the . When designing an layout, the fewer number of columns you can use, the more control you ll have over the rendering across different platforms and 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 format. Keep in mind the purpose of the and that links and buttons can get readers from the 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 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 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 from Content Settings. In a more advanced scenario, including some specific HubL tags can pull from the section of Content Settings, so that the 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 consistent. If you are looking to spice up your s a little bit, you can try using an animated gif. Adding a gif to your 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 s. I d recommend using an animated gif to add a little intrigue to your 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 in order to make progress with your marketing efforts. A way to encourage the end user, or the person who uses [ 5 ]

6 the template, is to drop in a simple call to action module. In effect when they create an 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 s and the template is being used as you intended. Since s 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 is created automatically. To enable this, it s just a flip of a switch in the options section of the draft. When creating an template, you can drop in a social sharing module or add a HubL tag for coded templates. When an * 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 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 , 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 and personalizing them as if the 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 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 s on an actual mobile device or tablet, if possible. The US Consumer Device Preference Report shows that 67% of all s are opened on a mobile device, predominantly, on an iphone. In fact, 41% of s are opened on an iphone. Equally as notable, 17% of opened s are opened on a tablet. This means that it s highly likely that your will be viewed on mobile, so be sure that your design looks the way that you had expected. [ 6 ]

7 Also, it should be noted that there are some industries that heavily use Outlook as their mail client. A large percentage of s 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 after you ve created your template and using the preview button in the bottom right to preview the 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 . The guide specifically covers style elements rendering in Outlook. You may find the CSS Guide listed in the resources section of this page. [ 7 ]