CODEWITHSUNDEEP
htmliosemailwebkitmobile-safari
Juan Carlos Méndez
Juan Carlos Méndez

Reputation: 1093

iOS Mail links bring up menu/action sheet instead of being a clickable link

I'm having trouble with the outgoing emails for my app. Hope someone here can shed some light.

The email is a multipart message, and it renders well on the platforms I want to target.

Screen with the links

However, on the iOS 6 mail browser on iPhone, the links bring up an action sheet to save images, assign to contacts, etc (see image below), instead of taking the user to Safari to the URL. On the sample code below I still have development (localhost:3000) links, but that is not the issue... same thing with the production urls.

Action sheet that comes up

The weird thing is that on my iPad (iOS 5) the links work perfectly. Same with Mac Mail, Outlook, Gmail, Hotmail. I'm almost sure it's not the markup's fault, but I'm including a snippet below for reference.

                <td align=3D'center' valign=3D'top' width=3D'140'>
                  <p>
                    <a href=3D'http://localhost:3000/users/confirmation.747dfe1c-28ff-11e2-bd48-013adbe35a70?confirmation_token=3DLypvcYovemp1FBFbYsLX'>
                      <img alt=3D'Confirm your account and learn more' border=3D'0' height=3D'140' src=3D'cid:[email protected]' width=3D'150'>
                    </a>
                  </p>
                  <h4 style=3D"color:#72654b;font-family:Georgia, Times, 'Times New Roman', serif;font-size:16px;font-style:italic;font-weight:normal;">Confirm your email</h4>
                  <p style=3D'color:#6c6c6c; padding-right: 12px;'>
                    Confirm your email address and other contact information to download an introductory white paper and forms that will get you started using WarGaming techniques.
                  </p>
                  <a href=3D'http://localhost:3000/users/confirmation.747dfe1c-28ff-11e2-bd48-013adbe35a70?confirmation_token=3DLypvcYovemp1FBFbYsLX'>
                    <img alt=3D'click here to confirm your email' border=3D'0' height=3D'30' src=3D'cid:[email protected]' width=3D'60'>
                  </a>
                </td>

This will of course, reduce the effectiveness of my email campaigns. Any ideas? Thanks i advance for any help!!

Upvotes: 2

Views: 1491

Answers (2)

Sebastian G. Marinescu
Sebastian G. Marinescu

Reputation: 2394

It depends on your taste, or on your clients wish, to externally host your images, like suggested by Robert. On a recent project for a client we had the same issue. The client does not want the images to be externally hosted. So our Solution is to still embed the images and declare them via "background-image". So in your example (only first part):

            <td align=3D'center' valign=3D'top' width=3D'140'>
              <p>
                <a href=3D'http://localhost:3000/users/confirmation.747dfe1c-28ff-11e2-bd48-013adbe35a70?confirmation_token=3DLypvcYovemp1FBFbYsLX'><span style="height: 140px; width: 150px; display: inline-block; background-image: url('cid:[email protected]');"></span></a>
              </p>
              <!-- ... -->
            </td>

I hope it helps :)

Upvotes: 0

Robert Trevellyan
Robert Trevellyan

Reputation: 121

It looks like your images are attached to the email. The thing that works for me is to link to the image instead of attaching it to the email. See Why anchors tag containing an image don't work in Iphone's mail app?

Upvotes: 1

Related Questions