Professor: Angela Hicks

Size: px

Start display at page:

Download "Professor: Angela Hicks"

Laurel Edith Fox
5 years ago
Views:

CLASS 02 Building a World-Class Email Template Professor: Angela

1 CLASS 02 Building a World-Class Template Professor: Angela Hicks HubSpot Design Certification Brought to you by HubSpot Academy

2 Angela inbound.org/group/ hubspot-designer-forum

3 Before we begin, have you taken our introductory Template Builder class? You might feel lost without it.

4 1 WHY USE HUBSPOT TO BUILD TEMPLATES?

FLICKR USER JONATHANCOHEN Building an email in other tools is like building

5 FLICKR USER JONATHANCOHEN Building an in other tools is like building a house without screws. It will look like a house, but it might fall apart.

6 Why use HubSpot to send s? s that are sent have the analytics and contact information stored in HubSpot automatically.

7 Why use HubSpot to build s? 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.

8 DESIGN LIMITATIONS OF IN GENERAL Many clients prevent automatic image loading. Most clients ignore linked CSS stylesheets. Modules must be styled inline for best results. Floating DIVs, image backgrounds, and even basic text formatting can produce strange results There are currently no set standards for how s are displayed for your reader. We recommend thorough testing, particularly on a site such as litmus.com.

9 2 HOW DO YOU BUILD EXCEPTIONAL TEMPLATES?

10 BEST PRACTICES FOR STRUCTURE

11 Include space for a relevant image. According to 3M, our brains process visual content and imagery 60,000 times faster than text.

12 Non-image content is equally important. If the recipient isn t displaying images, what do they see? Does the still look visually engaging?

13 Use CAN-SPAM and unsubscribe links. Not only is it the law, but you cannot create a template without them.

14 Create a module for signatures. An signature can have a positive effect on the recipient.

15 Test on a mobile device. 67% of is now opened on a mobile device. Does the logo work on a smaller screen? Is the text legible? Does it zoom properly? Do images display correctly? Is the Call-to-Action functional? SOURCE: US CONSUMER DEVICE PREFERENCE REPORT Q4 2013

16 Responsiveness is built-in to HubSpot templates.

17 Apply background colors to image modules. The background color will load, even in clients that have been configured to not load images.

18 Apply background colors to image modules. The background color will load, even in clients that have been configured to not load images.

19 The fewer the columns, the better. Stick to one. Remember the s purpose when designing the layout. A complex design might be better suited as a webpage.

20 BEST PRACTICES FOR MARKETING

21 Provide opportunities for branding. Does your template automatically use the user s color settings? Company info? User s settings Dynamic HubL tags used in styling or default text

22 Try using an animated GIF for added intrigue or to illustrate a complex idea. GIFs can be placed into a rich text module, image module, or added in HTML, just like any other image.

23 Guide CTA placement with modules. Provide your users with a fill-in-the-blank experience, to boost lead generation.

24 Enable social sharing. Since s can also exist as standalone web pages, you can use social sharing modules to enable readers to share.

25 Use or suggest Personalization Tokens. Personalization tokens can pull information from the end user s Contacts database, generating copy that feels like it was written just for them.

26 Set default text that describes intention. You won t be there to help guide your users through your templates. Setting default text that describes your vision will help them use it successfully.

27 Test your on a smartphone or tablet. s Opened: 67% are opened on a mobile device. 41% are opened on an iphone. 17% are opened on a tablet. SOURCE: US CONSUMER DEVICE PREFERENCE REPORT Q4 2013

28 Outlook has specific CSS rules. Does not render: max-width border-color It s recommended to view s in the Preview while drafting the .

29 3 BUILDING AN TEMPLATE IN HUBSPOT

30 LIVE DEMO.

31 THANK YOU.

Kyle #HubSpotting

Kyle #HubSpotting /0/3 INTERMEDIATE. AN INTRODUCTION TO BUILDING TEMPLATES WITH THE COS Kyle Geiste @kylegeiste #HubSpotting If you plan on creating templates to sell in the HubSpot Marketplace, or do not currently have