Bulletproof buttons in Android S3

Hi people, I've got a problem with Stig's Bulletproof buttons ( http://emailbtn.net/ ) in Android S3's mail client.

I've tried the default style button from the site, a custom rolled one, one with a span with all the styling outside the anchor and one with a span inside the anchor.

Android S3 just shows a plain old hyperlink in every case. I don't even want to think about other versions.

Anyone else found this? Or even better, a solution?

roshodgekiss roshodgekiss, 3 years ago

Hi there Dr Madvibe - great to meet you! Would you be able to tell us which email client you're seeing this in (eg. default client, Gmail)? If you have a code sample of what you're using or screenshot, that would be amazing.

Once we have these details, Stig, I and others will be able to get a better idea of what's happening here. Thanks for your patience!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Stig Stig, 3 years ago

Hi doc, sorry you're having trouble getting the buttons to show up on an Android S3 – that certainly sounds odd.

I haven't tested them on that specific device, but I haven't had any trouble on other very similar Android phones.

Further to what Ros is saying, I wonder if the code might somehow be getting altered along the way? Have you tested sending your email with Campaign Monitor, or through a different service?

If you can access the address you're sending to through a desktop email client, could you have a look at these instructions for grabbing the received message source? That's a good place to start – making sure the original code makes it through to your inbox in one piece.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Dr Madvibe Dr Madvibe, 3 years ago

Hi Stig & Ros, thanks for the response.

It's the default Samsung S3 email client. Here's a screen shot: http://i.imgur.com/nLZWwaz.png
You can just see some white text below the 'First installment' saying 'Pay monthly'; it's supposed to have a big red background. (This is dummy data btw)

And the email is here: http://www.hastingsdirect.com/email/responsive-email/quote.html

That screenshot was sent by our email servers, but the several tests using putsmail.com also fail.

I can't access this particular devices's webmail account, but on different recipient's Gmail webmail account only the background url and the -webkit is stripped out.

Cheers
Dr M

Dr Madvibe Dr Madvibe, 3 years ago

BTW you will also notice on the screenshot it hasn't responded to the media queries that tell it to shrink to one column.

Stig Stig, 3 years ago

Thanks for the details, Dr.

I didn't actually realize Samsung had replaced the default Android email client with one of their own for the S3.

That's likely the culprit then – I don't believe we've done any email rendering testing in Samsung's app, unfortunately. We'll see if we can get our hands on a copy for some more thorough testing.

For now, would something like this work better?

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.hastingsdirect.com/quotehisle/views/common/ProductEntryPoint.jsf?lob=privateCar&isNewQuote=true" style="height:40px;v-text-anchor:middle;width:240px;" arcsize="14%" stroke="f" fillcolor="#ef4441">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:18px;font-weight:bold;">Pay monthly</center>
  </v:roundrect>
<![endif]--><![if !mso]><table cellpadding="0" cellspacing="0" bgcolor="#ef4441" style="border-radius:6px;"><tr><td width="240" height="45" align="center" valign="middle"><a href="http://www.hastingsdirect.com/quotehisle/views/common/ProductEntryPoint.jsf?lob=privateCar&isNewQuote=true"
style="background-color:#ef4441;border-radius:6px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:18px;font-weight:bold;line-height:45px;text-align:center;text-decoration:none;width:240px;-webkit-text-size-adjust:none;">Pay monthly</a></td></tr></table><![endif]></div>

Here I've separated the HTML and VML elements, and wrapped a table around the HTML version. The table is styled to match the button size and look, as the email client does seem to handle table HTML better.

A little clunkier, and probably not a perfect result, but I hope it helps you a little closer to a good solution.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Dr Madvibe Dr Madvibe, 3 years ago

I'd like to say that works, but my stupid device has stopped picking up my test emails. Pah!

There's an IT support guy here who has the same phone and says all his emails come in BIG style.

Stig Stig, 3 years ago

Frustrating for sure, sorry to hear that! If you do get the tests through to one of the phones, I'd love to see how it went.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Dr Madvibe Dr Madvibe, 3 years ago

OK, here's the results of the fun. I've indented it all for readability. I had to:

    reduce the width of the mso button a bit.
    add a span around the html button text

The button text is still underlined even though the anchor and the span within it specify not to. And there are probably too many importants, but I have to get it out the door today.

<div style="text-align: center !important;">
    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.hastingsdirect.com/quotehisle/views/common/ProductEntryPoint.jsf?lob=privateCar&isNewQuote=true" style="height:40px;v-text-anchor:middle;width:230px;" arcsize="14%" stroke="f" fillcolor="#ef4441">
            <w:anchorlock/>
            <center style="color:#ffffff;font-family:sans-serif;font-size:18px;font-weight:bold;">Button text</center>
        </v:roundrect>
    <![endif]-->
    <![if !mso]>
        <table align="center" cellpadding="0" cellspacing="0" bgcolor="#ef4441" style="border-radius: 6px;">
            <tr>
                <td width="240" height="45" align="center" valign="middle">
                    <a href="#"
    style="background-color: #ef4441; border-radius: 6px; color: #ffffff !important; display: inline-block; font-family: sans-serif; font-size: 18px; font-weight: bold; line-height: 45px; text-align: center; text-decoration: none !important; width: 240px; -webkit-text-size-adjust: none;">
                        <span style="color: #ffffff !important; text-decoration: none !important;">Button text</span>
                    </a>
                </td>
            </tr>
        </table>
    <![endif]>
</div>
Stig Stig, 3 years ago

Great job – thanks for posting the improvements back here!


The Campaign Monitor Blog – HTML email smarts to go with your good looks.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098