I've made some custom email modules using existing HTML coding. If I compose an email with these modules in the email builder in Hubspot the email looks perfect, however, when opening the email via email clients (I've tested in Outlook 365 and Mail for iOS) it looks different: font changed, spacing is different, text that was in columns is now displayed below one another. Now I observe some email clients change some of the layout. However, we've been using Mailplus before and the same HTML coding led to the exact layout in the email clients as it looks now in the email builder. Can anyone help with this?
Unfortunately not all CSS is supported equally across email clients, making email template development pretty tricky if you're not familiar with the quirks of each one. This link is a handy reference as to what's supported in each client.
If there are any particular aspects of your code which aren't working, I'd recommend posting snippets of the code here and someone might be able to help.
You can also recreate your template using HubSpot's drag-and-drop builder which works relatively well across email clients.
Thanks for the answer. I understand that not all CSS is supported equally, however, if I use the exact same coding in our regular mail program, everything works out fine across platforms. Any idea why this is?
To be specific, here are the snippets of the code that show the discrepancies:
- {% module "module_154321636495463" module_id="4311474" label="a Teaser NL" %} > gives less white space between this module and the module below
- {% module "module_154321650599083" module_id="4311482" label="b Lees online NL" %} > text is aligned left, while it should be aligned right
- {% module "module_154321589423052" module_id="4312292" label="5 Wit - Artikel grote kop" %} > font differs
- {% module "module_154321646378972" module_id="4311524" label="1 Artikel header NL" %} > words are shown below instead of next to each other
- {% module "module_154321656459492" module_id="4311955" label="21 Artikel footer EN incl address" %} > text blocks are shown below instead of next to each other, logo is not aligned correctly