Email Addresses and Telephone Numbers on the Web

Lync screen with telephone number pad

Email links and telephone links in a website only work properly if the system the user is on has a default phone or email service. A mobile phone does. A tablet user may not be able to make calls. And a student on a lab computer probably does not have access to either phone OR email through that computer. So although a clickable phone or email on a website may not be usable by all your users, it will be increasingly available to many of your users.

So - how do we put clickable email and telephone numbers on our webpages?

Email

Email addresses on webpages are pretty standard, but in case you wondered how to do it, here we go.

The first method provides the user with the human-readable email address, which is useful to those who will need to write it down for later, as with: webhelp@wwu.edu

The code for this is:

<a href="mailto:webhelp@wwu.edu">
                    webhelp@wwu.edu</a>

The second method is to provide the user with the text explaining who the email goes to. If the user wants to write down the email address for later then will have to hover over the email link and the address should appear in the bottom left of the webpage. This would look like this: WebTech Help Line

And the code for this is:

 <a href="mailto:webhelp@wwu.edu">
                    WebTech Help Line</a>

At WebTech we prefer the second method slightly.

In Dreamweaver you just highlight the text phrase that you want to use, then select Insert > Email Link and input the email address you wish to use.

Telephone Numbers

Mobile phone browsers are increasingly enabling the "click-to-call" technology on phone numbers it finds on the page. However your user may not realize they can press the phone number to make a call because the number will not be styled like a link. The following method makes the phone number be styled as a link.

Desktop users also can use this technology, especially someplace like Western where we are going to VOIP with the Lync system. If you use this technique your desktop users can click to call, too.

Telephone numbers are very similar to email addresses, but have a few special characteristics. First of all the phone number has to include the international code (which is "1" for the US) and of course the area code. Then instead of having the "mailto:" part of the link you replace this with "tel:+" . Therefore the code ends up as:

<a href="tel:+13606506355">
      Call us at 360.650.6355</a>

Which looks like this:
Call us at 360.650.6355

Advanced

If you want to get fancy there are some special characters you can employ within the phone number:

p creates a one-second pause in the dialing sequence, perhaps before an extension:

<a href="tel:+13606506355p1111">
      Call us at 360.650.6355 ext 1111</a>

w means wait-for-dial-tone

<a href="tel:+w13606506355">
      Call us at 360.650.6355</a>

In addition to telephone calls, you can also allow you users to Text, i.e. send SMS and MMS messages from the web page. However this is not reliable across browsers so it's probably best to stick to emails and phone calls at Western for now.