CMS Development

gpiana
Participant

Email looks different in email client

Hello,

 

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?

 

Thank you in advance!

 

Giovanni

0 Upvotes
4 Replies 4
Stephanie-OG
Key Advisor

Email looks different in email client

Hi Giovanni, 

 

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.

 

Stephanie

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

0 Upvotes
gpiana
Participant

Email looks different in email client

Hi Stephanie,

 

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

 

Thanks for looking into it!

 

Giovanni

0 Upvotes
Stephanie-OG
Key Advisor

Email looks different in email client

Hi Giovanni,

 

In order to troubleshoot we would need to see the actual HTML/CSS for the email. 

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

0 Upvotes
gpiana
Participant

Email looks different in email client

Hi Stephanie,

 

I'm sorry, please find the coding below:

> gives less white space between this module and the module below

<a class="MPED_defaultCursor" style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; color: #909090; font-size: 12px; text-decoration: none;" href="flexlink:openhtml">{% inline_rich_text field="richtext_field" value="{{ module.richtext_field }}" %}

 

> text is aligned left, while it should be aligned right

<a class="MPED_defaultCursor" style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; color: #909090; font-size: 12px; text-align: right; text-decoration: none;" href="flexlink:openhtml">{% inline_rich_text field="richtext_field" value="{{ module.richtext_field }}" %}

 

> font differs

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td class="mFlexPadding1" style="padding: 26px 0px 26px;" align="center" valign="top">
<table class="mWidth100" style="width: 540px;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="nb_groot_kop" style="font-family: 'Arial Black', Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 40px; color: #0c0c0d; font-weight: bold; line-height: 42px;" align="left" valign="top">{% inline_rich_text field="richtext_field" value="{{ module.richtext_field }}" %}</td>
</tr>
<tr>
<td style="line-height: 0px; margin: 0px; font-size: 0px;" align="left"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

 

> words are shown below instead of next to each other

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-bottom: 20px;" align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="line-height: 0px; margin: 0px; font-size: 0px;"><a class="" rel="noopener noreferrer" href="http://www.vescom.com/" target="_blank"><img style="display: block; font-family: 'Arial Black', Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 40px; color: #0c0c0d; font-weight: bold; text-transform: uppercase; line-height: 42px;" src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/logo.gif" border="0" alt="Vescom" width="209" height="46" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="mPaddingbottom" style="padding-bottom: 24px;" align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table class="mWidth100" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td class="mPaddingbottom" align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="line-height: 0px; margin: 0px; font-size: 0px;"><a rel="noopener noreferrer" href="http://www.vescom.com/wallcovering" target="_blank"><img style="display: block; font-family: 'Arial Black', Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 16px; color: #b7b7b8; font-weight: bold; line-height: 16px;" src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/wallcovering.gif" border="0" alt="wallcovering" width="108" height="19" /></a></td>
</tr>
</tbody>
</table>
</td>
<td class="mHide" style="width: 17px; line-height: 0px; margin: 0px;"><img src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/1.gif" border="0" alt="" width="1" height="1" /></td>
</tr>
</tbody>
</table>
<!-- CONCOMMENT2 -->
<table class="mWidth100" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td class="mPaddingbottom" align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="line-height: 0px; margin: 0px; font-size: 0px;"><a class="" rel="noopener noreferrer" href="http://www.vescom.com/upholstery" target="_blank"><img style="display: block; font-family: 'Arial Black', Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 16px; color: #b7b7b8; font-weight: bold; line-height: 16px;" src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/upholstery.gif" border="0" alt="upholstery" width="89" height="19" /></a></td>
</tr>
</tbody>
</table>
</td>
<td class="mHide" style="width: 17px; line-height: 0px; margin: 0px;"><img src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/1.gif" border="0" alt="" width="1" height="1" /></td>
</tr>
</tbody>
</table>
<!-- CONCOMMENT3 -->
<table class="mWidth100" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="line-height: 0px; margin: 0px; font-size: 0px; height: 19px;"><a class="" rel="noopener noreferrer" href="http://www.vescom.com/curtain" target="_blank"><img style="display: block; font-family: 'Arial Black', Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 16px; color: #b7b7b8; font-weight: bold; line-height: 16px;" src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/curtain.gif" border="0" alt="curtain" width="57" height="15" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

 

