mailto HTML best practices

Question

I have been asked to add some email addresses to individuals personal portfolio galleries on a site I designed.

There is already a very visible email form that customers can use, but it only goes to one address. Then the master email recipient has to forward the email to the intended recipient. When the business started there was only one master recipient. But now there are 5 or 6 artists and the shop is growing.

My first thought was to put href="mailto:" links on everyone's personal page. This would not be convenient for customers without a configured email client, but copy and paste would be fine. Also, The customer is worried about spam, but I think email filters would be more effective then some obfuscation technique.

Then I read this which says using mailto "screams 'this web site has been developed by a beginner.'I don't really agree. The author advocates using server side forms. I already have made a PHP form and could easily add a drop down of recipients (maybe not so easy, but it could be done) or have the recipient field auto fill on a certain persons page.

My real question(s) is/are threefold:

1. Does using mailto demonstrate some kind of beginners ignorance?
2. What would be the best practice to easily allow an average website user to email an individual from a small group?
3. And is email obfuscation critical?

BTW I've already ready a found a little data that suggests that obfuscation is (sort of effective), but the article seems dated.

Deprecatory

1. wouldn't say so 2. server side form with validation and some kind of spam protection 3. if site is popular, and bots/crawlers crawl it daily, maybe mails shouldn't be visible/accessible – Adalia

Answer 1

Does using mailto demonstrate some kind of beginners ignorance?

Not at all, mailto: and a mail icon is state of the art if you display a mail address. It's a UX and accessibility fail if you declare it as regular text. Especially for mobile users.

Using a contact form instead provides some benefits, but may also make your page vulnerable to mail spamming or even getting hacked if you don't watch out and update regularly.

What would be the best practice to easily allow an average website user to email an individual from a small group?

That's hard to say, it depends on the design and use case. I would recommend using a simple AJAX contact form with as few fields as possible ("Ask me a question:") and a ReCaptcha v3, but a simple mailto: link with a predefined subject is also fine.

And is email obfuscation critical?

I had to research this today and it seems to still be necessary. Most bots search for common patterns in the page source and don't use JavaScript.

You could add the href and insert the @ symbol using JS after the DOMContentLoaded event: <a class="uncrypt">user???example.com</a>. But this is just one way of many.

Bots that use JS could still get the address, but that's hard to avoid anyway and I personally think it's more important to create a good UX for all users than making your page bullet proof to spammers.

But you don't have to protect generic addresses (like info@<domain>) as spammers will try those anyway.

Denbighshire

Answer 2

Disadvantages of using mailto: links:

• Show the recipients email address (unless obfuscation is used)
• Users need to have a working email client installed on their computer. Nowadays more and more users only use a web based email client, which won't work with mailto: links.

Personally I'd go with a server created contact form.

Brighton

I actually want to show the recipients email address. From what I understand a spam filter can be more effective than some sort of obfuscation scheme. And so far spam has not been a problem. – Deprecatory

You did not answer any questions the user asked. – Denbighshire

Answer 3

Follow the leaders

Having simply an email link on a site isn't an especially good indicator of a high quality site. Quite simply, this is because high powered sites, sites with millions of users per day (microsoft.com, stackoverflow.com), or multinational corporations like Amazon do not do that. If they did, that persons email would probably be buried in a day.

Pros of the mailto: link:

• Simple
• Trivially understandable

Cons:

• Exposes contact information directly
• Not flexible
• Not what the pros do
• Email mailto links cause bad user experience *

Here are a few additional approaches that provide more professionalism: - If anonymity is a goal, a generic contact form. No user is exposed, could be 10 it people ready to respond to it, could be 1, could be 100. Submit to a back-end, forward to 10 people on the back-end if you like. - If you want to put a face to the contact, or you want to allow users to contact specific individuals, use user profiles with avatars of their faces, clicking a button also displays a contact form, perhaps in a modal.

---

• When you click a link and your email spins all 8 of your cpus as you wait for the world to end, you can see how the user experience suffers with having to open an unrelated email client

Chromosphere