Co-written with Amy Hupe 🌟.
Amy and I share a passion for getting the basics right. That means thinking carefully about the big picture—but also paying close attention to the finer details.
This is a post we wrote together about one of those details, which we wrestled with along the way.
# The problem with mailto links
It was really important to us that our website represented our core values by being simple, accessible and usable.
One of the decisions we faced whilst trying to achieve this was whether or not to include a standard mailto link for our email address.
We were reluctant to include one because, despite being commonly used across the web, they present a number of problems.
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.
For example, when you click an email address on our Macbook using Chrome, the Mail application loads asking me to set up an email account. We both use Gmail, and getting that set up on Chrome is really challenging.
For these reasons, we initially decided to leave the mailto link out and include the email as normal text.
But this solution had its own drawbacks.
# The pros of mailto email links
We weren’t entirely comfortable with our decision to omit the mailto link because:
- they’re used everywhere—so people may be expecting the behaviour they’re used to
- on mobile devices, users pretty much have to set up a default email address, so clicking this link does exactly what most mobile users intend: it opens up their compose dialog
But this still doesn’t provide a great experience for someone who wants to copy the email address and add it to a note or send it to a contact.
# Offering choice
Given that there are clear advantages and disadvantages to both including and omitting a mailto link, we decided it was best to give users the choice, which happens to be one of the inclusive design principles.
So the day after launch, and after a brief Twitter discussion, we added a mailto link next to the email address, whilst keeping the address itself as plain text.
People who want to go straight to sending email using a mailto link can do so, and people who want to copy the email can do that, too.
# Tidying things up with a copy address button
This solution was probably fine, but mailto links are so common that we were concerned some users would still expect to be able to click or tap the email address itself.
To fix this, we decided to add the mailto link to the email address and introduce a “copy address” button next to it, which lets users quickly copy the address to their clipboard.
From there, they can paste it into their mail application to compose an email, add it to their notes or share it with a contact.
This gives users the same choice described above, but it looks a little cleaner and more conventional.
However, it’s worth noting that this only solves one of the three mailto link problems we mentioned above: that they make it hard for users to copy the address.
Even with the solution we’ve used, people who follow the link still:
- get taken to a dead end if they don’t have an email application set up
- won’t get a choice about which application to use, if they use more than one
# What we’d really like
This is such a common problem and it feels like something browsers and operating systems should fix.
We think the ideal solution would be for users who click or tap on the mailto link to see a menu with choices like:
- Send an email from Gmail
- Email from another account
- Copy email address
- Share email address via…
This would answer the most common needs, and gives most users a way forward.
And that’s our little story about mailto links. What do you think?
Sign up to my newsletter
I’ll email you once a month on nailing the basics, avoiding complexity and making things that work for everyone.