> text blocks are shown below instead of next to each other, logo is not aligned correctly

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table class="mWidth100" style="width: 140px;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td class="mPaddingbottom1" align="left" valign="top">
<table class="mWidth100" style="width: 130px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="nb_btm_kop" style="font-family: 'Arial Black', Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; font-weight: bold; padding-bottom: 6px; line-height: 18px;" align="left">links</td>
</tr>
<tr>
<td class="nb_btm_tekst" style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; line-height: 18px;" align="left" valign="top"><a style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; text-decoration: underline;" href="{{ unsubscribe_link }}">email preferences</a></td>
</tr>
<tr>
<td class="nb_btm_tekst" style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; line-height: 18px;" align="left" valign="top"><a style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; text-decoration: underline;" href="{{ unsubscribe_link_all }}">unsubscribe from all</a></td>
</tr>
</tbody>
</table>
</td>
<td class="mHide" style="width: 10px; line-height: 0px; margin: 0px;"><img src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/1.gif" border="0" alt="" width="1" height="1" /></td>
</tr>
</tbody>
</table>
<!-- CONCOMMENT6 -->
<table class="mWidth100" style="width: 140px;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td class="mPaddingbottom1" align="left" valign="top">
<table class="mWidth100" style="width: 130px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="nb_btm_kop" style="font-family: 'Arial Black', Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; font-weight: bold; padding-bottom: 6px; line-height: 18px;" align="left">contact</td>
</tr>
<tr>
<td class="nb_btm_tekst1" style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; line-height: 18px;" align="left" valign="top"><a style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; text-decoration: none;" >{{ site_settings.company_name }} </a></td>
</tr>
<tr>
<td class="nb_btm_tekst1" style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; line-height: 18px;" align="left" valign="top"><a style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; text-decoration: none;" >{{ site_settings.company_street_address_1 }} </a></td>
</tr>
<tr>
<td class="nb_btm_tekst1" style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; line-height: 18px;" align="left" valign="top"><a style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; text-decoration: none;" > {{ site_settings.company_city }} {{ site_settings.company_state }}</a></td>
</tr>
<tr>
<td class="nb_btm_tekst1" style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; line-height: 18px;" align="left" valign="top"><a style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; text-decoration: none;" >{{ site_settings.company_zip }}</a></td>
</tr>
<tr>
<td class="nb_btm_tekst1" style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; line-height: 18px;" align="left" valign="top">t <a style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; text-decoration: none;" href="tel:+31493315833">+31 (0)493 315 833</a></td>
</tr>
<tr>
<td class="nb_btm_tekst" style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; line-height: 18px;" align="left" valign="top"><a style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; text-decoration: underline;" href="mailto:sales@vescom.com">sales@vescom.com</a><br /> <a style="font-family: Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; text-decoration: underline;" rel="noopener noreferrer" href="http://www.vescom.com/" target="_blank">www.vescom.com</a></td>
</tr>
</tbody>
</table>
</td>
<td class="mHide" style="width: 10px; line-height: 0px; margin: 0px;"><img src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/1.gif" border="0" alt="" width="1" height="1" /></td>
</tr>
</tbody>
</table>
<!-- CONCOMMENT7 -->
<table class="mWidth100" style="width: 260px;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td class="nb_btm_kop" style="font-family: 'Arial Black', Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 13px; color: #5c5a5d; font-weight: bold; padding-bottom: 11px; line-height: 18px;" align="left">follow Vescom</td>
</tr>
<tr>
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 25px; line-height: 0px; margin: 0px; font-size: 0px;"><a rel="noopener noreferrer" href="http://CT-facebook-15242-www.facebook.com/pages/Vescom-BV/164189526966594" target="_blank"><img style="display: block;" src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/f_facebook.gif" border="0" alt="Facebook" width="25" height="25" /></a></td>
<td style="width: 8px; margin: 0px; line-height: 0px; font-size: 0px;">&nbsp;</td>
<td style="width: 25px; line-height: 0px; margin: 0px; font-size: 0px;"><a rel="noopener noreferrer" href="https://CT-twitter-14662-twitter.com/vescom" target="_blank"><img style="display: block;" src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/f_twitter.gif" border="0" alt="Twitter" width="25" height="25" /></a></td>
<td style="width: 8px; margin: 0px; line-height: 0px; font-size: 0px;">&nbsp;</td>
<td style="width: 25px; line-height: 0px; margin: 0px; font-size: 0px;"><a class="" rel="noopener noreferrer" href="http://CT-linkedin-5753-www.linkedin.com/company/vescom-b-v-" target="_blank"><img style="display: block;" src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/f_linkedin.gif" border="0" alt="Linkedin" width="25" height="25" /></a></td>
<td style="width: 8px; margin: 0px; line-height: 0px; font-size: 0px;">&nbsp;</td>
<td style="width: 25px; line-height: 0px; margin: 0px; font-size: 0px;"><a class="" rel="noopener noreferrer" href="http://CT-pinterest-66148-pinterest.com/vescombv/" target="_blank"><img style="display: block;" src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/f_pinterest.gif" border="0" alt="Pinterest" width="25" height="25" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="mFtrPadding" style="padding: 82px 0px 48px;" align="right" valign="top">
<table class="mWidth100" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="line-height: 0px; margin: 0px; font-size: 0px;"><a rel="noopener noreferrer" href="http://CT-footer%20logo-75799-www.vescom.com/" target="_blank"><img style="display: block; font-family: 'Arial Black', Arial, Helvetica, 'Helvetica Neue', sans-serif; font-size: 30px; color: #d1d2d3; font-weight: bold; text-transform: uppercase; line-height: 32px;" src="http://images.m8.mailplus.nl/ts/vescom/Vescom_2015_nieuwsbrief/images/logo_footer.gif" border="0" alt="Vescom" width="139" height="30" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

 

Hope this helps.

 

Best,

 

Giovanni

0 Upvotes