mailto HTML 最佳实践

Question

我被要求向我设计的网站上的个人个人作品集画廊添加一些电子邮件地址。

客户可以使用一种非常明显的电子邮件表单，但它只能发送到一个地址。然后主电子邮件收件人必须将电子邮件转发给预期的收件人。业务开始时，只有一位主收件人。但现在有 5 或 6 位艺术家，而且店铺还在不断扩大。

我的第一个想法是将href="mailto:" 链接放在每个人的个人页面上。这对于没有配置电子邮件客户端的客户来说并不方便，但复制和粘贴就可以了。此外，客户担心垃圾邮件，但我认为电子邮件过滤器会比一些混淆技术更有效。

然后我读到this，上面写着使用mailto“尖叫'这个网站是由初学者开发的。'我不太同意。作者提倡使用服务器端表单。我已经制作了一个PHP表单和可以轻松添加收件人的下拉列表（可能不是那么容易，但可以做到）或在特定人员页面上自动填写收件人字段。

我真正的问题有三个：

1. 使用邮件是否表明某种初学者的无知？
2. 让普通网站用户轻松地向小组中的个人发送电子邮件的最佳做法是什么？
3. 电子邮件混淆很重要吗？

顺便说一句我已经准备好找到一些暗示that obfuscation is (sort of effective)的数据，但这篇文章似乎过时了。

Answer 1

使用mailto:链接的缺点：

• 显示收件人电子邮件地址（除非使用了混淆）
• 用户需要在他们的计算机上安装有效的电子邮件客户端。现在越来越多的用户只使用基于 Web 的电子邮件客户端，它无法使用 mailto: 链接。

我个人会使用服务器创建的联系表单。

Answer 2

跟随领导

网站上只有一个电子邮件链接并不是一个高质量网站的特别好的指标。很简单，这是因为功能强大的网站、每天拥有数百万用户的网站（microsoft.com、stackoverflow.com）或像亚马逊这样的跨国公司不这样做。如果他们这样做了，那个人的电子邮件可能会在一天内被埋没。

mailto: 链接的优点：

• 简单
• 浅显易懂

缺点：

• 直接公开联系信息
• 不灵活
• 专业人士不会这样做
• 电子邮件 mailto 链接会导致糟糕的用户体验 *

以下是一些提供更专业的其他方法： - 如果匿名是一个目标，generic contact form。没有用户被暴露，可能是 10 个人准备响应它，可能是 1，可能是 100。提交到后端，如果你愿意，可以转发到后端的 10 个人。 - 如果您想为联系人添加头像，或者您希望允许用户联系特定个人，请使用带有avatars 头像的用户个人资料，单击按钮也会显示联系表格，也许是模态的。

---

• 当你点击一个链接，当你等待世界末日时，你的电子邮件会旋转你的所有 8 个 CPU，你可以看到用户体验如何因不得不打开一个不相关的电子邮件客户端而受到影响

Answer 3

使用邮件是不是表明了初学者的某种无知？

一点也不，mailto: 和邮件图标是最先进的，如果你显示一个邮件地址。如果您将其声明为常规文本，则它是一个 UX 和可访问性失败。尤其是对于移动用户。

使用联系表单虽然有一些好处，但如果您不注意并定期更新，也可能使您的页面容易受到垃圾邮件甚至被黑客入侵。

让普通网站用户轻松地向小组中的个人发送电子邮件的最佳做法是什么？

这很难说，这取决于设计和用例。我建议使用包含尽可能少字段的简单 AJAX 联系表单（“问我一个问题：”）和 ReCaptcha v3，但带有预定义主题的简单 mailto: 链接也可以。

电子邮件混淆很重要吗？

我今天不得不研究这个，它似乎仍然是必要的。大多数机器人在页面源代码中搜索常见模式并且不使用 JavaScript。

您可以在DOMContentLoaded 事件之后添加href 并使用JS 插入@ 符号：<a class="uncrypt">user???example.com</a>。但这只是众多方式中的一种。

使用 JS 的机器人仍然可以获取地址，但这无论如何都很难避免，而且我个人认为，为所有用户创建一个好的用户体验比让你的页面对垃圾邮件发送者防弹更重要。

但您不必保护通用地址（如 info@<domain>），因为垃圾邮件发送者无论如何都会尝试这些。