Send responsive emails from Outsytems
Discussion

I just spent a lot of hours on getting Outsystems to send emails that are responsive. Wanted to share some findings to save you a lot of time!

The problem: for the most part Outlook is the problem, we had some a links in emails and sending them to a customer. They reported to us that the links were not visible in Outlook. Outlook does not accept background colours on a links and because the color of the font was white the link was not visible.

For the basis I used the HTML of this page:

https://github.com/leemunroe/responsive-html-email-template/blob/master/email-inlined.html

I tried to build all the tables to Outsystems tables only ran into a problem with the first table that has tree columns. The middle column has a fixed with of 580px this is the holder for all the content and the other two have no width and should make the middle column in the center of the screen. Only when doing this with Outsystems tables the rending on a Iphone is not correct. The email will be rendered just like on a computer and therefore very hard to read. There for I use this part of HTML in an expression.

<table role=""presentation"" border=""0"" cellpadding=""0"" cellspacing=""0"" class=""body"" style=""border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;"">
    <tr>
        <td style=""font-family: sans-serif; font-size: 14px; vertical-align: top;""> </td>
        <td class=""container"" style=""font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;"">
            <!-- START CENTERED WHITE CONTAINER -->

            <!-- END CENTERED WHITE CONTAINER -->
        </td>
        <td style=""font-family: sans-serif; font-size: 14px; vertical-align: top;""> </td>
    </tr>
</table>

When you place div's and tables between the <!-- Start and <!-- End content will be centered really nice.

Also buttons are a bit of a pain in the *, for that I use a web block with html in a expression:

<table role=""presentation"" border=""0"" cellpadding=""0"" cellspacing=""0"" style=""border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"">
                                <tr>
                                    <td style=""font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: "+If(IsPrimary,"#ff7300","#d1d1d1")+"; border-radius: 5px; text-align: center;""> 
<a href="""+EncodeHtml(URL)+""" target=""_blank"" style=""display: inline-block; color: "+If(IsPrimary, "#ffffff", "#7a7a7a")+"; background-color: "+If(IsPrimary,"#ff7300","#d1d1d1")+"; border: solid 1px #d1d1d1; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #d1d1d1"">"+EncodeHtml(Text)+"</a></td></tr></table>

Also find the attached example OML that I added.

Hope this is helping.

EmailContent.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.