During the design phase of a recent website overhaul, a client requested the ability to directly call and email members of their C-suite from the website. The idea was to show potential customers that they’re top priority; having the ear of the top brass rather than filling out a form that goes god-knows-where. Fair enough, I don’t think there’s anything inherently wrong with that idea, assuming you’ve got some nuclear-powered spam filters running on your mail server.

A few options were pitched, but in the end, the decision was made to go with straight-up mailto links. It should be that simple, it really should.

Immediately on launch, however, we ran into issues: users clicking links and receiving unfamiliar prompts from their browsers, or in some cases. seeing nothing at all. The issue is a well-known one: many users don’t set a default mail application, or they’ve set it incorrectly, so you can’t rely on it without fallbacks.

The solution ended up being a bit unorthadox, but ultimately effective: the first click is intercepted, and instead three things happen: the email address is copied to the user’s clipboard, the button text changes to Email sarah@website.com, and a notification is briefly displayed, letting the user know the address has been copied and is ready to paste where they please. Clicking the button a second time will then perform the default action; opening your default email client.

The 2-click mailto link solution in action. Another click would open your default client.

The same functionality is applied to tel links as well: on mobile, it will immediately bring up your dialer with the desired number, since having a phone app on mobile is a guarantee. On desktop, the number is copied, notification displayed, and button text changed to Call Sarah: (123) 456-7890. You can click it again to open your default desktop dialer, but as far as I know no human being has ever set that up.

The solution, though a novel one to most users, has proved intuitive and effective.