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 HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<meta name="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">
<meta http-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">
<title style="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>
<body style="-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">
<style type="text/css">
@media only screen and (max-width:640px) {
h1,
h2,
h3,
h4 {
font-weight: 600 !important;
margin: 20px 0 5px !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>
<table class="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>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;vertical-align:top"> </td>
<td class="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">
<div class="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">
<table cellpadding="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>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="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>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="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">
<table cellpadding="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>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="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 <strong style="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>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="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>
<table width="185" style="Margin:0;border-spacing:0;max-width:185px;">
<tr>
<td width="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;">
<a href="http://www.mailgun.com" style="text-decoration:none;color:#ffffff;display:block;">
Upgrade My Account
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="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>
<div class="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%">
<table style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0" width="100%">
<tbody>
<tr style="box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0">
<td class="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"><a href="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>
<td style="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.
<table cellpadding="0" cellspacing="0" border="0" align="center" style="width: 200px; padding: 0px; margin: 0; Margin-right: 190px; Margin-left: 190px;">
<tr align="center">
<td bgcolor="#ffffff" align="center" width="200" class="center button large-button" style="padding: 8px; margin: 0;">
<p style="text-align: center; color: #6f5a95 !important; padding: 0px; margin: 0;">
<a href="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"