Mobile e-mail body : change links depending on client apps

Question

Note : read both answers below, thery helped us.

Original question: Want to show appropriate deep link : http://en.wikipedia.org/wiki/Mobile_deep_linking so if android and no our app installed : show android app link, else html page link

App sends email to users. Want to be able to change links depending on device. If desktop - as is. If mobile go thru mail body and add "m." to all the href OR other link if our native app installed.

Do mobile mail clients run js?

Do I need to encode the js in anyway. Tried google but not able to get the right keywords to search for. End up on page about send grid or using js to send an email.

I want js inside email body. I know can change template at server, but want it to be dynamic to current client. So same email opened on desktop -> desktop links ; inside mobile app or browser - mobile links.

Or other html solution would be cool. W3 are you listening?

Osprey

You can't really use JS in emails, and even if you could, I'm not sure how you could (reliably) detect the device. Instead, detect the device on the page you link to and do a redirect; or perhaps better, make a "proper" responsive page. – Levinson

Thanks for reply, so there is no way to show or hide an link in an email being read in a device depending on device type and what it has installed? Want to show appropriate deep link : en.wikipedia.org/wiki/Mobile_deep_linking so if android and no our app installed : show android app link, else html page link. – Osprey

Answer 1

You can show/hide links depending on device using media queries. Try this:

<style>
  @media only screen and (max-device-width: 500px) {
    a[class=mobileLink] {
      display: inline !important;
      font-size: 24px !important;
    }

    a[class=desktopLink] {
      display: none !important;
    }
  }
</style>

<!-- Starting link switching technique -->

<a href="link/for/desktop/version" class="desktopLink">HTML page link</a> 
<a href="link/for/mobile/version" class="mobileLink" style="display:none; 
   font-size:0px">Mobile page link</a>

<!-- End link switching technique -->

Yes, Outlook ignores display:none but if the link is just text, font-size:0px should take care that.

Indefensible

thanks will demo both ideas to UI folks and lets see what they decide – Osprey

Answer 2

Want to show appropriate deep link : http://en.wikipedia.org/wiki/Mobile_deep_linking so if android and no our app installed : show android app link, else html page link

This cannot be done in emails, but it can be done in landing pages, like the web version of your email.

App sends email to users. Want to be able to change links depending on device. If desktop - as is. If mobile go thru mail body and add "m." to all the href OR other link if our native app installed.

This can be done by using media queries to hide/show desktop or mobile content when appropriate. (Responsive emails.)

Do mobile mail clients run js?

No -- security issues.

Do I need to encode the js in anyway. Tried google but not able to get the right keywords to search for. End up on page about send grid or using js to send an email.

There's nothing you can do to get JS to work in email clients. It just won't work.

I want js inside email body. I know can change template at server, but want it to be dynamic to current client. So same email opened on desktop -> desktop links ; inside mobile app or browser - mobile links.

Once again, this can be done using media queries. (Responsive emails.) There are some drawbacks, but I suggest doing a Google search for "Responsive Emails" to get started.

Or other html solution would be cool. W3 are you listening?

There's nothing they can do in the email world. Unlike web browsers, where there are set standards, in the email world, anything goes.

Edit: Although using media queries to show the appropriate link/button for the devices, it's not a bulletproof solution. The best solution is to use your web server's power to determine where the user should go, depending on their user agent or viewport size.

Shillelagh

Answer 3

There is a more modern solution, that is supported natively by mobile platforms.

On ios it's called universal links and on Android app links.

Epizootic