Html On Outlook For Android Not Showing Buttons As Expected
I am creating an HTML Email template following the next one: transactional html email templates and in particular: this one. I have inlined my css using zurb foundation inliner, an
Solution 1:
There are a few different ways to add buttons to email using html, you can read more about the best ways here
I used a nested table padding approach which will work for outlook mobile, code below. Please bare in mind that this will only make the actual link clickable and not the whole button.
If you absolutely need the whole button to be clickable, use one of the other methods in the linked page.
<!DOCTYPE HTMLPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headstyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"><metaname="viewport"content="width=device-width"style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"><titlestyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">Alerts e.g. approaching your limit</title></head><bodystyle="-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;height:100%;line-height:1.6;margin:0;padding:0;width:100%!important"><styletype="text/css">@mediaonly screen and (max-width:640px) {
h1,
h2,
h3,
h4 {
font-weight: 600!important;
margin: 20px05px!important;
}
h1 {
font-size: 22px!important;
}
h2 {
font-size: 18px!important;
}
h3 {
font-size: 16px!important;
}
.container {
width: 100%!important;
}
.content,
.content-wrapper {
padding: 10px!important;
}
.invoice {
width: 100%!important;
}
}
</style><tableclass="body-wrap"style="background-color:#f6f6f6;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;width:100%"><tbody><trstyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"><tdstyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td><tdclass="container"style="box-sizing:border-box;clear:both!important;display:block!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto!important;max-width:600px!important;padding:0;vertical-align:top"width="600"><divclass="content"style="box-sizing:border-box;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0 auto;max-width:600px;padding:20px"><tablecellpadding="0"cellspacing="0"class="main"style="background:#fff;border:1px solid #e9e9e9;border-radius:3px;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"width="100%"><tbody><trstyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"><tdclass="alert alert-warning"style="background:#ff9f00;border-radius:3px 3px 0 0;box-sizing:border-box;color:#fff;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:500;margin:0;padding:20px;text-align:center;vertical-align:top">Warning: You're approaching your limit. Please upgrade.</td></tr><trstyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"><tdclass="content-wrap"style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;vertical-align:top"><tablecellpadding="0"cellspacing="0"style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"width="100%"><tbody><trstyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"><tdclass="content-block"style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">You have <strongstyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">1 free report</strong> remaining.</td></tr><trstyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"><tdclass="content-block"style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Add your credit card now to upgrade your account to a premium plan to ensure you don't miss out on any reports.</td></tr><tr><td><tablewidth="185"style="Margin:0;border-spacing:0;max-width:185px;"><tr><tdwidth="100%"style="padding:15px 5px 17px 5px;border-radius:4px;background-color:#348eda;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;line-height:22px;font-weight:bold;color:#ffffff;text-align:center;vertical-align:top;"><ahref="http://www.mailgun.com"style="text-decoration:none;color:#ffffff;display:block;">
Upgrade My Account
</a></td></tr></table></td></tr><trstyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"><tdclass="content-block"style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0 0 20px;vertical-align:top">Thanks for choosing Acme Inc.</td></tr></tbody></table></td></tr></tbody></table><divclass="footer"style="box-sizing:border-box;clear:both;color:#999;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:20px;width:100%"><tablestyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"width="100%"><tbody><trstyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0"><tdclass="aligncenter content-block"style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;margin:0;padding:0 0 20px;text-align:center;vertical-align:top"><ahref="http://www.mailgun.com"style="box-sizing:border-box;color:#999;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:12px;margin:0;padding:0;text-decoration:underline">Unsubscribe</a> from these alerts.</td></tr></tbody></table></div></div></td><tdstyle="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td></tr></tbody></table></body></html>Solution 2:
This is how I fixed the problem.
Outlook for Android was not centering my button. This code was centered in every other email client. My email width is 580px. I added margin: 0; Margin-right: 190px; Margin-left: 190px; to the table in-line style.
<tablecellpadding="0"cellspacing="0"border="0"align="center"style="width: 200px; padding: 0px; margin: 0; Margin-right: 190px; Margin-left: 190px;"><tralign="center"><tdbgcolor="#ffffff"align="center"width="200"class="center button large-button"style="padding: 8px; margin: 0;"><pstyle="text-align: center; color: #6f5a95 !important; padding: 0px; margin: 0;"><ahref="http://example.com"target="_blank"class="button"style="mso-line-height-rule: exactly; line-height: 42px; color: #6f5a95; font-size: 14px; text-decoration: none;"> View new plans </a></p></td></tr>iPhone 5 and 6 shifted to the left, so I added margin: 0px which caused them to ignore the Margin with a capital M. Margin with a capital M gets picked up by Outlook, but ignored by most major email clients.
Post a Comment for "Html On Outlook For Android Not Showing Buttons As Expected"