Skip to main content

Displaying an email address on your website

Posted in Content, Email and Website admin

You know your website’s contact page? You probably have a contact form, don’t you? Is your email address on the page too? Putting your email address on your website turns out to be surprisingly complicated.

Don’t believe me? Read on…

Plain text email address

Presenting your email address as normal text means that it can be highlighted, copied then pasted into the To: box of a draft email.

Nice and straightforward, but how many people will actually do that? Let’s break down the process:

  1. Select the email address you want to send an email to.
    • With a mouse/trackpad, click the start of the address and drag your mouse over to the end of the email address. Try again, as you missed the first letter. Ok, got it.
    • On a touch screen device this is equally as fiddly: tap and hold the first word of the email address, drag the right-hand blue marker to the end of the address. Drag it back again, as you highlighted the word after the address…
  2. Copy the email address from the page.
    • With your mouse, right click and select ‘Copy’ from the menu. Or go to the ‘Edit’ menu at the top of the screen and find ‘Copy’. Or wasn’t there a keyboard shortcut? Ctrl + c. Oh, you’re a Mac user? Cmd + c, then. Lots of options, but lots to remember.
    • On your touch device, the option to ‘Copy’ should automatically pop up when you’ve highlighted the address. Unless you miss-tap, in which case you’re back to square 1.
  3. Switch to or open your email app
    • Search for your email app and open it. Easy.
    • Open your web browser and find your email app amongst your bookmarks
  4. Compose/open a new email. Straightforward enough – just tap the icon.
  5. Paste the email address into the To: field. It didn’t copy? Switch back to your web browser and start again. Got it now? Good stuff.

Visitors to your website want things to be easy. Although that process is fairly straightforward, it presents a barrier.

Also, the visitor isn’t on your website anymore.

Another consideration is that you may well be upsetting expectations: a visitor to your website could expect tapping an email address to open a new email in their default email app. Which segues nicely into…

Much more convenient that plain text. No more selecting, copying and pasting! The email address is a link (called a ‘mailto’ link), so just click/tap it and you’re away! There are complications here too.

Making it difficult to do anything else

What if your visitor actually wants to copy and paste your email address? Maybe they want to add you to their address book, rather than sending you an email. It can be a pain to copy the email address without inadvertently opening an email in your default email app.

Default email apps

What happens when a mailto link is clicked or tapped? Your web browser opens your operating system’s default mail app.

Windows, Android and Mac

In some cases this behaviour is fine, where your visitor (like me) uses a dedicated email app to access their emails. I use Apple Mail, so clicking a link on a website would open a new email there. Exactly what I’d want.

I’m always on the look out for new apps to improve my workflow, so if I changed my Mac’s default email app to something like Airmail, that’s the app that would open. This is similar on Windows and Android. Again, just what I’d be after.

iOS

Unfortunately, iPhone and iPad users can’t change their default email app, so mailto links always open Apple’s Mail app.

This would be fine for people like me who use Mail to access emails on their iPhone/iPad. But what about people who use apps like Gmail? They’d have to follow the ‘select, copy, switch apps, paste’ routine, with the added obstacle of the text being a link, which, with one false move, could trigger the opening of a new email in Apple Mail. Not ideal.

Browser-based email apps

A lot of your website’s visitors will access their emails through their web browser. In other words, they open their web browser and navigate to a page where they log in to access their emails. These visitors are back to the clunky old ‘select, copy, switch, paste’ scenario.

Business email services

Business email services like Gmail or Office 365 offer a great experience on their web browser-based app, and many people prefer it over using a dedicated email app. They also offer loads of powerful features that you can only use via their web app.

Personal email services

Email services like Hotmail (now Outlook.com) and non-business Gmail are browser-based by default unless you actively set them up in a mail app. Others like Yahoo!Mail don’t let you use any apps other than their own!

A lot of people are given an email address by their phone/internet provider (Virgin, Sky, BT, etc.) which, again, are all browser-based by default.

A quick aside about spam

Whether plain text or a mailto link, if your email address appears on your website it will be picked up by spam-bots that scour websites looking for email addresses.

There are ways your web designer can go some way to disguising your email address from these spam-bots, but they’re not all that effective, as the people who program the spam bots are always one step ahead.

Contact forms

Having a form on your website with a few input boxes (name, email, message – that kind of thing) is the easiest way for visitors to your website to send you a message. Here’s a quick run-down of the advantages:

  • No copying and pasting! Makes it as easy as possible to send a message: just fill out a form on the website and hit ‘send’.
  • You can allow the sender to do things they might not be able to in a normal email, for example, selecting an option from a dropdown menu or ticking a checkbox to join your mailing list.
  • Keep anyone who sends you a message on your website – no opening of more apps.
  • Allow you to offer the sender something to do: “Your message has been sent. Why not check out our blog?”
  • Remove any educated guesswork as to the best way to present an email (plain text or mailto link).
  • Keep your actual email address completely private, away from the prying eyes of spam-bots.
  • Your web designer can do all sorts of clever stuff to make sure as much spam as possible is intercepted before reaching your mailbox.
  • Can keep a record of all emails sent to you in your website’s database, in case you ever need that information.

So don’t display your email address!

The cons far outweigh the pros, when you put your email address on your website. Stick to a contact form and you can’t go far wrong!

Hire me

If you like what you’ve read and think we’d work well together, I’d love to hear from you.

Contact me now

More resources

Here are a couple more resources for you to enjoy. If that’s not enough, have a look at the full list.

  1. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.

  2. The accessibility conversations you want to be having

    In most companies, accessibility conversations centre around WCAG compliance, but that’s just the start. Thinking beyond that is where you want to be!