aberrant Read more button size and font in Outlook desktop

Hi @willemb2,

There is a known issue with buttons in some Outlook versions, it seems like you are affected by it.

More details here: https://kb.mailpoet.com/article/186-known-issues-in-email-rendering

If you are affected by the above, what you can do is to try?to have a short line in the button and set the width to be wide. Like what you currently have.

For the font, you can learn about what you can use here: https://kb.mailpoet.com/article/176-which-fonts-can-be-used-in-mailpoet

I hope this helps!

Hello @battouly,

Thank you for pointing me to that article. But our button already has a very short labe line: ‘Lees verder’ (= read on). It also looks like MailPoet is already trying to address Outlooks’ rendering issues because there are <!–[if mso]> tags all over in the emails source code (see below). But in this case it doesn’t result in the desired effect. If I try to compensate as the article suggests I get a silly wide button in other clients.

I know Outlook is a lousy email renderer. But around 30% of our readers is using it.

<td class="mailpoet_button-container" style="border-collapse:collapse;text-align:right"><!--[if mso]>
                  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
                    
                    style="height:36px;
                           width:130px;
                           v-text-anchor:middle;"
                    arcsize="14%"
                    strokeweight="0px"
                    strokecolor="#0074a2"
                    fillcolor="#1b1498">
                  <w:anchorlock/>
                  <center style="color:#ffffff;
                    font-family:Verdana;
                    font-size:16px;
                    font-weight:bold;">Lees verder
                  </center>
                  </v:roundrect>
                  <![endif]-->
                  <!--[if !mso]><!-- -->
                  <a class="mailpoet_button"  style="color:#ffffff;text-decoration:none;display:inline-block;-webkit-text-size-adjust:none;mso-hide:all;text-align:center;background-color:#1b1498;border-color:#0074a2;border-width:0px;border-radius:5px;border-style:solid;width:130px;line-height:36px;font-family:Verdana, Geneva, sans-serif;font-size:16px;font-weight:normal"> Lees verder</a>
                  <!--<![endif]-->
                </td>

Hello @willemb2,

Thank you for providing more details.

Outlook can indeed be challenging when it comes to email rendering and we have noticed the same for MailPoet. Although you’ve already tried the suggestions from the article I shared, I recommend experimenting with different button widths and fonts to find a balance that works for both Outlook and other email clients.

Also, have you considered using alternative fallbacks for the button in Outlook? For example, you could include a plain text link or an HTML link styled as a button. This type of fallback ensures that even if the button doesn’t render properly in Outlook, your readers will still have a clear call-to-action.

Best,