Webmasters Gallery

I generally like mailto: links. But I feel like I can smell a mailto: link without even inspecting or clicking it, like some kind of incredibly useless superpower. I know that if I’ve got my default mail client set, clicking that link will do what I want it to do, and if I want, I can right-click and the browser will give me a “Copy email address” option to grab it cleanly.

That’s cool and all, but Adam Silver and Amy Hupe recently enumerated the problems with how these links behave:

Firstly, mailto links make it hard to copy the address, for example if you want to share the email address with someone else.

Secondly, some users use more than one mail app, and the link just uses whichever has been setup as the default, without giving them the option to use the other.

And finally, many users don’t have an email application set up, which means the link can take them to a dead end or down a rabbit hole.

Their UI experimentation ended up using a mailto: link, but putting the entire email address as the link which makes it especially obvious what the link does, while also offering a Copy button for a little UX bonus.

tel: links are weirder in the sense that a good many devices looking at them don’t have any phone-calling functionality. If they do, it’s a lot like email links in that multiple apps could do that work (e.g. WhatsApp, FaceTime, or the default phone app).

The hard part of the UX of all this is offering users choice on what they want these special link types to do. That’s what mailgo is attempting to solve. It’s a little JavaScript library that offers UI when you click them.

Live demo:

I kinda like it. I wouldn’t mind at all if that popped up when I clicked a link like this, especially since it has that “open default” option if I want that anyway. Seems to check all the boxes for the problems these types of special links can have.

The post Offering Options for mailto: and tel: Links appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.