I’ve long held that putting a plain text email on a website is not a good idea. Even with being careful like this I’m inundated with a large amount of Spam. While I don’t put my email address online in a plain text fashion, and preach the same to others, I’m not always afforded the ability to practice what I preach when I don’t “own” the site.
A case in point… I am a webmaster for a section of a non-profit site that was built to allow section webmasters to manage their group’s online information while maintaining an overall site look-and-feel. While following my philosophy of not placing email addresses online in their basic format, I took a decent approach of replacing the @’s and .’s with [at]’s and [dot]’s. Well, this didn’t sit well because it looked different than the other areas where emails were just entered in plain text. I decided my philosophy wasn’t going to win over the person I was dealing with as all of the other webmasters were entering straight email addresses, so, I removed my [at]’s and [dot]’s after creating another GMail account for myself so that I didn’t trash my email.
Shortly after doing this I came across a great site and, in particular, an article on the best methods for obfuscating emails. Well my method was likely very close to 100% effective, and one I prefer as it is easy for a human to replace the [dot]’s for .’s and the [at]’s for @’s, I settled on another method they outlined; reversing the email address but displaying it properly with some styling. Very cool if you ask me.
The method of using a reverse email address does add a little extra work, as well as having to take care to type in the email address backward. It also requires that you can access the HTML around the email address. The con for the visitor is that a simple copy/paste no longer works. Here is how this method is employed:
Take your email address and type it in backward, so, “myemail@domain.com” is typed in as “moc.niamod@liameym”. Now you need to wrap this text with a <span> or other tag where you can specify some style settings. The styling needed to display the backward typed email in its readable form would look like the following:
<span style="unicode-bidi: bidi-override; direction: rtl;">moc.niamod@liameym</span>
Here’s the above in practice: moc.niamod@liameym
To test this out simply highlight the email above, copy it and paste it somewhere. While it looks good on the page, it is mirrored when you paste it. This is the method I used on the site where the look-and-feel and consistency was important to them. I did, however, add a note to inform the users of what they would encounter with a simple copy/paste action. If I had access to the CSS file I would have added an “obfuscate-email” class as that would be easier to remember when entering additional emails in the future.
