How to make your Hubspot Email Templates responsive?

By September 12, 2018Hubspot

Email is a personalized and vibrant way to connect with people. Do you even know anyone who doesn’t have an email address? To users who do not entertain marketing across social media, this is more friendly since it is a personalized way of reaching out to your potential customers. We build cross-device friendly emails with utmost customizability. Hubspot Email Templates like Newsletter, Welcome, Offer, Invitations are a great way to keep in touch with your customers.

Building a Hubspot Email Template is easier but making it responsive across all clients like Outlook, Gmail, iOS, Lotus isn’t. In order to build a bullet-proof email, you need to keep in mind the support of CSS styles in Email. For example, Outlook doesn’t support Background Image and External Font.

How to make efficient use of Hubspot COS for responsive Email Templates?

1) Check https://www.campaignmonitor.com/css/ to see how the style is interpreted across different clients

Email CSS guide gives you brief insights on client’s support for various CSS. This helps you figure out why your email isn’t showing up the unsupported css. When you implement emails with the best CSS practice, you will have a beautiful and responsive email which wouldn’t suprise you in a bad way!

2) Follow <table> structure for ensuring consistency

<table> is the most preferred way of coding emails since emails follows age-old html techniques and doesn’t support the modern browser styles yet. When you use <table>, you will have email responsive across all clients compared to any other coding techniques.

3) Make columns responsive for mobile

Two Column and Three Column structure is perfect for desktop but not for smaller screens. For smaller screens, we have to make it single column to increase the readability and structure.

Email

4) Always give a fallback style when using unsupported CSS.

When a particular email doesn’t support a particular css property, it takes another supported value. If a client doesn’t support external font typekit then you can go for a safe callback like font-family: ‘Open Sans’, arial, sans-serif; Now, when Open Sans isn’t supported, it falls back to Arial. Add a background-color when using background-image. When clients don’t support background-image property, it falls back to background color.

5) Use Hubspot’s Inline Style rule for adding styles for all elements like h1-h6, p to avoid giving inline styling for each individual element

In order to ensure the elements look consistent throughout the email and to avoid the time writing inline styles to each element, you can make use of Hubspot Inline Style rule which adds the styling to all elements as specified.

6) Use Outlook Specific code to ensure it has consistent padding

Normal anchor links with padding, width, and height isn’t supported for Outlook. Outlook specific code has to given to avoid inconsistency.

If you want a helping hand in crafting out best responsive Hubspot Email Templates, feel free to reach out to us at support@psdtohubspot.com .

psdtohubspot

Author psdtohubspot

More posts by psdtohubspot

Leave a Reply