Episode 2 of the HubSpot Community Developer Show: Email with Alyssa Wilie

dennisedson
Community Manager

Hello Community

Episode 1, Accessibility with Jon Sasala is in the bag! Now it is time to wind up episode 2.

This month, we will be talking about email development. If you saw the words email and development in the same sentence and ran away, I fully understand.

But fear not! This month we are joined by a guest who is an expert in all things email!

@amwilie  is a web developer at Lynton Web and has been code slinging for the past 15 years. She has been an active and prolific member of the Community Champions.
Heck, she was even featured in the Humans of HubSpot series.  If you have a question, she is going to work to help you get it answered.

Not only is Alyssa joining me, but @jmclaren  will be returning to this second episode! Let me tell you, Jon likes a good email challenge.

Wait wait, there's more! Let me introduce @SNolan ! She is a Tech Lead at HubSpot and is part of the team working on advancing the email tools.

This should be a good conversation and I hope you all drop in some interesting questions.

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
6 Replies 6
amwilie
Key Advisor | Elite Partner

I'm excited to be on the podcast, @dennisedson ! I've been working with HTML emails for several years and know it can be a frustrating environment to code for due to it's limitations, so I'm eager to share my knowledge.

I'm open to answering any questions about coding for email in general. Due to the many email clients not having any universal rendering rules, and web standards support still far behind web, there's a lot of issues one can run into (side-eyeing Outlook over here).

I also have plenty to say about email specific HubL and the 3 different avenues Hubspot offers for building email templates:

1. Coded Templates
2. Drag and Drop Templates
3. DnD Email Templates

All 3 of these methods differ in how they work and each have their own pros and cons.

So, would love to hear from ya, Hubspot Community - what questions do you have about coding for email?

border

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

jonchim
Guide | Diamond Partner

Excited for this epi @amwilie @dennisedson !
I'm sure I have a ton of questions about email but here's two

1. Is there a reason we can't use <img> in the rich text field in the DnD editor? I'm sure the workaround would be to create a custom module for the email? but sometimes its quicker to just insert an image between pargraphs, etc. I know the classic editor used to allow you to do that.

2. How would you handle/best practice when it comes to margin/padding so that it's mostly consistent across all email clients? (outlook 👎)






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution
amwilie
Key Advisor | Elite Partner

Hey @jonchim , thanks for the questions!

 

  1. There's a class set on the image module with CSS to make the images work consistently across clients (I'm sure many have noticed Outlook chopping off images or adding extra space around them when coding their own emails or in the design manager drag and drop templates). This also allows you to add padding around the image so it's not flush against your paragraphs. It's extra work, but it makes for a more consitent look across clients.

  2. I'd say use margin as little as possible, if not at all, as margin is flat out not supported in some Outlook versions and others work inconsistently with the capitalization hack (Margin-top instead of margin-top) .

    Padding on tds (table cells) will be your best bet for consitency. If I have a heading - paragraph - button that need extra space between them I usually place a table around them and split them out into table cells to add padding instead of using margin (with DnD you can replicate this by just using multiple modules instead of throwing it all into one rich text module). You can also use 'spacer' table cells which are just empty cells with a &nbps; inside (for Outlook) with a height or padding on them to create space.

 

Email is, sadly, a lot of extra work due to the inconcistencies between clients 😅

border

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

dennisedson
Community Manager

@Bryantworks , @Josh , @Anton , @webdew , @mike-ward , @piersg , @Kevin-C , @StefaniUAT , @Phil_Vallender , @willsmith 

Curious if there is anything you all would like discussed regarding email. 

PS:  Although we will get into coding an email, we will be discussing email more broadly. 

For example:

  • when to use a coded email instead of a Drag and Drop
  • how do you successfully work with your design team to work within the limits of an email
  • what the heck do we think a good email is.
Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
piersg
Key Advisor

Hi @dennisedson, your first two example questions I'd love to hear more on.

 

I don't really work on emails as a web dev (and I hate them) but I'm sometimes asked to by the marketing team. How does one create an email asset/module library that can be used by others in the drag and drop email builder that is flexible, where elements can be moved around/deleted/added etc., with options to extend their functionality (and how much functionality is possible)? If I can create modules that they can create good looking emails from (which work for the majority of clients), hopefully I won't be asked me to code specific emails!

 

I know some people who use the shortcut of designing an email in MailChimp/other email service and then export it as HTML and load it to Hubspot, and adjust it for HubL. Is this a workflow you've used?

 

What's your favourite/best email you've built (and can I copy it 😉)?

amwilie
Key Advisor | Elite Partner

@piersg 

  • That's a big question that I could talk a lot about so I'll save most of the discussion for the podcast. Really you can create modules exactly as you do for landing pages and websites, just set their module type to Email. Keep in mind the CSS needs to be inline and you're likely gonna have to utilize tables.

    For adding/deleting/moving you can use repeaters in the module and, in DnD templates, users can just add/delete modules as they please.

    What sort of extended functionality are you looking for? At most I've added a bunch of design options to email modules as the template design options don't always translate well into the modules and users may want to use different font sizes, colors, line-heights, etc on a text-by-text basis (they can do this in rich text modules with the WYSIWYG but I find having it right in the module fields is easier so they don't have to change these things every time they put in new text). I also add options for text alignment and layout (say if it's a two column image/text module, I'll give them an option to choose if they want the image on the left or the right). Email is a pretty limited environment so not a lot of exciting stuff you can do that will work across all clients.
  • I've never personally used this workflow. I would think it'd make the email a bit rigid and most the clients I work with want a lot of flexibility. I've also been working with Hubspot email for about 8 years now so I know how to work with it better than any other email service 😅 I do think with DnD this sort of workflow would become obsolete as it's pretty on par with other services.
  • Favorite emails...

    I think complexity wise I'd have to go with one we built for our client TecReview. I worked with our integration developers to create a weekly email that sends users the latest blog posts from a Wordpress blog of just the specific tags they're subscribed to.

    For flexibility I'd go with a recent one I built for a university. I created 11 different modules for use in DnD; including a bullet proof button module, 2 and 3 column modules with image/text, text/image, image/text layouts that all stack image/text on mobile, a custom social follow module, etc.

    Unfortanetly our emails are for client-only so I can't be showing them off, but I have been considering uploading some modules to the Hubspot marketplace in the future.
border

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!